剑道UI -剑道网格编辑弹出选项添加和内联编辑

Question

我有一个剑道网格和编辑事件打开一个弹出使用下面的代码片段。

            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模板)网格。子网格的编辑设置为"inline"。我的问题是....

我想要subrid的编辑做内编辑。但我想"添加新的"(工具栏:[{name: "create"，文本:"Add new Employee"}])功能弹出一个模板。这可能吗?

Answer 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论坛

编码快乐! !