1. ホーム
  2. kendo-ui

[解決済み] Kendo Grid - 各行のセルを動的に編集可能にする/不可能にする

2022-02-15 05:34:30

質問

剣道のグリッドで、COR ABA No.が最初のカラムの値によって編集可能かどうかが決まります。つまり、NOC Code=='C01'の場合、COR ABA No.は編集可能であり、そうでない場合は編集不可能です。

カラムにEditイベントを追加し、その編集ハンドラで、編集が許可されていないときに剣道が作成するHTML入力を無効にすることでこれを実現しました。(グリッド定義では、Editable(true)で始めています)。私は代わりに、グリッドのDataBoundイベントでロジックチェックを行うことによってこれを行いたいのです。つまり、すべてのデータがバインドされた後、データを繰り返し、カラムが編集可能であってはならないときを決定し、これを何らかの方法で防止します。私のアイデアは、上記のようにEditable(true)を使用する際にKendoがセルに対して追加するクリックハンドラを単純に削除することです。この方法でよいのでしょうか?またはどのように?ありがとうございます。

解決方法は?

もし、ユーザーがセルを編集できないようにしたい場合は、編集イベントでcloseCell()を呼び出す代わりに、別の方法を提案します。そうすれば、ユーザーがセルを編集するためにクリックしても、セルに入力が表示されなくなります。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          "id": { type: "number" }
        }
      }
    }
  },
  editable: "incell",
  toolbar:["create"],
  edit: function(e) {
    if (!e.model.isNew() && e.container.index() == 0) {
      var grid = $("#grid").data("kendoGrid");
      grid.closeCell();
    }
  }
});
</script>