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

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;
}