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?
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:
-
Handle the
DataBound
event of the Grid and subscribe to thehover
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. ... }); }
-
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.