MVC Grid - How to change the selected row hover background color?

6 posts, 0 answers
  1. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 11 Nov 2019 Link to this post

    I have an MVC grid with inline editing set and the user is able to select an entire row. I've managed to change the hover background color of a non-selected row by changing some CSS. When the user selects a row I'm also able to change the background color of the selected row. However, what I cannot seem to change is the hover color of the selected row. It's a deep blue and I'm unable to change it. 

    This is the CSS code I've created:

    .k-grid .k-state-selected {<br>    background-color: #C4FAEC;<br>    color: #000000;<br>}<br>

     

    .k-grid .k-state-selected:hover {<br>    background-color: #C4FAEC;<br>    color: #000000;<br>}<br>

     

    .k-grid td.k-state-selected:hover, .k-grid tr:hover {<br>    color: #000000;<br>    background-color: #C4FAEC;<br>}<br>

     

  2.
  3. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 13 Nov 2019 Link to this post

    Hi Randy,

    If you would like to apply the hover styles over a selected row, you would have to make a strong CSS rule (also known as CSS specificity). Changing the hover color over a row could be done as follows:

        <style>
      html .k-grid tr.k-state-selected:hover {
        background: coral;
      }

      html .k-grid tr.k-state-selected.k-alt:hover {
        background: coral;
      }
    </style>

    Give this a try and let me know in case you encounter any issues.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Tsvetomir Link to this post

    Tsvetomir - Thank you for the response, but this does not work. I still get the dark blue background color when I hover over a row that has been selected. 
  7. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Randy Link to this post

    I should clarify that I still get the dark blue background color when the row is selected, in edit mode and hovered over. If I stop hovering over the selected, edited row, the background color is the color I desire. Hovering is the issue.
  8.
  9. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 13 Nov 2019 Link to this post

    Hi Randy,

    Thank you for specifying the exact scenario that you are willing to achieve. Can you try applying the following CSS rule and see how it works out for you:

        <style>
      .k-grid .k-state-selected {
        background-color: #C4FAEC;   
        color: #000000;
      }

      .k-grid .k-state-selected:hover { 
        background-color: #C4FAEC;  
        color: #000000;
      }
      
      .k-grid tr:hover,
      .k-grid td.k-state-selected:hover,
      .k-grid tr.k-state-selected:hover td
      {  
        color: #000000;   
        background-color: #C4FAEC;
      }
    </style>

    Looking forward to your reply.

     

    Best regards,
    Tsvetomir
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Tsvetomir Link to this post

    Thank you. This now works!
Back to Top