Change Grid Row color based on a row value
1 Answer 16 Views
serge
Top achievements
Rank 2
Bronze
Iron
Iron
serge asked on 30 Apr 2021, 02:08 PM

I have the following Grid configuratrion


                    @(Html.Kendo()
        .Grid<CoucheSondageDTO>()
        .Name("CoucheSondages")
        .Columns(columns =>
        {
            columns.Bound(c => c.CoucheDescription).Width(190).ClientTemplate("<div style='background: #=CoucheCouleur#'>#=CoucheDescription#</div>"); ;
            columns.Bound(c => c.ToitTN).Width(120);
            columns.Bound(c => c.BaseTN).Width(120);
            columns.Bound(c => c.Description).Width(120);
            columns.Command(command => { command.Destroy(); }).Width(150);
        })

it gives me this:

 

Is there a way to color the ful row , or the whole cell content?

1 Answer, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 05 May 2021, 06:19 AM

Hello, Serge.

There are three ways you can achieve your scenario:

  1. To apply class on the entire row, you need to use the client side dataBind event of the grid to get the reference to the data items. Once you have reference to the item, you can add custom class name to the TR element.

    Тhis is common enough question as seen in a similar thread -- https://www.telerik.com/forums/conditionally-set-class-on-rows. The example from that thread still holds water to this day: http://dojo.telerik.com/aVeXi.
  2. You can add a class name or style attribute to the cell, or any other attribute much like you do with setting width or client template, by using HtmlAttributes -- https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnBuilderBase#htmlattributessystemobject
  3. You can even set the entire row template, though this should be reserved for very special cases in which you need complete and precise control of what gets rendered to the browser. The grid supports both client and server templates.

Each of the above has both pros and cons and it really depends on your exact scenario which is the best way. As a rule of thumb, options 1 or 2 should suffice for most cases, with 1) involving a bit of client side scripting and 2) handling everything on the server.

Regards,
Ivan Zhekov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

as you can see the color is really bound to a property of a (business) class, so are dynamic and can't be known in advance to build a css rule, the dojo defines them in css
- by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
on 05 May 2021, 07:55 AM | edited
Hi Sergem, you could add the row color dynamically based on a property of the data item as shown in the following updated Dojo http://dojo.telerik.com/oQAKOxat
- by
Tsvetomir
Telerik team
on 10 May 2021, 06:58 AM
Tags
Grid
Asked by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Ivan Zhekov
Telerik team
Share this question
or