Angular 7 - "Full" highlight selected rows

Our pure JavaScript Scheduler component
Post Reply
User avatar
eccdakaj
Posts: 10
Joined: Mon Mar 11, 2019 11:53 pm

Angular 7 - "Full" highlight selected rows

Post by eccdakaj » Sun Apr 14, 2019 11:02 pm

Hi.
My case is (Angular 7):
A) User select one or more resources on scheduler
B) I have to highlight - change background color (adding - removing css classes) of the grid rows of selected resources AND of the grid rows of events of selected resources.

In plain javascript it's ok:
- i get the selected resources from event "selectionchange"
- i "find" (exploring dom) the resource rows and the event rows
- i add/remove css classes

In Angular, i does not have access to rows of scheduler as components, and i can't use direct dom manipulation to change css class.
Any suggestion?

User avatar
mats
Core Developer
Core Developer
Posts: 14798
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Angular 7 - "Full" highlight selected rows

Post by mats » Mon Apr 15, 2019 6:43 pm

Easier than that! We already apply a CSS rule for selected rows so just use ".b-grid-row.b-selected" to style the rows as you want.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
eccdakaj
Posts: 10
Joined: Mon Mar 11, 2019 11:53 pm

Re: Angular 7 - "Full" highlight selected rows

Post by eccdakaj » Tue Apr 16, 2019 12:45 pm

I have to handle a more complex situation: different styles for resource row (selected style 1, unselected style 2) and event row (style 3, style 4), different styles for elements inside the resource row etc ...

In any case, I solved the problem this way:
- I save, on the selectionchange events, the "status" of the selection
- on the cellclick event, based on the "status" of the selection, I add / remove the css classes in the "elements" of the scheduler (selection by XPATH)

Thank you

Post Reply