We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

change color and opacity of row's hover

Thread ID:

Created:

Updated:

Platform:

Replies:

149611 Dec 3,2019 08:24 AM UTC Dec 4,2019 08:56 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Sasan Moshksar
Asked On December 3, 2019 08:24 AM UTC

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 [Syncfusion]
Replied On December 3, 2019 10:12 AM UTC

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; 
  } 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Sasan Moshksar
Replied On December 3, 2019 10:53 AM UTC

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.

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 [Syncfusion]
Replied On December 4, 2019 07:21 AM UTC

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> 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S. 


Sasan Moshksar
Replied On December 4, 2019 07:32 AM UTC

I got it. 

Thanks for your help!

Pavithra Subramaniyam [Syncfusion]
Replied On December 4, 2019 08:56 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon