How to remove hover background color on a grid row?

[Michelle]

I just upgraded to 2016.1.112 and I noticed that the grids now have a grey gradient background color over rows that are hovered over.  The grid did not used to do this in 2015.3.1111.  You can change the target version in the following example to demonstrate:

http://dojo.telerik.com/aDUPi/2

Also, the hover background color of the grid does not follow the hover background color for any other widget and does not seem to be controlled by the same hover background color variable in the styles.  This is evident when you change the "Hover background" color in the theme builder and all widgets have the new hover background color except for the grid:

http://demos.telerik.com/kendo-ui/themebuilder/

How can I either remove the hover background color on grids or change the color to match all other widgets?

 

Thanks,

Michelle

[Magdalena]

Hello Michelle,

We have tested the CSS property in the Theme Builder, but it works properly on our side. We are sending you this video for your reference.

For removing hover effect from Grid, apply the following CSS:

html .k-grid tr:hover {
  background: transparent;
}

html .k-grid tr.k-alt:hover {
  background: #f1f1f1;
}

The color of the second rule depend on the applied Skin.

Regards,
Magdalena
Telerik

 

 

[Michelle]

Thanks for the response.  I watched the video and noticed you were trying it on the Material theme.  I was using the Default theme and it doesn't work there.

[Dimo]

Hi Michelle,

The following documentation section provides a detailed explanation on how to remove the Grid rows hover effect:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#hover-effect-on-table-rows

The important part is to use the correct background color in the second CSS rule. Obtain the background color value by using the browser's DOM inspector.

Regards,
Dimo
Telerik

[Michelle]

Hi Dimo,

I followed Magdalena's advice from her previous response and I was actually already able to get rid of the hover effect, but that does not address my concern about the hover background color set in the theme not being honored by the grid hover effect.  I believe it is a bug that the theme color is ignored.  Also, I had a case where the wrong accent color was used when I hover over a selected row.  It was also ignoring our custom accent color and I had to override it with another custom style.  It would be much better if the grid just used the proper theme colors rather than forcing users to apply override styles, which is less maintainable and prone to errors.  It seems pretty clear that the default theme is having issues because it works in Material theme.

Thanks,

Michelle

[Iliana Dyankova]

Hi Michelle,

I am not quite sure if this behavior is correct, therefore I forwarded the case to our UX expert - I will write you back as soon as I have any information on the subject. 

Regards,
Iliana Nikolova
Telerik

 

 

[Iliana Dyankova]

Hi Michelle,

We discussed this case and confirmed this behavior is not correct. I logged the issue and it will be fixed in the next internal builds, before the Q2 release.  

Regards,
Iliana Nikolova
Telerik