Kendo Grid - Сделать ячейку редактируемой / не редактируемой для каждой строки динамически - PullRequest
Новая
       21

Kendo Grid - Сделать ячейку редактируемой / не редактируемой для каждой строки динамически

1 голос
/ 18 марта 2019

У меня есть сетка кендо, где номер COR ABA может быть или не быть редактируемым, в зависимости от значения в первом столбце. Таким образом, если NOC Code == 'C01', тогда COR ABA No. является редактируемым, в противном случае это не так.

enter image description here

Я достиг этого, добавив событие Edit к столбцам и в этом обработчике редактирования отключив ввод HTML, который создает Kendo, когда редактирование не разрешено. (В определении сетки у меня есть Editable (true), чтобы начать). Вместо этого я хочу сделать это, выполнив проверку логики в событии DataBound для сетки. То есть после того, как все данные связаны, переберите данные, определите, когда столбец НЕ должен быть редактируемым, и предотвратите это каким-либо образом. Моя идея состоит в том, чтобы просто удалить обработчик щелчков, который я предполагаю, что Kendo добавляет для ячейки при использовании Editable (true), как указано выше. Это путь? Или как? Спасибо!

1 Ответ

2 голосов
/ 19 марта 2019

Я предлагаю другой способ, вместо этого вызывайте closeCell () для события edit, если вы не хотите разрешать пользователю редактировать ячейку.При этом ячейка не будет отображать ввод, когда пользователь щелкает его, чтобы отредактировать. 

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