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

[Emo]

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

[Vladimir Iliev]

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

 

 

[Emo]

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.

[Vladimir Iliev]

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:

• columns.command.click

Regards,
Vladimir Iliev
Telerik

 

 

[Emo]

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

[Vladimir Iliev]

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