Menu
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>
446
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;
}
Sorry, I found my own answer. That is, I need to use template( I am not familiar with it). And just use template as:
<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", template: '#=SetColor(state)#' }],
pageable: {
refresh: true,
pageSizes: true
},
height: 430,
resizable: true
});
});
function SetColor(state)
{
if(state=="Online")
return "<font color=\"red\">"+state+"</font>";
else
return state;
}
</script>
</div>
Use template to what field you want to change, and return text be decorated, and I promise that people want to make different from score or data like less than 60 can use the method, too!
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With