New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Apply Custom Styles to Grid Rows Based on Model Data

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I apply custom styles to the Grid rows based on the Model data?

Solution

You can achieve this requirement using the following key steps:

Handle the onDataBound event of the Grid:
Razor
```
.Events(e => e.DataBound("onDataBound"))
```

Within the DataBound event handler, loop through the data items of the DataSource and add a custom class to the respective row element based on the value of the EmployeeId field:

function onDataBound(e) {
    var grid = $("#grid").data("kendoGrid");
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
        // Get the item's "uid".
        var currentUid = gridData[i].uid;
        // If the record fits the custom condition
        if (gridData[i].EmployeeId % 2 == 0) {
            // Find the row based on the "uid" and add the custom class.
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("customClass");
        }
    }
}

Apply the desired styles to the custom class:

CSS

    .customClass {
        background-color: #d88 !important;
    }

To review the complete example, refer to the ASP.NET MVC project on applying custom styles to the Grid rows based on Model data.

Apply Custom Styles to Grid Rows Based on Model Data

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also