THis seems too hard.

[Randy Hompesch]

There must be an easier way to set the background color of cells based on a condition. 

I have the following code that colors all cells the same color. I will modify it later to constrain it to those cells that I actually need to color.

Before I do, I want make sure I am doing things correctly. My code works, but seems overly complicated. The other issue is that when the color is set I lose the horizontal border. Is there a  way to color a cell and keep the 4 borders (i.e. the gridlines)?

Any guidance would be greatly appreciated.

 

function gridDataBound(e)
      {
          var grid = this;
          var headerCells = grid.element.find("th");
          var data = $("#grid").data("kendoGrid").dataSource.data();
          var i;
          var j;
          var dataItem;
          rows = e.sender.content.find('tr');
          for (i = 0; i < rows.length; i++)
          {
              dataItem = data[i];
              var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
              for (j = 0; j < rowCells.length; j++)
              {
                  $(rows[i]).children('td:eq(' + j + ')').css("background-color", "yellow");
              }
          }

[Alex Hajigeorgieva]

Hi, Randy,

You can add classes or inline styles to the cells td element by using the columns attributes option:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.attributes

The attributes can be used to evaluate the data and provide dynamic styling as well with the help of the Kendo UI Templates syntax:

Runnable example: https://dojo.telerik.com/@bubblemaster/EyALEZON

columns: [ {
   field: "name",
   title: "Name",
   attributes: {
     "class": "#=priority#" // this is a field from the dataItem
   }
 }

Let un know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Randy Hompesch]

Could you please show me the same thing using the html.helper version?

Also, the example you gave, I believe is column specific, is it not? I need cell specific.

How would I dynamically set not only the color, but column header. Also, as I mentioned before, the colors seem to obliterate the grid lines. Any way to keep them?

Thanks … Ed

 

[Alex Hajigeorgieva]

Hello, Ed,

The approach for ASP.NET Core will work in exactly the same way:

attributes: {
     "class": "#=priority#" // this is a field from the dataItem
   }

// translates to 
columns.Bound(p => p.Priority).HtmlAttributes(new { @class = "#= Priority #" });

Using this approach you can color each cell in a different color depending on the field value for this column and row. Here is another example that also shows none of the borders are affected. Perhaps you can update the provided example with the theme that is used in your project as it does not reproduce in the themes I tested with:

https://dojo.telerik.com/UsEmUwUC

You can add this HtmlAttribute() to all the columns if you are tracking a specific value for any bound column.

Alternatively, you could take advantage of a RowTemplate():

https://demos.telerik.com/aspnet-core/grid/rowtemplate

As for the question of dynamically setting the column header, this is usually done before initialization occurs or alternatively can be done with the setOptions() method. 

If you are inquiring about binding to a dynamic, you can loop the columns and conditionally set their header text with the Title() method with this syntax:

https://github.com/telerik/kendo-ui-core/issues/2140#issuecomment-384630376

Finally, if you provide us with more details about the current grid implementation and the exact requirements which values should be highlighted, where they are expected to occur in the model and other information which is unknown, we would be able to offer you a more specific solution.

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
Progress Telerik