How to change Kendo Grid row colours

StackOverflow https://stackoverflow.com/questions/21528151

Question

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" }]
    });
});
Was it helpful?

Solution 2

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/

OTHER TIPS

I solved by adding this function in the kendo grid function.

columns: [
                    { field: "username", width: "80px" },
                    { field: "location", width: "80px" },
                    { field: "devices", width: "80px" },
                      { field: "alarm", width: "80px" }],
dataBound: function () {
                dataView = this.dataSource.view();
                for (var i = 0; i < dataView.length; i++) {
                    if (dataView[i].alarmID!=null) {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("alarm");  //alarm's in my style and we call uid for each row
                    }
                    else if (dataView[i].message!=null) {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("reason");
                    }
                }
            }
        });

You can also use the dataBound of kendoGrid

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
  .red {
    background-color: red
  }
    .green {
    background-color: green
  }
</style>
</head>
<body>
<div id="grid"></div>
<script>
var grid = $("#grid").kendoGrid({
  columns: [ 
    {
        field: "name",
        title: "Name",
        },
         {
    field: "title",
    title: "Title"
    }
   ],
  dataSource: [ { name: "Jane Doe", title: "Dr. Dr." }, { name: "John Doe", title: "Senior Citizen" }],
  dataBound: function(e) {
                var items = this._data;
                var tableRows = $(this.table).find("tr");
                tableRows.each(function(index) {
                    var row = $(this);
                    var Item = items[index];
                    if (Item.name !== "Jane Doe") {
                        row.addClass("green");
                    }else{
                        row.addClass("red");
                    }
                });
    }
}).data("kendoGrid");
</script>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top