This is a migrated thread and some comments may be shown as answers.
MVC Grid - How to change the selected row hover background color?
5 Answers 60 Views
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 11 Nov 2019, 08:46 PM

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>

 

5 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 13 Nov 2019, 10:33 AM

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.
0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 11:40 AM
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. 
0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 11:44 AM
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.
0
Tsvetomir
Telerik team
answered on 13 Nov 2019, 03:29 PM

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.
0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 05:03 PM
Thank you. This now works!
Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Randy
Top achievements
Rank 1
Share this question
or