Grid Popup - prevent close on Update and add a new row

[neet-o]

I have an MVC Grid with Popup edit mode for adding records. Once popup is opened and Update is pressed - I want to save the record and prevent popup window from being automatically closed. After that in popup window when I select some different values and press Update again - I want a new row to be added.

I was able to prevent Popup from being auto-closed and on Update press current record is saved and a new one is created but it isn't reflected in the underlying table. On first picture Update button is pressed (update_clicked.jpg). On second picture I've changed the file name to "test2" and pressed Update again thus creating a new record with "File" set to "test2". The problem is that this isn't reflected in the underlying table - there's only one row there. After I refreshed the page (last picture) - it shows both rows and this is how it should be.

I think I need to refresh the dataSource to update the underlying table markup but if I call $("#gridBreakDowns").data("kendoGrid").dataSource.read() - Popup window is closed and table is refreshed but I want is to prevent the Popup being closed with the table refreshed instead.

This is done to add records more quickly while preserving the values in other fields since they're repeated most of the time.

 

This is what I've got:

 

@(Html.Kendo().Grid(Model.ManualJobItems)
 .Name("gridBreakDowns")
 .ToolBar(toolbar => toolbar.Create().Text("Create"))
 .Columns(columns =>
 {
 columns.Bound(p => p.ItemID).Hidden(true);
 columns.Bound(p => p.ParentID).Hidden(true);
 columns.Bound(p => p.Country).Title("Country");
 columns.Bound(p => p.FileName).Title("File");
 columns.Bound(p => p.Format).Title("Format");
 columns.Bound(p => p.Quantity).Title("Quantity");
 columns.Bound(p => p.Service).Title("Service");
 columns.Bound(p => p.Method).Title("Service Level");
 columns.Bound(p => p.ItemWeight).Title("Item Weight");
 columns.Bound(p => p.TotalWeight).Title("Total Weight");
 columns.Bound(p => p.DespatchStatusString).Title("Status");
 columns.Command(c => { c.Destroy(); }).Width(100);
 })
 .Events(events => events.Edit("onGridEdit").Save("onGridSave"))
 .Editable(editable => editable
 .Mode(GridEditMode.PopUp)
 .TemplateName("CreateManualJobItem")
 .AdditionalViewData(new { Model.ClientCode }))
 .DataSource(dataSource => dataSource
 .Ajax()
 .Events(events => events.Error("onerror_handler"))
 .Create(create => create.Action("UpdateItem", "ManualJob"))
 .Read(read => read.Action("ReadItem", "ManualJob", new { jid = Model.JobID }))
 .Update(update => update.Action("UpdateItem", "ManualJob"))
 .Destroy(destroy => destroy.Action("DestroyItem", "ManualJob"))
 .Model(model =>
 {
 model.Id(p => p.ItemID);
 model.Field(p => p.ParentID).DefaultValue(Model.JobID);
 model.Field(p => p.FileName).DefaultValue("");
 model.Field(p => p.ServiceID).DefaultValue(Guid.Empty);
 model.Field(p => p.CountryCode).DefaultValue("");
 model.Field(p => p.Country).DefaultValue("");
 model.Field(p => p.Format).DefaultValue("please select...");
 model.Field(p => p.Method).DefaultValue("");
 model.Field(p => p.Quantity).DefaultValue(0);
 model.Field(p => p.ItemWeight);
 model.Field(p => p.TotalWeight);
 })
))

 

<script type="text/javascript">
var _PreventWindowClose = false;

function onGridEdit() {
var window = this.editable.element.data("kendoWindow");
window.bind("close", onWindowEditMemberClose);
}

function onGridSave() {
_PreventWindowClose = true;
}

var onWindowEditMemberClose = function(e) {
if (_PreventWindowClose) {

//$("#gridBreakDowns").data("kendoGrid").dataSource.read();
e.preventDefault();
}
_PreventWindowClose = false;
};
</script>

[Boyan Dimitrov]

Hello,

The default popup edit form is designed to update a single item at a time and then to be closed. Preventing the popup from closing might conflict with the internal logic of updating data items. 

My suggestion is to use a custom command as shown in the Grid / Custom command demo instead of the default edit button. Instead of just displaying information about the data item two-way binding can be implemented in order to custom widow to be used as edit form. Eventually any changes made to the form will reflect to the grid. Please refer to the Kendo MVVM Overview article for a reference. 

Finally you can bind to the click event of the custom update button in the custom window and use the Kendo UI Grid and Kendo UI DataSource API to implement the desired functionality. 

 

 

Regards,
Boyan Dimitrov
Telerik by Progress