How to remove hover background color on a grid row?

7 posts, 0 answers
  1. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 25 Feb 2016 Link to this post

    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

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 26 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2016 in reply to Magdalena Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 01 Mar 2016 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Michelle
    Michelle avatar
    46 posts
    Member since:
    Feb 2015

    Posted 01 Mar 2016 Link to this post

    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

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top