Change color and opacity of row's hover WITH frozen columns

[Jesse LaVere]

Hello,

I'm trying to style the hover color of rows while using frozen columns. I tried the code for highlighting rows when columns are not froze, but it doesn't work properly. You'll see in the image below that it only highlights the table that you're hovering over instead of doing both tables.

.e-grid.e-gridhover tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
background-color: blueviolet !important;
}

[Rajapandiyan Settu]

Hi Jesse,   

  

Greetings from Syncfusion support. 

 

To update the following CSS in your sample and you can change the row-hovering background color for both frozen and movable rows.  

 

 

<style> 

    .e-grid.e-gridhover tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), 

    .e-grid.e-gridhover tr.e-frozenhover { 

      background-color: blueviolet !important; 

    } 

  </style> 

 

 

 

Find the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/react-hpwfvk-ys9gtl?file=index.js  

 

Please get back to us if you need further assistance with this. 

 

Regards,   

Rajapandiyan S  

[Jesse LaVere]

That does highlight the row, but it overrides the cell coloring I'm doing in the queryCellInfo fn.

args.cell.style.backgroundColor = 'some color';

Is it possible to keep my custom cell background colors and have the highlight and selection colors NOT override them?

[Rajapandiyan Settu]

Hi Jesse, 

Thanks for your update. 

Query: Is it possible to keep my custom cell background colors and have the highlight and selection colors NOT override them? 

Yes, you can achieve your requirement by using CSS selector :not with that td element in your styles. Refer to the below code example and sample for more information. 

queryCellInfo(args){ 

      if(args.column.field == "CustomerName"){ 

        args.cell.style.backgroundColor = 'wheat';         

        args.cell.classList.add("customclass");  // add a custom CSS class to the cell which you applied the background color 

      } 

    } 

Index.html 

<style> 

    .e-grid.e-gridhover tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell):not(.customclass),  // hovering background color applied to all the cell in a row instead of customclass cell 

    .e-grid.e-gridhover tr.e-frozenhover { 

      background-color: blueviolet !important; 

    } 

  </style> 

 

Sample: https://stackblitz.com/edit/react-hpwfvk-soypxb?file=index.js  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S