使用kendo.Observable（）对象在Kendo UI中为动态网格创建自定义编辑弹出窗口？

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>