kendo-ui - Kendo UI Grid 弹出编辑

Question

我正在使用最新的 KendoUI 版本。如何在剑道 UI 网格中自定义弹出窗口？（可编辑：表格选项中的“弹出”）。谢谢。

Answer 1

可编辑：{ 模式：“弹出”，模板：kendo.template($("#popup_editor").html()) }

Answer 2

要在 Kendo UI Grid 中自定义弹出窗口，您可以使用editableGrid 的属性：

editable: {
    mode: "popup",
    template: kendo.template($("#custom_editor").html())
}

----------------
    <script type="text/x-kendo-template" id="custom_editor">
        <div class="k-edit-label required">UserName : </div>
        <input type="text" name="UserName" class="k-textbox">
        .....
    </script>

如果您想在 Grid 中使用不同的弹出编辑器进行创建和更新数据操作，您应该为它们定义一个模板：

editable: {
    mode:"popup",
    template: $("#template").html()
},

然后像这样定义模板：

    <script type="text/x-kendo-template" id="template">
        #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
        #} else {#
        #var editTemp = kendo.template($("\#editTemplate").html());#
        #=editTemp(data)#
        #}#
    </script>

    <script type="text/x-kendo-template" id="createTemplate">
        <div class="k-edit-label required">UserName : </div>
        <input type="text" name="UserName" class="k-textbox">
        .....
    </script>

    <script type="text/x-kendo-template" id="editTemplate">
        <div class="k-edit-label">UserName : </div>
        <input type="text" name="UserName" class="k-textbox" readonly="readonly">
        .....
    </script>