# Rows

Control the appearance of Grid rows by [getting rows by model ID](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/rows#getting-rows-by-model-id), [adding custom rows](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/rows#adding-custom-rows), [using row templates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/rows#using-row-templates), and [disabling the hover effect](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/rows#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](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/datasourcemodeldescriptorfactory) of the data source of the Grid.
2. Retrieve the data item, read its UID, and then select the corresponding table row.

```JS script
    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 MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/templates/row-templates).

The following example demonstrates how to add a table row in the [`DataBound()`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemstring) event handler of the Grid.

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

```JS script
    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 MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/templates/row-templates).

## 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

* [Using Row Templates in the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/rowtemplate)
* [Row Templates in the Grid HtmlHelper for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/templates/row-templates)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)