如何更改Kendo Grid行颜色

Question

我想设计我的剑道网格,每行都有颜色.如果数据库中有警报,则这些行必须为红色,否则它们必须为绿色.

这是我的代码:

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

Answer 1

我通过在kendo网格函数中添加此函数来解决.

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

Answer 2

您可以使用RowTemplate,并在该RowTemplate中根据您提供的条件评估给定行的css类.然后,css类可以具有适合该行的样式.例如,可以在"td"上放置"no-alarm"或"with-alarm"并设置背景颜色.

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

例

您可以在行模板中评估数据项并干净地输出给定的类.在这个例子中(可以在下面的jsfiddle链接中找到),用户有一个名字和年龄......如果年龄<= 30,他们会得到'underthirty'类(实际上它应该是三十级).

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