1

有人可以告诉我，以下场景可以使用 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对象更新弹出窗口。我可以做这样的事情吗？

4

1 回答 1

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>
于 2015-09-15T07:01:35.090 回答