Rows

Updated on Oct 27, 2026

Control the appearance of Grid rows by getting rows by model ID, adding custom rows, using row templates, and disabling the hover effect.

Getting Rows by Model ID

To get a table row in the Grid by the ID of the data item:

1. Make sure the Id field is defined in the model configuration of the data source of the Grid.
2. Retrieve the data item, read its UID, and then select the corresponding table row.

JS

    var grid = $("#grid").data("kendoGrid"); // Get the Grid instance.
    var dataItem = grid.dataSource.get(10249); // The get() method of the dataSource only works when the model id is set.
    var tableRow = $("[data-uid='" + dataItem.uid + "']"); // Get the row by its unique data-uid attribute. This UID is rendered by the Grid automatically.

Adding Custom Rows

You can manually add a table row with a user-friendly message when the DataSource returns no data, for example, after filtering. For more information, see Row Templates in the Grid HtmlHelper for ASP.NET Core.

The following example demonstrates how to add a table row in the DataBound() event handler of the Grid.

Razor

    @(Html.Kendo().Grid<AspNetCoreGrid.Models.OrderViewModel>()
        .Name("grid")
        .Filterable()
        /* Other configuration. */
        .Events(e=>e.DataBound("onGridDataBound"))
    )

Razor

<div style="width:500px">
    <kendo-grid name="grid"
                on-data-bound="onGridDataBound">
        <filterable enabled="true" />

    </kendo-grid>
</div>

JS

    function onGridDataBound(e) {
        if (!e.sender.dataSource.view().length) {
            var colspan = e.sender.thead.find("th:visible").length,
                emptyRow = '<tr><td colspan="' + colspan + '">... no records ...</td></tr>';
            e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
        }
    }

Using Row Templates

Use row templates to customize row markup and content. For implementation details, see Row Templates in the Grid HtmlHelper for ASP.NET Core.

Disabling the Hover Effect

Hover is a UI state that improves row visibility, especially across long rows and while editing. If your project must avoid the hover state, use one of the following approaches:

• Open the Kendo UI theme CSS file (for example, kendo.default.min.css) and remove this CSS rule.

  CSS

  .k-grid tr:hover {
      /* ...background styles here... */
  }

• Override the hover styling by using the CSS from the following example. The #f1f1f1 value corresponds to the background color of the .k-alt table rows. To find the correct value for your Kendo UI theme, use the browser DOM inspector, or set a background color of your preference.

  CSS

  .k-grid tr:not(.k-selected):hover {
      background: none;
      color: inherit;
  }
  
  .k-grid tr.k-alt:not(.k-selected):hover {
      background: #f1f1f1;
  }

See Also

• ASP.NET Core DataGrid Homepage

• Using Row Templates in the Grid HtmlHelper for ASP.NET Core (Demo)

• Row Templates in the Grid HtmlHelper for ASP.NET Core

• Server-Side API