This is a migrated thread and some comments may be shown as answers.

Editable inline & popup

3 Answers 392 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 21 May 2012, 02:10 PM
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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 24 May 2012, 10:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 09 Jul 2012, 03:15 PM
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.
0
Jahn
Top achievements
Rank 1
answered on 09 Jul 2012, 05:33 PM
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.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Andrew
Top achievements
Rank 1
Jahn
Top achievements
Rank 1
Share this question
or