Conditionally Changing the Row Color

8 posts, 0 answers
  1. Ryan
    Ryan avatar
    4 posts
    Member since:
    Jun 2013

    Posted 29 Oct 2013 Link to this post

    I have a grid that contains several columns.  In the code below I have removed a few just to make it easier to read.  The standard display of this grid has the rows alternating between a light blue and white row color.  I need to be able to change the color of a row based on a specific value in that row.  For example, if the "ReportClassDescription" column is equal to "Express" then the background color for that entire row should be red. 
    If it is easier I could also just changed the color of that particular cell.  So again, if "ReportClassDescription" is "Express" then that cell could just be red. 
    How can I accomplish either of these scenarios?

    01.@(Html.Kendo().Grid(Model)
    02.      .Name("ResultList")
    03.      .HtmlAttributes(new { style = "font-size:.8em; height:auto;" })
    04.      .Columns(columns =>
    05.        {
    06.                     
    07.          columns.Bound(p => p.ReportID).Width("100px")
    08.            .Filterable(filter => filter.Operators(o => o
    09.              .ForString(str => str
    10.                .Clear()
    11.                .Contains("Contains")
    12.                .DoesNotContain("Does Not Contain")
    13.                .StartsWith("Starts With")
    14.                .EndsWith("Ends With")
    15.                .IsEqualTo("Equal To")
    16.                .IsNotEqualTo("Not Equal To")
    17.          )));
    18. 
    19.          columns.Bound(p => p.ClientReportName).Width("100px")
    20.            .Filterable(filter => filter.Operators(o => o
    21.              .ForString(str => str
    22.                .Clear()
    23.                .Contains("Contains")
    24.                .DoesNotContain("Does Not Contain")
    25.                .StartsWith("Starts With")
    26.                .EndsWith("Ends With")
    27.                .IsEqualTo("Equal To")
    28.                .IsNotEqualTo("Not Equal To")
    29.          )));
    30. 
    31.          columns.Bound(p => p.ReportClassDescription).Width("100px")
    32.            .Filterable(filter => filter.Operators(o => o
    33.              .ForString(str => str
    34.                .Clear()
    35.                .Contains("Contains")
    36.                .DoesNotContain("Does Not Contain")
    37.                .StartsWith("Starts With")
    38.                .EndsWith("Ends With")
    39.                .IsEqualTo("Equal To")
    40.                .IsNotEqualTo("Not Equal To")
    41.          )));
    42. 
    43.          columns.Bound(p => p.ReportTypeDescription).Width("100px")
    44.            .Filterable(filter => filter.Operators(o => o
    45.              .ForString(str => str
    46.                .Clear()
    47.                .Contains("Contains")
    48.                .DoesNotContain("Does Not Contain")
    49.                .StartsWith("Starts With")
    50.                .EndsWith("Ends With")
    51.                .IsEqualTo("Equal To")
    52.                .IsNotEqualTo("Not Equal To")
    53.          )));                     
    54.        })
    55.      .Pageable(page => page.Refresh(true).Input(true))
    56.      .Scrollable()
    57.      .Groupable()
    58.      .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
    59.      .Filterable()
    60.      .DataSource(dataSource => dataSource
    61.        .Ajax()
    62.        .Read(read => read.Action("QueueSearch_Read", "Queue"))
    63.        .PageSize(100)
    64.        .ServerOperation(true)
    65.        )
    66.      .Resizable(resize => resize.Columns(true))
    67.      .Reorderable(reorder => reorder.Columns(true))
    68.      )
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 29 Oct 2013 Link to this post

    You can accomplish this using the rowTemplate property for the grid.

    Here is a small example
    http://jsfiddle.net/FcWBQ/


    Hope this helps.
  3. Kendo UI is VS 2017 Ready
  4. Ryan
    Ryan avatar
    4 posts
    Member since:
    Jun 2013

    Posted 29 Oct 2013 Link to this post

    That example is what I'm looking for I just don't see where/how I would apply that to my code...
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Oct 2013 Link to this post

    Hi Ryan,

    You need a ClientRowTemplate() for the Grid. There is an example in the offline Kendo UI MVC demo site. Its code can also be seen at:

    http://demos.kendoui.com/web/grid/rowtemplate.html

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Marcel Härry
    Marcel Härry avatar
    28 posts
    Member since:
    Jul 2009

    Posted 04 Feb 2014 in reply to Ryan Link to this post

    Wow, that's cool, thank you.
  7. Jean-Philippe
    Jean-Philippe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 09 Dec 2015 Link to this post

    If you don't want to write the whole line tr and td you can just on databound event :

     

    var rows = e.sender.tbody.children();
      
    for (var j = 0; j < rows.length; j++) {
        var row = $(rows[j]);
        var dataItem = e.sender.dataItem(row);
      
        if (dataItem.get("PropertyName") != 0) {
            row.addClass("someCssColorClass");
        }
    }

     

  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Dec 2015 Link to this post

    Hello all,

    We now have a how-to article that demonstrates the discussed scenario. It uses a similar approach to the one Jean-Philippe has shown:

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

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Swati
    Swati avatar
    9 posts
    Member since:
    Aug 2010

    Posted 14 Feb in reply to Jean-Philippe Link to this post

    Thanks for the simple and cool post... helped. :)
Back to Top
Kendo UI is VS 2017 Ready