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

Editing fields in Popup window

4 Answers 222 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kavitha
Top achievements
Rank 1
Kavitha asked on 23 Jul 2013, 02:03 PM
I have a grid and I am editing most of the fields inline. However I have
a field, the way I envision to modify this field is to open a popup
window when clicked ( this will be a hyperlink field in the grid). Once
the value is modified in the Popup the change will be saved in the
database and the same change should also reflect in the grid. The grid
should be refreshed once the popup is closed. Can you please suggest me
as to how to accomplish this. Also can you provide me samples as to how
to do this.
Thank you
Kavitha

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 24 Jul 2013, 02:53 PM
Hi Kavitha,

Thank you for contacting us.
Mixed editing modes are not supported out of the box by Kendo Grid. It is possible to configure the scenario by using custom button, MVVM and kendo Window with editor inputs inside it.

There is a code library project which demonstrates how to bind grid's record to external form for editing. The changes are automatically applied in the Grid thanks to the MVVM approach. You can submit them to the server via DataSource sync method.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kavitha
Top achievements
Rank 1
answered on 24 Jul 2013, 03:00 PM
Thank you very much for you reply. I looked at the sample in the Code Library project unfortunately the grid does not display any buttons. I only see a grid and a form below the grid. I am kind of at a loss as to how this problem should be solved. Any help is greatly appreciated.

Thank you
Kavitha
0
Kavitha
Top achievements
Rank 1
answered on 24 Jul 2013, 03:40 PM
 I looked at the sample in the Code Library  project unfortunately the grid  does not display any buttons. I only see a grid and a form below the grid. I am kind of at a loss as to how this problem should be solved. Any help is greatly appreciated.
0
Alexander Valchev
Telerik team
answered on 26 Jul 2013, 11:34 AM
Hi Kavitha,

The example is supposed to demonstrate how to bind the selected dataItem to external form for editing via MVVM. In the code library the selection of the item is done via selecting row with the mouse.

In your case, you should simply use a custom command button instead of grid's selection feature.

var grid = $("#grid").kendoGrid({
    dataSource: viewModel.dataSource,
    pageable: true,
    height: 430,
    columns: [
        "ProductName",
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
        { field: "UnitsInStock", title: "Units In Stock", width: 110 },
        { field: "Discontinued", width: 110 },
        { command: { text: "edit me", click: change } }
    ],
    dataBound: function(e) {
        var row = this.tbody.find(">tr[data-uid=" + viewModel.selected.uid + "]");
        if(row) {
            this.select(row);
        }
    }
}).data("kendoGrid");
 
function change(e) {
    var model = this.dataItem($(e.target).closest("tr"));
    validator.hideMessages();
    viewModel.set("selected", model);
}


Regards,
Alexander Valchev
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
Kavitha
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Kavitha
Top achievements
Rank 1
Share this question
or