Set Cell Background Colour

8 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 08 Apr 2015 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2015 Link to this post

    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.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 09 Apr 2015 in reply to Dimo Link to this post

    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.

     

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2015 Link to this post

    Hello Andrew,

    Surely you don't need to define external CSS styles. The demonstrated approach can be used with inline background color styles instead of CSS classes, and this is explicitly mentioned on the linked documentation page.

    Regards,
    Dimo
    Telerik

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

  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 09 Apr 2015 in reply to Dimo Link to this post

    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?
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2015 Link to this post

    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.

  8. Vijay
    Vijay avatar
    1 posts
    Member since:
    Jul 2016

    Posted 28 Jul in reply to Dimo Link to this post

    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

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Jul Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready