如何为 Kendo MVC Grid 编辑本地数据答案

【问题标题】：How to edit local data for Kendo MVC Grid如何为 Kendo MVC Grid 编辑本地数据
【发布时间】：2016-07-21 21:47:42
【问题描述】：

根据 Telerik 网站上有关本地数据绑定的文档：

服务器 - 小部件在进行分页、排序和过滤时执行服务器端请求 (HTTP GET)。

Ajax - 小部件将在进行分页、排序、过滤、分组或保存数据时发出 Ajax 请求。

这是否意味着目前无法使用 Kendo 的 MVC Grid 在本地编辑数据？

我的目标是能够编辑网格，然后将整个页面与模型的其他部分一起提交回服务器，并将数据全部保存在一起，而不是进行 ajax 调用以将数据保存在网格中。

使用下面的代码我可以加载网格，但编辑单元格不会持续存在，当我返回页面时，数据未绑定模型。

        @(Html.Kendo().Grid<LaborTimeViewModel>(Model.LaborTimes)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Procedure).ClientTemplate("#=Procedure ? Procedure.ProcedureDescription : ''#").EditorTemplateName("ProcedureEditor");
            columns.Bound(p => p.PerformedBy).ClientTemplate("#=PerformedBy ? PerformedBy.UserDescription : ''#").EditorTemplateName("UserEditor");
         columns.Bound(p => p.LaborTime).ClientTemplate("#if (LaborTime) {# #:kendo.toString(LaborTime.Hours, '00')#:#:kendo.toString(LaborTime.Minutes, '00')#:#:kendo.toString( '00')# #}#").EditorTemplateName("TimePickerEditor"); //.EditorTemplateName("NumericEditor");

        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false) 
            .Model(model =>
                {
                    model.Id(p => p.WONumber);
                    model.Id(p => p.PerformedBy);
                    model.Id(p => p.TimerStart);
                })
        )
    )

【问题讨论】：

标签： kendo-grid kendo-asp.net-mvc

【解决方案1】：

我找到了一种解决网格的方法，试图将数据保存到服务器。
首先，为网格生成器上绑定的数据添加和事件。

.Events(events => events.DataBound("onGridDataBound"))

然后，为 onGridDataBound 添加这个 javascript 函数

function onGridDataBound(e){
  //Prevent the grid from talking to the server
  var transport = e.sender.dataSource.transport;
  transport.create = function(e){e.success();}
  transport.destroy = function(e){e.success();}
  transport.update = function(e){e.success();}
}

通过覆盖数据源上的传输函数，网格将不会尝试进行 Ajax 调用，数据会保存到网格的本地模型中。

确保在网格脚本运行之前声明函数，方法是使用“DeferredScripts”或在页面中的网格之前声明 JS 函数。

【讨论】：