Save changes in Kendo Grid without closing the popup window, but update the model

Question

In the editor template of the Kendo Grid, I'd like to save changes when certain event has been triggered. I'd like to keep the window open, so user can continue to update other fields. I save the changed by the following codes in the editor template:

function innerGridEditEvent(e) {
    var model = e.model;
    if (!model.isNew)
        return;
    var Id = parseInt($("#Id").val(), 10);
    if (!Id) {
        var masterGrid = $("#masterGrid").data('kendoGrid');
        masterGrid.saveChanges();
    }
}

And I keep the popup window open by using this function on SaveChanges event of the main Grid.

function masterSaveChanges(e) {
        var grid = e.sender;
        grid.bind("dataBinding", function (e) {
            e.preventDefault();
        })
}

It works fine, but I need to have the newly created Id. In other words I want an updated model.

If it matters or you want to suggest any workarounds, inside the editor template, I have another grid and I'd like to set the read and create data of that Grid.

@(Html.Kendo().Grid< >()
.Name("InnerGrid")
.Columns(columns =>
{
    ....
})
.ToolBar(toolbar =>
{
    toolbar.Create();
})
.DataSource(ds => ds
    .Ajax()
    ....
    .Read(r => r.Action(" ", " ").Data("getId"))
    .Create(c => c.Action(" ", " ").Data("getId"))
)
.Events(e => e.Edit("innerGridEditEvent"))
)

I'm keeping the required Id as a hidden field, and the getId event returns it.

function getHeadId(e) {
    var id = $("#Id").val();
    return { Id: id };
}

....
@Html.HiddenFor(x => x.Id)

I think I'm missing something here. Why do you want to update the model just to update an id. Ain't the id a field already? — The_Black_Smurf
ID is a field, but it's 0, until I insert the record and get the new ID. I don't want to update the models, I want to insert them. If Id is already set, I don't need any other thing to do. — Akbari
As a part of this question: how can I get the sender grid from the popup window? I want to improve the innerGridEditEvent function. It's currently using hard-coded value. — Akbari

Akbari Akbari · Accepted Answer · 2015-07-15T03:21:22

Ok, I worked around this with having a global variable and setting its value on dataBinding. So the SaveChanges handler of the master grid is:

function masterGridSaveChanges(e) {
    var grid = e.sender;
    grid.bind("dataBinding", function (e) {
        e.preventDefault();
        setId(e.items[0].LiIdH);
    })
}

The inserted items is always the first one in items, at least I hope so! They say it has to have e.index too, but mine was always undefined.

In this case instead of a global var, I have created a setter inside the editor template.

function setHeadId(value) {
    $("#Id").val(value);
}

And the rest of the app remains untouched.

Save changes in Kendo Grid without closing the popup window, but update the model

1 Answers