Telerik MVC Grid 内联编辑需要页面刷新才能显示更改

Question

我有一个 Telerik MVC 网格，我正在其中更新内联行（更新名称列，数字列不可编辑）

 @Html.Kendo().Grid(Model.Employees)
        .Name("EmployeeGrid")
        .Columns(col =>
        {
            col.Bound(o => o.EmployeeNumber);
            col.Bound(o => o.Name).Width(250);
            col.Command(command => { command.Edit(); });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
        .Ajax()
        .Events(e => e.RequestEnd("onGridDataSourceRequestEnd"))
        .Model(model =>
        {
            model.Id(o => o.EmployeeNumber);
            model.Field(o => o.EmployeeNumber).Editable(false);
        })
        .Update(update => update.Action("EditingInline_Update", "EmployeeUpdate"))
        .ServerOperation(false)
        )
        .Render();


 function onGridDataSourceRequestEnd(e) {
    if (e.type == "update") {
        console.log('I am inside Update');
        $("#EmployeeGrid").data("kendoGrid").dataSource.read();
    }
}

我的问题是，当我单击网格中的“更新”按钮时，上面的代码通过调用操作 EmployeeUpdate 来更新记录。但是，即使我在 JS 函数中调用数据源读取，该更改也不会立即反映在网格中。控制台显示 "I am inside Update" 但不刷新网格。如果我刷新页面，我会看到更新行。

请让我知道我错过了什么。谢谢。

Answer 1

也许您应该尝试使用 refresh() 函数刷新网格：

function onGridDataSourceRequestEnd(e) {
    if (e.type == "update") {
        console.log('I am inside Update');
        $("#EmployeeGrid").data("kendoGrid").dataSource.read();

        // add this line
        $("#EmployeeGrid").data("kendoGrid").refresh();
    }
}

注意read()中的函数dataSource只是通过请求向服务器重新加载数据源，网格内容在使用refresh()之前仍然没有改变。

Answer 2

在进行更新时，您不必 refresh/reload 您的网格，您只需要 return 来自控制器的更新记录，网格小部件将处理其余部分！

请查看 telerik demo-page

我最常犯的错误是忘记 return 数据源结果：

.ToDataSourceResult(request,ModelState)

Telerik 通常 returns 与发送到更新的模型相同，但我通常 returns 与读取函数 returns 相同的对象（如果读取确实我也会在更新的记录中得到它。

Telerik MVC Grid 内联编辑需要页面刷新才能显示更改

Telerik MVC Grid Inline editing requires page refresh to display changes

asp.net-mvc

telerik

telerik-grid

telerik-mvc