[ANGULAR] Scheduler Pro: Hovering over Event grid rows

[vramanathan]

Hello,
On the Events grid (b-grid-subgrid.b-grid-subgrid-normal) when hovering over a DIV that has the following classes "b-sch-event-parent.b-sch-event-wrap" (either of the blue areas in the attached image) , is there a way for the DIV with the following classes "b-grid-row.b-tree-parent-row.b-tree-expanded.b-selected" (both purple areas in the image) and the above mentioned DIV to change their background color via CSS ?

Events_Grid_Row_sample_posted.JPG (63.59 KiB) Viewed 195 times

please help.
-venu

[marcio]

Hey venu,

You can use https://www.bryntum.com/docs/scheduler-pro/api/SchedulerPro/view/SchedulerPro#event-eventMouseOver and https://www.bryntum.com/docs/scheduler-pro/api/SchedulerPro/view/SchedulerPro#event-eventMouseOut

And set up in the listeners configuration like this

listeners : {
        eventMouseOver : (event) => {
            // Get all rows with the classes that you mentioned
            const rowsToChangeClass = document.getElementsByClassName('b-grid-row b-tree-parent-row b-tree-expanded b-selected');
            rowsToChangeClass.forEach((rowElement) => {
                // Add new customClass with custom bg-color
                rowElement.classList.add('customClass');
            });
        },
        eventMouseOut : (event) => {
            // Get all rows with the class added with eventMouseOver
            const rowsToChangeClass = document.getElementsByClassName('customClass');
            rowsToChangeClass.forEach((rowElement) => {
                // Remove the customClass to set back the default style
                rowElement.classList.remove('customClass');
            });
        }
    }