Kendo UI - Kendo Grid Edit Popup 选项用于添加和内联以进行编辑答案

【问题标题】：Kendo UI - Kendo Grid Edit Popup option for add and inline for editKendo UI - Kendo Grid Edit Popup 选项用于添加和内联以进行编辑
【发布时间】：2015-09-23 15:30:56
【问题描述】：

我有一个剑道网格，编辑事件使用以下代码打开一个弹出窗口。

            editable: { mode: "popup",
            template: kendo.template($("#popup_editor").html()),
            update: true,
            destroy: true,
            confirmation: "Are you sure you want to remove this employee? Click OK to delete record."
        }

弹出窗口中再次包含（popup_editor 模板）网格。子网格的编辑设置为“内联”。所以我的问题是......

我希望 subrid 的 Edit 进行 inine 编辑。但我希望“添加新”（工具栏：[{ 名称：“创建”，文本：“添加新员工”}]）功能弹出一个模板。这可能吗？

【问题讨论】：

标签： kendo-grid kendo-ui-grid

【解决方案1】：

我也遇到了同样的问题，但是做了 2-3 天的 RnD 之后，得出了解决方案，我通过 dataSource API 和自定义工具栏命令实现了它。

toolbar: [{ text:"Add new record", className: "grid-add-new-record" }], // specify a custom toolbar button

$("#grid .grid-add-new-record").on("click", function(e) {
    var dataSource = $("#grid").data("kendoGrid").dataSource;

    var window = $("<div id='popupEditor'>")
        .appendTo($("body"))
        .kendoWindow({
            title: "Add new record",
            modal: true,
            content: {
                //sets window template
                template: kendo.template($("#createTemplate").html())
            }
        })
        .data("kendoWindow")
        .center();

    //determines at what position to insert the record (needed for pageable grids)
    var index = dataSource.indexOf((dataSource.view() || [])[0]);

    if (index < 0) {
        index = 0;
    }
    //insets a new model in the dataSource
    var model = dataSource.insert(index, {});
    //binds the editing window to the form
    kendo.bind(window.element, model);
    //initialize the validator
    var validator = $(window.element).kendoValidator().data("kendoValidator")

    $("#btnUpdate").on("click", function(e) {
        if (validator.validate()) {
            dataSource.sync(); //sync changes
            window.close();
            window.element.remove();
        }
    });

    $("#btnCancel").on("click", function(e) {
        dataSource.cancelChanges(model); //cancel changes
        window.close();
        window.element.remove();
    });
});

希望这会对你有所帮助。

参考：Telerik forums

编码愉快！！

【讨论】：