# Apply Custom Styles to Grid Rows Based on Model Data

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Telerik UI for ASP.NET MVC Grid</td>
 </tr>
 <tr>
  <td>Product version</td>
  <td>2025.1.227</td>
 </tr>
</table>

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

1. Handle the [`onDataBound`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemfunc) event of the Grid:

   ```Razor HtmlHelper
   .Events(e => e.DataBound("onDataBound"))
   ```

2. 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:

   ```JS
   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");
           }
       }
   }
   ```

3. 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](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridRowsBackgroundConditional).

## More ASP.NET MVC Grid Resources

* [ASP.NET MVC Grid Documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview)

* [ASP.NET MVC Grid Demos](https://demos.telerik.com/aspnet-mvc/grid/index)

* [ASP.NET MVC Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)

* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Client-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/kendo-ui/api/ui/grid)

* [Server-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/api/grid)

* [Telerik UI for ASP.NET MVC Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)