Rows

The Grid enables you to handle the appearance of its rows by using the id of the data item, adding custom rows, utilizing 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 row model, the model UID, and the Grid table row consecutively.

    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 does not return any data, for example, as a result of filtering. For more information, refer to the article on row templates.

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

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

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

    </kendo-grid>
</div>

    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

For more information, refer to the article on row templates.

Disabling the Hover Effect

Hover is a UI state which provides better visualization across long table rows and when the Grid is in its edit mode. However, if your project requires you to avoid the hover state, use either of the following approaches:

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

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

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

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

See Also

• 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