Highlight Empty cells in Kendo UI Grid for ASP.NET Core

Question

I am trying to highlight the empty cells in my Kendo UI Grid in any column

I have tried this code but it only works for columns only

function onDataBound(e){
      var rows = e.sender.element.find("tr");

      $(rows).each(function(ev){
        var dataItem = e.sender.dataItem(this); 
        if(dataItem.OrderID > 10250){
          var index = $(".k-grid th[data-field='OrderID']").index();
          $(this).find("td:eq("+index+")").css("background-color", "red");
        }
      });
    }

And here is the grid control code

 <div>
@(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.tableMapping>
()
.Name("Reschedule")
.DataSource(datasource => datasource
.Ajax()
.Sort(sort => sort.Add("DateTime_Out").Descending())
.ServerOperation(true)
.Read(read => read.Action("List2", "Reschedule"))
.PageSize(10)
).Pageable(pager => pager.PageSizes(new int[] { 5, 10, 25, 50, 100 }))
.Sortable()


.Events(events => events
.DataBound("onDataBound"))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
    .AllPages(true))

)
 </div>

Is there anyway to check the whole table (all cells) and highlight those which are empty?

Answer 1

You could iterate through all the cells in the table with just jquery (no Kendo other than taking advantage of the onDataBound event) and change the color to red if it doesn't have any value.

function onDataBound(e){
    $("#Reschedule td").each(function() {
        if ($(this)[0].innerText==="")
           $(this).css("background-color", "red");
    });

}