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

Change the CSS of an Empty Cell


Product Version 2019.3.917
Product Progress® Kendo UI® Grid for jQuery


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?


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.

      .noValue {
        background-color: red;

    <div id="grid"></div>
        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("");

            //check the value of the cell
            if (!nameCell.text()) {  

              //add specific style class
        columns: [
            field: "name", 
              "class" : "name" 
            field: "age", 
              "class" : "age"
            field: "custom", 
              "class" : "custom"
        dataSource: [
          { name: "Jane Doe", age: 30, custom: 'abc' },
          { name: "John Doe", age: 33, custom: 'def' },
          { age: 36, custom: 'ghi' }  //no name value

See Also

In this article