Batch save Kendo Grid in Inline edit mode

Question

I have a MVC3 Razor View for a simple Contact entity - first and last name, job title etc - including a grid being used to save one or more phone numbers.

The grid appears setup in inline edit mode after the user clicks save to create a new item, and there is a new Id to save phone numbers against. This works okay but the client would prefer that the whole form is saved on that first click, including any edits to the phone number grid. The tricky bit is they want to keep the existing inline UX, which is where my question lies:

How can you keep all the UI/UX associated with the kendo grid inline editing mode, but save as a batch, as you would if it were set to in-cell editing?

I have read various articles and tutorials to do with saving grid changes on click, but most are specific to in-cell editing and are not specific to Razor.

Here is the code for the grid as it stands (no editor template or js functions), please let me know if I can provide any further detail and I will update my question.

@(Html.Kendo().Grid<ContactNumberListItem>()
          .Name("PhoneNumbersGrid")
          .Columns(columns =>
              {
                  columns.Bound(model => model.Number).Title("Number").Format("{0:#,#}");
                  columns.Bound(model => model.Type).EditorTemplateName("_tmpl_contactPhoneNumberType_dd").Title("Type").ClientTemplate("#:Type.Name#");

                  columns.Command(commands =>
                      {
                          commands.Edit().Text(" ")
                                  .UpdateText(" ")
                                  .CancelText(" "); // The "edit" command will edit and update data items
                          commands.Custom("Delete").Text(" ").Click("DeleteContactPhoneNumber"); // The "destroy" command removes data items
                      }).Width(98);
              })
          .ToolBar(toolBar => toolBar.Create())
          .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
          .Selectable()
          .Events(events => events
                                .DataBound("OnGridDataBound")
                                .Cancel("OnGridCancel")
                                .Edit("OnGridEdit")
                                .Save("OnGridSave"))
          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Batch(false)
                                        .PageSize(5)
                                        .ServerOperation(false)
                                        .Model(model =>
                                            {
                                                model.Id(x => x.Id);
                                                model.Field(t => t.Type).DefaultValue(((List<PhoneNumberTypeListItem>)ViewBag.ContactPhoneNumberTypes).FirstOrDefault());                                                    
                                            })
                                        .Create(update => update.Action("CreateContactPhoneNumber", "ContactPhoneNumber").Data("GetContactId"))
                                        .Update(update => update.Action("UpdateContactPhoneNumber", "ContactPhoneNumber"))
                                        .Read(read => read.Action("SelectContactPhoneNumbers", "ContactPhoneNumber").Data("GetContactId"))
                                        .Events(e => e.Error("error_handler"))))

GP24 GP24 · Accepted Answer · 2014-07-07T08:55:22

The answer seems to be to use placeholder controller methods for create/update/delete - that is, methods that do not do anything - then follow use the code below to submit to the controller on whatever click or action:

http://www.telerik.com/support/code-library/save-all-changes-with-one-request

Batch save Kendo Grid in Inline edit mode

1 Answers