change color and opacity of row's hover

[Sasan Moshksar]

I tried to change color and also opacity of row's hover which is by default gray but I could not do it.  I added .e-grid .e-hover to my css file but it does not work. I attached my sample code

Attachment: sampledatagrid_3e930a65.zip

[Pavithra Subramaniyam]

Hi Sasan, 

 

Greetings from Syncfusion. 

 

You can achieve your requirement by overriding the CSS for grid row hovering. Please refer to the below code example and sample link for more information. 

 

[style] 

.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; 

  } 

 

 

Sample: https://stackblitz.com/edit/angular-grid-hover-customization?file=app.component.ts 

 

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

 

Regards, 

Pavithra S. 

[Sasan Moshksar]

Hi Pavithra,

Thanks for your fast reply and clear example. it works now.

just one more question. if you look at column arthroseGrad in last sample code.

https://stackblitz.com/edit/angular-grid-hover-customization?file=app.component.ts

This column has already different background color. it is happening based on some conditions.

I want to keep background color of arthroseGrad column, when row's hover is done.  

here is my question: is it possible to keep original background color of the column in row's hover ?

[Pavithra Subramaniyam]

Hi Sasan, 

 

Thanks for your update. 

 

You can achieve your requirement by using the below customization. Please refer to the below code example and sample link for more information. 

 

[style.css] 

<style> 

.e-grid .e-rowcell.cellRed{ 

    background-color: red !important; 

} 

.e-grid .e-rowcell.cellGreen{ 

    background-color: green !important; 

} 

.e-grid .e-rowcell.cellBlue{ 

    background-color: blue !important; 

} 

.e-grid .e-rowcell.cellPink{ 

    background-color: hotpink !important; 

} 

 

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

  background-color:transparent; 

    opacity:0.5; 

  } 

 

</style> 

 

Sample: https://stackblitz.com/edit/angular-grid-hover-customization-a1mc1p?file=index.html  

 

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

 

Regards, 

Pavithra S. 

[Sasan Moshksar]

I got it. 

Thanks for your help!

[Pavithra Subramaniyam]

Hi Sasan, 

 

Thanks for your update. 

 

Please get back to us if you need further assistance on this. As always, we will be happy to assist you.  

 

Regards, 

Pavithra S.