Shuinvy Shuinvy - 2 months ago 41
jQuery Question

Kendo change font-color in grid

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>

Answer

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