Capturing Row Hover Event оf Grid Row and Getting Data Item

Updated on Dec 10, 2025

Environment

Product	Grid for ASP.NET ASP.NET Core
Version	2024.2.514

Description

How to capture the hover event of a row in the Grid and access the corresponding data item object?

Solution

To achieve row hover functionality and retrieve column object values, follow these steps:

1. Subscribe to the DataBound event of the Grid.
2. Within the event handler, bind the jQuery mouseenter event to the table rows.
3. Use the dataItem() client-side method of the Grid to get the data item associated with the hovered row.

Razor

    <kendo-grid name="grid" on-data-bound="onDataBound">
      <!-- Additional configuration. -->
    </kendo-grid>

Razor

    .Events(e => e.DataBound("onDataBound"))

JavaScript

    
    // Define the DataBound event handler:
    function onDataBound() {
        var grid = this; // Reference to the Grid instance.
    
        // Bind "mouseenter" event to table rows.
        $(".k-master-row").on("mouseenter", function() {
            var currentRow = this; // Access the hovered row element.
            var dataItem = grid.dataItem(currentRow); // Get the data item of the row.
    
            // Log the data item object in the browser console or perform the desired action.
            console.log(dataItem);
        });
    }

REPL Example

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the Grid HtmlHelper
• Sample code with the Grid TagHelper

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid 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
• Server-Side TagHelper API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Knowledge Base