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" }]
});
});
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");
}
}
}
});