Menu
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" }]
});
});
928
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>
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/
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
