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

Updated over 6 months ago

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