New to Kendo UI for jQueryStart a free 30-day trial

Conditionally Change Cell Styles in the Grid HtmlHelper

Environment

ProductProgress® Telerik® UI Grid for ASP.NET CoreProgress® 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

  1. From the column ClientTemplate, call the JavaScript templateFunction function. As a result, the DataItem becomes available.
  2. Pass the DataItem as an argument to the function.
  3. Use custom logic, based on the specific condition, to return different templates.

The following example demonstrates how to apply the column definition.

C#
columns.Bound(c => c.ContactName).ClientTemplate("#=templateFunction(data)#");
JavaScript
function templateFunction(item) {

    if (item.ContactName == "Maria Anders") {
        return "<span class='customClass'>"+ item.ContactName + "</span>";
    }

    return item.ContactName;
}
CSS
.customClass {
    color: red;
}
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support