Change the CSS of an Empty Cell
Environment
| Product Version | 2019.3.917 |
| Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I change the style of a cell such as the background color in my Kendo UI Grid if the grid cell is null or empty?
Solution
Add a class to the specific column using the columns.attributes property. Then, during the DataBound event, reference all DOM row elements in the Kendo UI Grid using the items method, and check the text of the td element.
<style>
.noValue {
background-color: red;
}
</style>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataBound: function(e){
//get all DOM row elements
var allRows = e.sender.items();
//for each row, find the td with the class
allRows.each(function (index, row) {
var nameCell = $(this).find("td.name");
//check the value of the cell
if (!nameCell.text()) {
//add specific style class
nameCell.addClass("noValue")
}
});
},
columns: [
{
field: "name",
attributes:{
"class" : "name"
}
},
{
field: "age",
attributes:{
"class" : "age"
}
},
{
field: "custom",
attributes:{
"class" : "custom"
}
}
],
dataSource: [
{ name: "Jane Doe", age: 30, custom: 'abc' },
{ name: "John Doe", age: 33, custom: 'def' },
{ age: 36, custom: 'ghi' } //no name value
]
});
</script>