To change the row color in a Kendo UI Grid based on a column value using Tag Helpers, you can utilize the k-grid-row
tag helper and apply conditional styling based on the column value. Here's an example:
<kendo-grid>
<k-grid-columns>
<k-grid-column title="Product" field="ProductName"></k-grid-column>
<k-grid-column title="Price" field="Price"></k-grid-column>
</k-grid-columns>
<k-grid-row style="background-color: @(item.Price > 100 ? "red" : "green')" asp-for="Products"></k-grid-row>
</kendo-grid>
In the example above, the k-grid-row
tag helper is used to define the grid row. The style
attribute is used to set the background color of the row dynamically based on the Price
column value. If the Price
is greater than 100, the background color will be set to red; otherwise, it will be set to green.
Make sure to replace ProductName
, Price
, and Products
with the appropriate field and model names from your actual grid and model.
Remember to include the necessary Kendo UI scripts and stylesheets in your page for the Kendo UI Grid to work correctly.
Note: Tag Helpers are part of ASP.NET Core, so you need to ensure you are using the appropriate version of ASP.NET Core that supports Tag Helpers.
Comments
Post a Comment