Set Cell Background Colour

[AP]

I have a grid, which needs to show conditionally formatted data, including colours.  All the custom formatting (percentages etc..)  is done by the model, with the grid simply displaying text fields. The colours are also passed to the grid as additional string fields.

 It's simple to format the fore colours, using a client template, but using the background style, the cell still retains an outline of the row background, which isn't what I want. What I have at the moment is:-

 

col.Bound(o => o.Apr).Title("Apr").ClientTemplate("<div style='background:#=Apr_BackCol#; color:#=Apr_Col#'>#=Apr#</div>");

 

How can I set the cell background? Ideally this would be via the client template, as I've got 17 columns which will need formatting like this, so calling a JavaScript function for each column seems unwieldy, especially since all the logic has been performed in the model.

 

Thanks

[Dimo]

Hello Andrew,

Please check the following documentation page and let me know if you have additional questions:

http://docs.telerik.com/kendo-ui/web/grid/how-to/style-rows-cells-based-on-data-item-values

Regards,
Dimo
Telerik

[AP]

Dimo,

 

Thanks for the reply, I now have something that works. However I was hoping to be able to avoid using this method, as it seems a bit 'hacky', and iterating over every cell in the grid doesn't seem like the highest performing solution.

 

Also, as the colours have already been calculated in the model server-side (as the application also produces other outputs, including Excel spread sheets), having to define styles to match these colours means that if the server logic is changed, so must the page mark-up.

 The client template works so well to set the text colour, it would be great to be able to set the cell background using this, or another property in the MVC definition.

 

[Dimo]

Hello Andrew,

I see. In this case, indeed you don't need to define external CSS styles. The demonstrated approach can be used with inline background color styles instead of CSS classes as well.

Regards,
Dimo
Telerik

[AP]

OK, using the ccs method instead of the addClass method does resolve that issue. Still feels like a less than ideal solution. Is there no way to do this using the MVC definition, rather than on the client in JavaScript?

[Dimo]

Hi Andrew,

Depending on the exact scenario, you can use a row template, as explained in the documentaiton. In this case, no additional Javascript will be required.

These are all the possible options.

===

Update: Actually, there is one more option - use CellAction(), but this is applicable only with server-side data-binding.

http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBuilder#methods-CellAction(System.Action<Kendo.Mvc.UI.GridCell<T>>)

Regards,
Dimo
Telerik

[Vijay]

Hi Dimo,

I understand this post is old, but on looking at CellAction() method, it looks like the documentation mentions something as shown in the following code.

In line 3 "if (cell.Column.Name == "UnitsInStock")" the column property does not have Name property in it. Did it change in the latest version (2016.2.714)?

Thanks,
Vijay

01..CellAction(cell =>
02.   {
03.       if (cell.Column.Name == "UnitsInStock")
04.       {
05.          if (cell.DataItem.UnitsInStock > 10)
06.          {
07.              //Set the background of this cell only
08.              cell.HtmlAttributes["style"] = "background:red;";
09.          }
10.       }
11.   })

Thanks,
Vijay

[Dimo]

Hello Vijay,

This looks like a documentation error. The correct code should read cell.Column.Member

Thanks for noting this, we will update it.

Regards,
Dimo
Telerik by Progress

[Franz]

Does the CellAction still exist in the GridBuilder class?

I am using Kendo for asp core, and cannot find such a Method.

 

I am using nuget Telerik.UI.for.AspNet.Core in version 2019.3.1023

[Martin]

Hello Franz,

Yes, it does exist, however it is part of the UI for ASP.NET MVC suite. Its alternative in UI for Core is to set HtmlAttributes for each column to pass the desired attributes.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik