Kendo UI - Kendo Grid Edit Popup option for add and inline for edit

Question

I have a kendo grid and the Edit event opens a popup using the below piece of code.

            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."
        }

The popup again has (popup_editor template) grid in it. The subgrid's edit is set to 'inline'. So my question here is ....

I want the subrid's Edit do the inine edit. But I want the 'Add new' (toolbar: [{ name: "create", text: "Add New Employee" }]) functionality to popup a template. Is this possible?

Sunny_Sid · Answer 1 · 2016-07-21T10:46:57.627

I was also facing same problem, but after did RnD for 2-3 days, come to solution, which I implemented it through the dataSource API and custom toolbar command.

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();
    });
});

Hope this will help you.

Ref: Telerik forums

happy coding!!

Kendo UI - Kendo Grid Edit Popup option for add and inline for edit

1 Answers1