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

Posted 2023-05-07

【中文标题】ajax post回调后如何刷新Kendo Ui网格

【英文标题】：How to refresh the KendoUi grid after a ajax post callback

【发布时间】：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();
                    

                );
            

【问题讨论】：

看到这个***.com/questions/18399805/…

如果您在我的网格中看到上面的内容，我已经在使用它，并且我已经尝试了以下两个选项。

下面的选项在每个地方和每个事件中都有效，因为我已经多次使用它，但是在 $(post(url) 回调中，我需要在完成后立即引用网格控制器动作。我该怎么做？

我只是发布代码。我希望它可以帮助你。

你应该为此使用传输配置，有一个创建 url。在数据源中插入新项目后，只需调用 sync() 并让奇迹发生。

【参考方案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();