Edit this page

Conditionally Change Cell Styles in Grid HtmlHelpers

Environment

Product UI for ASP.NET Core/ UI 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.

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;
}
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy