Change Grid Row color based on a row value

1 Answer 3336 Views
Grid
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.

serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 05 May 2021, 07:55 AM | edited

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
Tsvetomir
Telerik team
commented on 10 May 2021, 06:58 AM

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
Tags
Grid
Asked by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Ivan Zhekov
Telerik team
Share this question
or