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

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