Conditionally Change Cell Styles in the Grid HtmlHelper
Environment
Product | Progress® Telerik® UI Grid for ASP.NET Core | Progress® Telerik® UI Grid for ASP.NET MVC |
Description
How can I change the appearance of the Grid cells based on a value in the row in ASP.NET Core projects?
Solution
- From the column
ClientTemplate
, call the JavaScripttemplateFunction
function. As a result, theDataItem
becomes available. - Pass the
DataItem
as an argument to the function. - Use custom logic, based on the specific condition, to return different templates.
The following example demonstrates how to apply the column definition.
columns.Bound(c => c.ContactName).ClientTemplate("#=templateFunction(data)#");
function templateFunction(item) {
if (item.ContactName == "Maria Anders") {
return "<span class='customClass'>"+ item.ContactName + "</span>";
}
return item.ContactName;
}
.customClass {
color: red;
}