Как изменить цвета строк сетки Kendo

Я хочу создать свою сетку кендо с цветами в каждой строке. Если в базе данных есть тревога, эти строки должны быть красными, иначе они должны быть зелеными.

вот мой код:

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

мое мнение:

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" }]
    });
});
9
client-side jquery kendo-grid kendo-ui

3 ответов

вы можете использовать RowTemplate, и в этом RowTemplate оцените класс css для данной строки на основе любого условия, которое вы предоставляете. Затем класс css может иметь стили, соответствующие этой строке. Например, " no-alarm "или" with-alarm "можно поместить на" td " и установить цвет фона.

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

пример

вы можете оценить свой элемент данных в шаблон строки и чистый вывод данного класса. В этом примере (доступно по ссылке jsfiddle ниже) пользователь имеет имя и возраст...если возраст 

<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/

6

Я решил, добавив эту функцию в функцию сетки кендо.

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

вы также можете использовать базу данных 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>
3