编辑Kendo UI网格后,如何刷新网格？

Question

我使用editable: "popup" Telerik的演示页面上显示的方式编辑网格.编辑网格后,我希望网格刷新.在编辑网格后,网格是否有任何调用的事件？

我试图使用数据绑定事件.在这种情况下,我将数据源读取,但它告诉我刷新网格是一个无限循环.我试图使用saveChanges事件,但它无法正常工作.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(100);
    columns.Bound(p => p.UnitsInStock).Width(100);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
  .Events(events => events.Change("saveChanges "))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ProductID))
    .Create(update => update.Action("EditingPopup_Create", "Grid"))
    .Read(read => read.Action("EditingPopup_Read", "Grid"))
    .Update(update => update.Action("EditingPopup_Update", "Grid"))
    .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
))

Answer 1

您可以订阅网格数据源的Sync事件,并调用其数据源的read方法.

.Events(events => events.Error("error_handler").Sync("sync_handler"))

function sync_handler(e) {
   this.read();
}

Answer 2

将事件添加到DataSource

.DataSource(dataSource => dataSource.Ajax(

        .Events(e => e.RequestEnd("PowerPlantProduction.onRequestEnd"))**
)

使用Javascript:

onRequestEnd: function (e) {

        if (e.type == "update") {
            if (!e.response.Errors) {
               e.sender.read();
            }
        }
    },

Answer 3

如果您正在使用服务器端验证,则接受的答案可能会导致意外行为.无论请求是否成功,无论何时向服务器发送更新,都会触发sync事件,因此,如果请求触发服务器端验证错误(或任何其他错误),网格仍将更新并且任何更改都将丢失.仍然看着这个,但我发现的最好的解决方案是使用数据源的onRequestEnd()事件并手动检查错误.

例如:

function onRequestEnd(e)
{
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors) 
            data.read();
        else console.log("I had some issues");
    }
}