Editable inline & popup

[Richard]

I really like the automatic grid celll/row editing provided by 
editable: 'inline' | 'popup'

Is there a way to have the 'add new record' action use popup, and the 'edit existing row' action use inline ?

Thanks,
Richard

[Alexander Valchev]

Hi Richard,

Generally speaking this functionality is not supported out of the box. It is possible to implement 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();
    });
});

In the attachments you will find a sample project that shows this approach in action. I hope this helps.

Kind regards,
Alexander Valchev
the Telerik team

[Andrew]

I'm trying to implement this, and I'm getting this error when I click on the add button: 
Uncaught TypeError: Cannot call method 'replace' of null 
Any thoughts on what I could be doing wrong?
Thanks.


Update: Sorry, I forgot to add the template

Thank you very much for this post.

[Jahn]

I would llike to add popup contact form and thank you page for my informative website on iguana developed using HTML.

Here is my website in which i want to add popup contact form.
 http://www.easyiguanacare.info/taking_care_of_a_pet_iguana.html .

kindly help me to do this.