web-dev-qa-db-ja.com

剣道グリッドの行の色を変更する方法

各行に色を付けて剣道グリッドをデザインしたいと思います。データベースにアラームがある場合、これらの行は赤である必要があります。それ以外の場合は、緑である必要があります。

これが私のコードです：

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" }]
    });
});
jquerykendo-uikendo-gridclient-side
10
AhmetMelihBaşbuğ

RowTemplateを使用できます。その中で、RowTemplateは、指定された条件に基づいて、指定された行のcssクラスを評価します。 cssクラスは、その行に適したスタイルを持つことができます。たとえば、「no-alarm」または「with-alarm」を「td」に配置して、背景色を設定できます。

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

例

行テンプレートでデータ項目を評価し、指定されたクラスをきれいに出力できます。この例（以下のjsfiddleリンクで入手可能）では、ユーザーは名前と年齢を持っています...年齢が30未満の場合、「30歳未満」クラスを取得します（実際には30歳未満のクラスである必要があります）。

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

この関数を剣道グリッド関数に追加して解決しました。

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
AhmetMelihBaşbuğ

KendoGridのdataBoundを使用することもできます

<!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>
4
Domenico Zinzi