Page 1 of 1

Angular 7 - "Full" highlight selected rows

Posted: Sun Apr 14, 2019 11:02 pm
by eccdakaj
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?

Re: Angular 7 - "Full" highlight selected rows

Posted: Mon Apr 15, 2019 6:43 pm
by mats
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.

Re: Angular 7 - "Full" highlight selected rows

Posted: Tue Apr 16, 2019 12:45 pm
by eccdakaj
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