在内联编辑模式下批量保存Kendo Grid

时间:2014-07-07 07:37:09

标签: asp.net-mvc-3 razor kendo-grid inline-editing batch-updates

我有一个简单的联系人实体的MVC3 Razor视图 - 名字和姓氏,职位等 - 包括用于保存一个或多个电话号码的网格。

在用户单击“保存”以创建新项目后,网格将以内联编辑模式设置,并且有一个新ID用于保存电话号码。这样可以正常工作,但客户希望在第一次点击时保存整个表单,包括对电话号码网格的任何编辑。棘手的是他们希望保留现有的内联UX,这就是我的问题所在:

如何保持与kendo网格内联编辑模式关联的所有UI / UX,但保存为批处理,就像将其设置为单元格内编辑一样?

我已经阅读了各种文章和教程,以便在点击时保存网格更改,但大多数都是针对单元格内编辑而不是特定于Razor。

以下是网格的代码(没有编辑器模板或js函数),如果我能提供更多细节,请告诉我,我会更新我的问题。

@(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"))))

1 个答案:

答案 0 :(得分:0)

答案似乎是使用占位符控制器方法进行创建/更新/删除 - 也就是说,没有做任何事情的方法 - 然后使用下面的代码在任何点击或操作上提交给控制器:

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