Changing Hover Color of Grid Rows

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.2.718 version

Description

How can I customize the hover color of the Telerik UI for ASP.NET Core Grid rows when using standard and frozen (locked) columns?

• Using default Grid columns
• Using frozen Grid columns

Solution

Using Default Grid Columns

To adjust the default hover color of the Grird rows, which comes from the used Kendo UI theme, apply the following CSS styles:

• If the Grid rows are not selectable (the Selected() option is not enabled):

      <style>
          /* Replace "Grid" with the Name() of the Grid */
          #Grid .k-table-tbody > .k-table-row:hover,
          #Grid .k-table-tbody > .k-table-row.k-hover {
              background-color: #a5e8e5;
          }
      </style>
  

• If the Grid rows are selectable (the Selected() option is enabled):

      <style>
          /* Replace "Grid" with the Name() of the Grid */
          #Grid .k-grid-content .k-selected.k-alt td:hover,
          #Grid .k-grid-content .k-selected td:hover {
              background-color: #a5e8e5;
          }
  
          /* Replace "Grid" with the Name() of the Grid */
          #Grid .k-table-tbody > .k-table-row:hover,
          #Grid .k-table-tbody > .k-table-row.k-hover {
              background-color: #a5e8e5;
          }
      </style>
  

Refer to the following REPL sample for a live demo of this example.

Using Frozen Grid Columns

When the Grid is configured with frozen (locked) columns, the Grid creates separate tables for its locked and scrollable sections. The locked columns are generated inside the .k-grid-content-locked element, and the scrollable content is inside the .k-grid-content element.

By design, when the user hovers over a specified row in the locked Grid table, the row is highlighted only within the locked table. In order to highlight the entire hovered row (within the locked and scrollable tables), use the following approach:

1. Handle the DataBound event of the Grid and subscribe to the hover event of both locked and scrollable tables.

       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("Grid")
           .Events(ev => ev.DataBound("onDataBound"))
           ...
       )
   
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-grid name="Grid" on-data-bound="onDataBound">
           ...
       </kendo-grid>
   
   

       function onDataBound(e) {
           // Replace "Grid" with the Name() of the Grid.
           $("#Grid .k-grid-content-locked table tbody tr").hover(function() { // Hovering the rows within the locked table.
               ...
           });
   
           // Replace "Grid" with the Name() of the Grid.
           $('#Grid .k-grid-content table tbody tr').hover(function() { // Hovering the rows within the scrollable table.
               ...
           });
       }
   

2. In the hover event handler of the Grid tables, toggle a cusom class to the hovered row from the respective table. Set the desired hover color to the custom class with CSS.

       function onDataBound(e) {
           $("#Grid .k-grid-content-locked table tbody tr").hover(function() {
                   var uid = $(this).attr("data-uid");
                   var gridRow = $(".k-grid .k-grid-content").find("[data-uid='" + uid + "']");
                   $(gridRow).toggleClass("custom-hover");
                   $(this).toggleClass("custom-hover");
           });
           $('#Grid .k-grid-content table tbody tr').hover(function() {
                   var uid = $(this).attr("data-uid");
                   var lockedrow = $(".k-grid .k-grid-content-locked").find("[data-uid='" + uid + "']");
                   $(lockedrow).toggleClass("custom-hover");
                   $(this).toggleClass("custom-hover");
           });
       }
   

       <style>
           .custom-hover{
               background-color: #a5e8e5 !important;
               opacity: 0.6;
           }
       </style>
   

If the Grid rows are selectable (the Selected() option is enabled), apply the following CSS styles:

```
    <style>
        /* selected row color in both locked and scrollable tables */
        /* Replace "Grid" with the Name() of the Grid */
        #Grid .k-grid-content-locked .k-selected.k-alt td,
        #Grid .k-grid-content .k-selected.k-alt td,
        #Grid .k-grid-content-locked .k-selected td,
        #Grid .k-grid-content .k-selected td {
            background-color: #a5e8e5;
        }

        /* selected row hover color in both locked and scrollable tables */
        #Grid .k-grid-content-locked .k-selected.k-alt td:hover,
        #Grid .k-grid-content .k-selected.k-alt td:hover,
        #Grid .k-grid-content-locked .k-selected td:hover,
        #Grid .k-grid-content .k-selected td:hover {
            background-color: #a5e8e5;
        }
    </style>
```

For the complete implementation of the suggested approach, refer to the Telerik REPL example on highlighting the entire hovered row when using frozen (locked) Grid columns.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base