Как написать собственный виджет выбора для сетки пользовательского интерфейса кендо?

Question

Я хочу добавить пользовательский редактор к определенному полю в сетке кендо. В целевой ячейке должен отображаться значок (аналог выпадающего списка), и при щелчке мне нужно всплывающее окно / форма под триггером, содержащее элементы формы и сетку. Является ли это возможным?

Answer 1

Да, это возможно. Вы можете использовать опцию шаблона столбца, чтобы создать иконку. Вот полная демонстрация:

  <div id="grid"></div>

  <div id="popup">
    <select data-bind="value: brand">
      <option>Mercedes</option>
      <option>BMW</option>
    </select>
    <button class="k-button" id="done">Done</button>
  </div>

  <script>
    $("#grid").kendoGrid({
      dataSource: {
        data: [
          { brand: "BMW" }
        ]
      },
      columns: [
        { field: "brand" },
        { 
          template: '<button class="k-button" onclick="edit(\'#= uid #\')">Change brand</button>'
        }
      ]
    });

    $("#popup").kendoWindow({
      visible: false
    }).on("click", "#done", function() {
      var popup = $("#popup").data("kendoWindow");
      popup.close();
    });

    function edit(uid) {
      var grid = $("#grid").data("kendoGrid");
      var dataItem = grid.dataSource.getByUid(uid);

      kendo.bind("#popup", dataItem);

      var popup = $("#popup").data("kendoWindow");
      popup.center().open();
      var popup = $("#popup").data("kendoWindow");
      popup.center().open();
    }

  </script>