Создать пользовательское всплывающее окно редактирования для динамической сетки в пользовательском интерфейсе Kendo, используя объект kendo.Observable()?

Question

Может кто-нибудь сказать мне, следующий сценарий может достичь с помощью Kendo UI??

Я делаю динамическую сетку. Потому что мой источник данных является динамическим. Тогда мне нужно пользовательское всплывающее окно редактирования для поля обновления.

В слышу, что я сделал, я делаю новый kendo.Observable() Возьмите объект и заполните поля ввода, а затем попытайтесь связать данные, полученные для шаблона.

Но этот метод не работает. Может кто-нибудь сказать мне, что есть способ достичь этого??

Если вам нужна дополнительная информация, я могу обновить это.. Спасибо.

редактировать

Код обновления: это моя динамическая сетка.

var grid = $("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({ // this will be dynamic data       source}),
editable: {
                mode: "popup",
                template: kendo.template($("#myCustomPopup").html())
            },



columns: leadFields });

Это мой пользовательский шаблон.

<script type="text/x-kendo-template" id="myCustomPopup">
    #console.log(data);#
    <div id="mySecondCustomPopup">
        <table data-template="myCustomFieldsTemplate" data-bind="source: dataField"></table>
    </div>
</script>

<script type="text/x-kendo-template" id="myCustomFieldsTemplate">
 // in here I try to make field using kendo.Observable() object
<script>

Вот мой observable объект

var viewModel = kendo.observable({dataField: leadArray});

kendo.bind($("#mySecondCustomPopup"), viewModel);

Если я объясню это больше, я попытаюсь связать другую модель представления, чтобы обновить всплывающее окно с помощью kendo observable объект. Могу ли я сделать что-то подобное??

Answer 1

Опция editable.template сетки позволяет вам настраивать всплывающий редактор. Вот пример кода:

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input data-bind="value:name" /></label>
  </p>
  <p>
    <label>Age:<input data-role="numerictextbox" data-bind="value:age" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>