ajax post回调后如何刷新Kendo Ui网格答案

【问题标题】：How to refresh the KendoUi grid after a ajax post callbackajax post回调后如何刷新Kendo Ui网格
【发布时间】：2014-03-07 05:48:20
【问题描述】：

ajax post成功后如何刷新kendo ui网格？这是我的网格 ajax 帖子：

 var newUser = {
                    UserId: 0,
                    UserLoginName: currentRecord.UserLoginName,
                    UserDisplayName: currentRecord.UserDisplayName
                };
                //insert selected rows using DataSource insert method
                destinationGrid.dataSource.insert(newRecord);
                //ajax post to server
                var url = '@Url.Action("CreateUser", "ManageUsers")';
                $.post(url, { loginid: currentRecord.UserLoginName, name: currentRecord.UserDisplayName, role: roleSelected }, function (result) {
                    if (result.Success) {
        **////grid is not refreshing as I want to refersh the grid again from database**
                        destinationGrid.dataSource.read();
                    }

                });
            }

【问题讨论】：

看到这个stackoverflow.com/questions/18399805/…
如果您在我的网格中看到上面的内容，我已经在使用它，并且我已经尝试了以下两个选项。
下面的选项在每个地方和每个事件中都有效，因为我已经多次使用它，但是在 $(post(url) 回调中，我需要在完成后立即引用网格控制器动作。我该怎么做？
我只是发布代码。我希望它可以帮助你。
你应该为此使用传输配置，有一个创建 url。在数据源中插入新项目后，只需调用 sync() 并让奇迹发生。

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

【解决方案1】：

这只是例子

 $.ajax({
          url: '@Url.Action("NewGridView", "Test")',
          type: "Post",
          data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
          dataType: 'json',
          success: function (result) {

     $('#gridName').data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result });
     $('#gridName').data("kendoGrid").dataSource.read();
     $('#gridName').data("kendoGrid").refresh();
}
});

控制器

 public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription)
        {

        List<SampleModel> sampleAddList = new List<SampleModel>();
        SampleModel sampleAdd = new SampleModel();
        sampleAdd.SampleCode = sampleCode;
        sampleAdd.SampleDescription = sampledescription;
        sampleAdd.SampleItems = sampleItem;

        sampleAddList.Add(sampleAdd);
        var result = sampleAddList;
       return Json(result, JsonRequestBehavior.AllowGet);
}

如果您需要在完成控制器操作后立即刷新网格，请执行此操作，

$('#gridName').data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result }); 在你的post success

【讨论】：

谢谢它工作了，但是新添加的行会到表格的底部，我怎样才能让它在第一行？
@Deepali 我必须按照在控制器中创建的日期进行排序。
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) 将确保在顶部插入新行

【解决方案2】：

据我了解，您需要在成功更新后刷新您的剑道网格（相当于 $.ajax success: 回调）对吧？

在这种情况下，剑道网格没有任何成功回调，而是使用complete 回调。在传输中尝试以下操作；

dataSource: {
        transport: {
            read: {
                url: "/YourController/LoadYourGridData",
                type: "POST",
                contentType: "application/json",
                dataType: "json"
            },
            update: {
                url: "/YourController/UpdateYourGridData",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                dataType: "json",
                complete: function (data) {

                    $("#Grid").data("kendoGrid").dataSource.read();

                }
            }
        }

【讨论】：

【解决方案3】：

尝试使用

$("#gridName").data("kendoGrid").dataSource.read();

或

$("#gridName").data("kendoGrid").refresh();

【讨论】：