Changeing Grid color as per condition

[Sourav]

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.

[Dimo]

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

[rusdi]

Hi Dimo,

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

Thanks

[Dr.YSG]

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.