Kendo change font-color in grid

jquery, jquery-ui, kendo-grid, kendo-ui

Solution

Get rid of the `if` statement and use a column template instead. You can wrap the value in a span and conditionally set its class to display red text based on your criteria.

Here's an example:

$("#grid").kendoGrid({
    // ...
    columns: [
        { field: "userAcc", title: "Account" },
        {
            field: "state",
            title: "State",
            template: "<span class='#if(state === \'Online\') {# red #}#'></span>"
        }
    ]
    // ...
});

..and your CSS class...

.red {
    color: red;
}

Problem

Is it possible to change font-color of `Kendo` grid by some condition? I hope I get data that can be recognized by jquery like: ``` if($("div td:contains('Online')")) { $("div :contains('Online')").css( "font-color", "Red" ); } ``` I have data get in database to show who is online/offline, but the two words are a little bit similar, so I hope I can change the text 'Online' to red. I can show data successfully, but I don't have any other tag(id or name, etc.) to make different from each data.... Is the only way I have to do is let each row have id or tags? Can I just use `.contains` to find the object and change the color? My html just simply: ``` <body> <div id="grid"></div> <script> $(function() { $("#grid").kendoGrid({ dataSource: { transport: { read: "data/userState.php" }, error: function(e) { alert(e.responseText); }, schema: { data: "results", total: "Count" }, pageSize: 10 }, columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State" }], pageable: { refresh: true, pageSizes: true }, height: 430, resizable: true }); if($("#grid td:contains('Online')")) { $("#grid td:contains('Online')").css( "font-color", "Red" ); } }); </script> </div> </body> ```

Original source