New to Kendo UI for jQuery? Download free 30-day trial

Change the CSS of an Empty Cell

Environment

Product Version 2019.3.917
Product Grid for Progress® Kendo UI®

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>

See Also

In this article
Not finding the help you need? Improve this article