This is a migrated thread and some comments may be shown as answers.

Set Cell Background Colour

9 Answers 3434 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 08 Apr 2015, 09:15 AM

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

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Apr 2015, 05:22 AM
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

See What's Next in App Development. Register for TelerikNEXT.

0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 09 Apr 2015, 08:34 AM

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.

 

0
Dimo
Telerik team
answered on 09 Apr 2015, 10:12 AM
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

See What's Next in App Development. Register for TelerikNEXT.

0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 09 Apr 2015, 10:34 AM
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?
0
Dimo
Telerik team
answered on 09 Apr 2015, 11:12 AM
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

See What's Next in App Development. Register for TelerikNEXT.

0
Vijay
Top achievements
Rank 1
answered on 28 Jul 2016, 06:13 PM

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

0
Dimo
Telerik team
answered on 29 Jul 2016, 05:56 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Franz
Top achievements
Rank 1
answered on 20 Nov 2019, 08:24 PM

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

0
Martin
Telerik team
answered on 22 Nov 2019, 03:43 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dimo
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Vijay
Top achievements
Rank 1
Franz
Top achievements
Rank 1
Martin
Telerik team
Share this question
or