Question

我有一个kendo网格，Edit事件使用下面的代码打开一个弹出窗口。

            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编辑。但我想要“添加新”（工具栏：[{name：“create”，text：“Add New Employee”}]）功能来弹出模板。这可能吗？

Answer 1

我也面临同样的问题，但是在RnD工作了2-3天后，来到解决方案，我通过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

快乐的编码!!

Kendo UI - Kendo Grid Edit弹出选项，用于添加和内联编辑

1 个答案: