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

Can I edit a grid record, using a page loaded into a pop up ?

5 Answers 70 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Emo
Top achievements
Rank 1
Emo asked on 01 Apr 2014, 06:48 PM
I want to know if I can use a page instead of using a template for editting a register in a Kendo Web Grid. This page should be shown in a popup when user clicks the edit button of a grid row.

Thanks

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Apr 2014, 11:36 AM
Hi Emo,

Basically it's possible to achieve that behavior using KendoUI Window to load another page inside it and edit  given record, however this behavior would require custom solution. Please consider the following example which uses MVVM to bind current dataItem to the page inside the window:

function copyAllFormsFrom(e) {
    e.preventDefault();
 
    //on press of custom edit button in the grid row get the dataItem
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    //get KendoUI window client object
    var wnd = $("#windowCopyAllFormsFrom").data("kendoWindow");
 
    //load the remote page either using custom ajax request or
    //usign the refresh method and pass page url to it.
    //refresh method API: http://docs.telerik.com/kendo-ui/api/web/window#methods-refresh
    wnd.content($("#copyAllFormsFromTemplate").html());
 
    //find all inputs and add data-bind attribute in order to be bind correctly
    //to the dataItems
    wnd.element.find("input").each(function () {
        if (this.getAttribute("name")) {
            this.setAttribute("data-bind", "value: " + this.getAttribute("name"));
        }
    });
 
    //bind the template to the dataItem
    kendo.bind(wnd.element, dataItem);
    wnd.center().open();
}

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emo
Top achievements
Rank 1
answered on 09 Apr 2014, 02:23 PM
Hi Vladimir. Thanks for your answer. I am a little bit confused about where to put your code. Where should I call copyAllFormsFrom function from? In "editing-popup" example, I just see an editable: "popup" property set, so I don´t know how to call this function you send me as example.

Thanks for your help.
0
Vladimir Iliev
Telerik team
answered on 10 Apr 2014, 11:28 AM
Hi Emo,

Please note that the code snipped from my previous reply is not 'paste-and-go' solution, instead it just demonstrates how to load remote page inside KendoUI window and bind given model to it.
In your case you can execute the function for example on clicking of custom edit button inside the grid:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emo
Top achievements
Rank 1
answered on 11 Apr 2014, 04:19 PM
Hi Vladimir. Thanks for your clarification. I managed to work a part of your example. However, I can´t get input elements. I copy an example of my code, I would appreciate your guide in what am I doing wrong.

CLICK FUNCTION:
----------------------------------------------------------
$scope.clickEdit = function (e) {
 
 
    e.preventDefault();
 
    //on press of custom edit button in the grid row get the dataItem
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    //get KendoUI window client object
    var dialog = $("#windowCopyAllFormsFrom").data("kendoWindow");
    //load the remote page either using custom ajax request or
    //usign the refresh method and pass page url to it.
    //refresh method API: http://docs.telerik.com/kendo-ui/api/web/window#methods-refresh
    dialog.refresh("EditCliente.htm");
     
    //find all inputs and add data-bind attribute in order to be bind correctly
    //to the dataItems
    var index;
    var inputs = dialog.element[0].getElementsByTagName("input");
    var otroinputs= dialog.element.find("input");
    console.log(inputs);
    console.log(otroinputs);
    for (index = 0; index < inputs.length; ++index) {
        if (inputs[index].getAttribute("name")) {
            alert(inputs[index].getAttribute("name"));
            inputs[index].setAttribute("data-bind", "value: " + inputs[index].getAttribute("name"));
        }
    };
 
    //bind the template to the dataItem
    kendo.bind(dialog.element[0], dataItem);
    dialog.center().open();
}
----------------------------------------------------------

I cant iterate through input elements.


Thank you.


Emo

0
Vladimir Iliev
Telerik team
answered on 15 Apr 2014, 11:07 AM
Hi Emo,

As your last question about iterating over the input elements inside the KendoUI window is out of the original topic of this support conversation, may I kindly ask you to open a new support thread for the window widget?  In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Emo
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Emo
Top achievements
Rank 1
Share this question
or