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

Updated on Dec 10, 2025

Environment

Product	Grid for ASP.NET ASP.NET MVC
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

    .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

You can test this example using the following REPL sample: Row Hover Event Example.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC

• Server-Side API Reference of the Grid for ASP.NET MVC

• Telerik UI for ASP.NET MVC Knowledge Base