web-dev-qa-db-ja.com

剣道グリッドで、関数を使って列属性を動的に設定できますか？

データ項目の値に基づいてセルの背景色を設定しようとしているコードがここにあります： http://dojo.telerik.com/@solidus-flux/eHaM ==

<!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>
</head>
<body>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: function(e) {
      return {
        "class": "table-cell",
        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
      };
    }
    //attributes: {
      //"class": "table-cell",
      //style: "text-align: right; font-size: 14px"
    //}
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>

テンプレートを使用してこれを実行できることはわかっていますが、td自体のマークアップを変更できないため、追加のhtml要素が必要になります。サポートされている場合は、関数を使用して属性を返したいのですが。

javascriptkendo-uikendo-gridkendo-template
7
Chris

テンプレートを使いたくないとおっしゃっていましたが、列テンプレートについて話していたと思います。

行テンプレートを使用して、td自体のマークアップを変更できます。

<script id="template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
      # this.columns.forEach(function(col) { 
          var val = data[col.field],
          css,
          style = ''
          cClasses = ''; 
          if (typeof col.attributes === 'function') {
              css = col.attributes(data); 
              cClasses = css["class"];
              style = css.style
          } 
      #         
          <td class='#= cClasses #' style='#= style #'>
            #= data[col.field] #
          </td>
      # }) #
    </tr>
</script>

ただし、ループを機能させるには、テンプレートをグリッドにバインドする必要があります。

var grid = $("#grid").kendoGrid({
    columns: [{
        field: "name",
        title: "Name",
        attributes: function (e) {
            return {
                "class": "table-cell",
                style: e.name == "Jane Doe" ? 
                       "background-color: red" : "background-color: green"
            };
        }
    }, {
        field: "title",
        title: "Title"
    }],
    dataSource: [{name: "Jane Doe", title: "Dr. Dr."}, 
                 {name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");

var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
    rowTemplate: template
});

（ デモ ）

別の方法として、次のような属性を作成することもできます。

{
    field: "name",
    title: "Name",
    attributes: { 
        "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" 
    }
},

これには、行テンプレートを使用しないという利点がありますが、ロジックにはテンプレート構文を使用する必要があります。

（ デモ ）

14
Lars Höppner

以下のコードスニペットを試してください。

<!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>
        .greenBG {
            background-color:green;
        }
        .redBG {
            background-color:red;
        }
    </style>
</head>
<body>

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [{
                field: "name",
                title: "Name",
                attributes: function (e) {
                    return {
                        "class": "table-cell",
                        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
                    };
                }
            }],
            dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
            dataBound: function () {
                dataView = this.dataSource.view();
                for (var i = 0; i < dataView.length; i++) {
                    if (dataView[i].name === "Jane Doe") {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
                    }
                    else {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
                    }
                }
            }
        });
    </script>
</body>
</html>
0
Jayesh Goyani

数年後ですが...属性関数がまったく機能していません、ヒットすらなく、きれいに見えますが機能していません（関数が提供されている場合、手動でクラスを切り替える必要があるのはなぜですか？仕事？何か変なようです）。

他のフィールド値に基づいて編集可能なセルを作成しますが、スタイルを変更する必要もありました

1）cssクラスを挿入するフィールドに検証を追加します。

//Your other fields configuration
field:"dependentField",
attributes:
{
    "class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ",
}
//Your other fields configuration

2）グリッド変更イベントをバインドし、重要なフィールドに変更があるかどうかを確認します。他のセルのスタイルを制御するフィールドが更新メソッドを呼び出すだけの場合

var _kendoGrid = $('#myGrid').data("kendoGrid");

_kendoGrid.dataSource.bind("change", function (e) {
    if (e.action === "itemchange") {
        if (e.field === "ImportantField") {
            _kendoGrid.refresh();
        }
    }
});

Refreshメソッドはグリッドを再度レンダリングします。つまり、関数weatherがテンプレートであるか、属性関数（これも、私にはまったく機能しません）が実行され、正しいスタイル、またはこの場合はクラスが適用されます。

0
Eduardo Chávez

Kendo-JQueryの場合。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [{
    field: "name",
    headerAttributes: {
      "class": "table-header-cell",
      style: "text-align: right; font-size: 14px"
    }
  }]
});
</script>

そしてこの剣道-MVC

.Columns(columns =>
                {
                    columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" });
})
0
MohammadSoori

In angular kendo callback e not work

これを使って

attributes: {
                    "ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' :  \'Are you sure active ?\'}}",
                    "confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
                }
0
Nishchit Dhanani