如何在网格弹出窗口中编辑不属于网格列的字段?

时间:2018-06-20 13:29:58

标签: kendo-ui telerik kendo-grid

我需要准备具有有限列数的网格,并且只有在编辑网格行(在弹出窗口中)时,它才应包含要编辑的其他字段。

如何在网格弹出窗口中编辑不属于网格列的字段?

1 个答案:

答案 0 :(得分:2)

您必须为弹出窗口设置模板,选中this

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
  <p>
    <label>Active: <input type="checkbox" # if (data.active) { #checked="checked"# } #>
  </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, active: false },
    { id: 2, name: "John Doe", age: 33, active: true }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>

Demo