How to change Kendo Grid row colours

client-side, jquery, kendo-grid, kendo-ui

Solution

You could use a RowTemplate, and in that RowTemplate evaluate a css class for the given row based on whatever condition you provide. The css class could then have the stylings appropriate for that row. For example, "no-alarm", or "with-alarm" could be placed on 'td' and set a background color.

http://demos.telerik.com/kendo-ui/web/grid/rowtemplate.html

Example

You can evaluate your data item in the row template and cleanly output the given class. In this example (available in the jsfiddle link below) a user has a name and age...if the age is <= 30, they get the 'underthirty' class (really it should be thirtyorunder class).

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td class='#= age <= 30 ? "underthirty" : "overthirty"#'>
            <strong>#= name #</strong>
        </td>
        <td>
            #= age #
        </td>
    </tr>
</script>

http://jsfiddle.net/blackjacketmack/t7fF2/1/

Problem

I want to design my Kendo Grid with colours in each row. If there is an alarm in the database these rows must be red, otherwise they must be green. Here is my code: ``` public JsonResult Getdata() { var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList(); var collection = reports.Select(x => new { username = x.uName, location = x.locName, devices = x.devName, alarm = x.alarm }); return Json(collection, JsonRequestBehavior.AllowGet); } ``` My view: ``` function handleDataFromServer() { $("#grid").data("kendoGrid").dataSource.read(); } window.setInterval("handleDataFromServer()", 10000); $(document).ready(function () { $("#grid").kendoGrid({ sortable: true, pageable: { input: true, numeric: false }, selectable: "multiple", dataSource: { transport: { read: "/Home/Getdata", type: "json" } }, columns: [ { field: "username", width: "80px" }, { field: "location", width: "80px" }, { field: "devices", width: "80px" }, { field: "alarm", width: "80px" }] }); }); ```

Original source