Changeing Grid color as per condition

4 posts, 0 answers
  1. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 22 Oct 2011 Link to this post

    I want to change grid font color of the grid based on the jsp data from database. How I will put condition on the changing grid color dynamically from jsp page.
    For example,
    I have 2 types of records and as per condition i want to change the color of one record in blue and other one in red.
    Please help me.
  2. Dimo
    Dimo avatar
    8403 posts

    Posted 24 Oct 2011 Link to this post

    Hello Sourav,

    One option is to use row template, as in this example:

    You can add some Javascript code inside the template to check your condition, as shown in the Kendo template demo:

    For example this will set a bold font weight style to the "The Stars of Star Wars" movie row (the first row in the rowtemplate demo). You can also use a custom CSS class.

    <script id="rowTemplate" type="text/x-kendo-tmpl">
    # if (AverageRating == "2.9") { #
        <tr style="color:red;">
    # } else { #
    # } #
                <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
                    ${ Name }
                ${ AverageRating }

    Another option is to use the Grid's OnDataBound client event, but this will require you to iterate through all rows manually, check what type they are, and add a custom CSS class or style.

    (use this.tbody to access the Grid data rows more easily)

    Best wishes,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. rusdi
    rusdi avatar
    1 posts
    Member since:
    Aug 2012

    Posted 17 May 2012 Link to this post

    Hi Dimo,

    Is there any example for change style for specific row/table cell based on the data ? which using grid event OnDataBound ?

  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 09 Aug 2012 Link to this post

    If the data changes, will the Template with the Javascript template just fire on the changed cells (In my case I want the row to have different class styling based on the values of the columns) so I want a column attribute change to change the row color for example.

    But it should not have to fire for all the rows, just for the changed one.

Back to Top