This is a migrated thread and some comments may be shown as answers.

Changeing Grid color as per condition

3 Answers 459 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sourav
Top achievements
Rank 1
Sourav asked on 22 Oct 2011, 11:24 AM
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.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Oct 2011, 09:07 AM
Hello Sourav,

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

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

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

http://demos.kendoui.com/templates/expressions.html

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 { #
    <tr>
# } #
        <td>
            <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
        </td>
        <td>
                ${ Name }
        </td>
        <td>
            ${ AverageRating }
        </td>
    </tr>
</script>


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.

http://demos.kendoui.com/grid/events.html

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

Best wishes,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
rusdi
Top achievements
Rank 1
answered on 17 May 2012, 05:21 AM
Hi Dimo,

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

Thanks
0
Dr.YSG
Top achievements
Rank 2
answered on 09 Aug 2012, 09:44 PM
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.

Tags
Grid
Asked by
Sourav
Top achievements
Rank 1
Answers by
Dimo
Telerik team
rusdi
Top achievements
Rank 1
Dr.YSG
Top achievements
Rank 2
Share this question
or