182

如何使用 Javascript 重新加载或刷新 Kendo Grid？

通常需要在某个时间或用户操作之后重新加载或刷新网格。

4

27 回答 27

333

您可以使用

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->
于 2013-08-23T09:59:19.433 回答
63

我从不刷新。

$('#GridName').data('kendoGrid').dataSource.read();

一个人一直为我工作。

于 2014-09-16T02:03:43.410 回答
32 
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
于 2013-08-23T09:50:00.937 回答
30

在最近的一个项目中，我不得不根据一些调用更新 Kendo UI Grid，这些调用发生在一些下拉选择中。这是我最终使用的：

$.ajax({
        url: '/api/....',
        data: { myIDSArray: javascriptArrayOfIDs },
        traditional: true,
        success: function(result) {
            searchResults = result;
        }
    }).done(function() {
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#myKendoGrid').data("kendoGrid");
        dataSource.read();
        grid.setDataSource(dataSource);
    });

希望这会为您节省一些时间。

于 2014-09-03T20:42:12.663 回答
16

这些答案中没有一个得到read返回承诺的事实，这意味着您可以在调用刷新之前等待数据加载。

$('#GridId').data('kendoGrid').dataSource.read().then(function() {
    $('#GridId').data('kendoGrid').refresh();
});

如果您的数据抓取是即时/同步的，则这是不必要的，但很可能它来自不会立即返回的端点。

于 2018-02-02T18:51:12.560 回答
9

如果您不想在处理程序中引用网格，可以使用以下代码：

 $(".k-pager-refresh").trigger('click');

如果有刷新按钮，这将刷新网格。该按钮可以像这样启用：

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))
于 2014-08-13T08:34:27.453 回答
9

实际上，它们是不同的：

  • $('#GridName').data('kendoGrid').dataSource.read()刷新uid表格行的属性

  • $('#GridName').data('kendoGrid').refresh()留下相同的 uid

于 2016-03-24T12:55:27.193 回答
8

您只需 在您的 kendoGrid 绑定代码中添加一个事件.Events(events => events.Sync("KendoGridRefresh"))即可。无需在 ajax 结果中编写刷新代码。

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(model => model.Id(m => m.Id))        
    .Events(events => events.Sync("KendoGridRefresh"))    
    )
      .Columns(columns =>
      {
          columns.Bound(c => c.Id).Hidden();              
          columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);                           
      }).Events(e => e.DataBound("onRowBound"))
          .ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))
          .Sortable()          
          .HtmlAttributes(new { style = "height:260px" })          
  )

您可以在任何 .js 文件中添加以下全局函数。因此，您可以为项目中的所有剑道网格调用它来刷新剑道网格。

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}
于 2015-11-18T06:32:25.417 回答
8

就我而言，我每次都有一个自定义网址；尽管结果的架构将保持不变。
我使用了以下内容： 

var searchResults = null;
$.ajax({
        url: http://myhost/context/resource,
        dataType: "json",
        success: function (result, textStatus, jqXHR) {
            //massage results and store in searchResults
            searchResults = massageData(result);
        }
    }).done(function() {
        //Kendo grid stuff
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#doc-list-grid').data('kendoGrid');
        dataSource.read();
        grid.setDataSource(dataSource);
    });
于 2016-02-18T21:29:10.943 回答
6

我使用 Jquery .ajax 来获取数据。为了将数据重新加载到当前网格中，我需要执行以下操作：

.success (function (result){
    $("#grid").data("kendoGrid").dataSource.data(result.data);
})
于 2017-08-21T15:39:42.823 回答
5

您可以使用以下几行

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

有关自动刷新功能，请查看此处

于 2015-02-12T14:38:18.040 回答
5

通过使用以下代码，它会自动调用网格的读取方法并再次填充网格

$('#GridName').data('kendoGrid').dataSource.read();
于 2015-12-28T12:37:48.183 回答
5

重新加载网格的另一种方法是

$("#GridName").getKendoGrid().dataSource.read();
于 2016-02-27T09:05:49.263 回答
5

您可以随时使用$('#GridName').data('kendoGrid').dataSource.read();. 你真的不需要.refresh();在那之后，.dataSource.read();会做的伎俩。

现在，如果您想以更角度的方式刷新网格，您可以执行以下操作：

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

或者

vm.gridOptions.dataSource.read();

并且不要忘记将您的数据源声明为kendo.data.DataSource类型

于 2016-11-02T09:42:29.990 回答
4

当我刷新网格时，我想回到第 1 页。只需调用 read() 函数即可让您留在当前页面，即使新结果没有那么多页面。在数据源上调用 .page(1) 将刷新数据源并返回到第 1 页，但在不可分页的网格上失败。该函数同时处理：

function refreshGrid(selector) {
     var grid = $(selector);
     if (grid.length === 0)
         return;

     grid = grid.data('kendoGrid');
     if (grid.getOptions().pageable) {
         grid.dataSource.page(1);
     }
     else {
         grid.dataSource.read();
     }
}
于 2017-04-13T15:23:36.593 回答
4

为了进行完全刷新，网格将与新的读取请求一起重新呈现，您可以执行以下操作：

 Grid.setOptions({
      property: true/false
    });

属性可以是任何属性，例如可排序的

于 2017-05-26T14:30:19.127 回答
4

你可以试试：

    $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
于 2017-09-04T11:28:08.080 回答
3

只需写下面的代码

$('.k-i-refresh').click();
于 2015-07-04T12:53:58.797 回答
3 
$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);
于 2016-10-13T17:46:55.473 回答
3

如果您希望网格定时自动刷新，您可以使用以下示例，其间隔设置为 30 秒：

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         setInterval(function () {
            var grid = $("#GridName").data("kendoGrid");
            grid.dataSource.read();
         }, 30000);
      });
   </script>
于 2017-09-20T16:00:16.140 回答
3

您还可以通过将新参数发送到读取操作并将页面设置为您喜欢的内容来刷新您的网格：

var ds = $("#gridName").data("kendoGrid").dataSource;
ds.options.page = 1;
var parameters = {
    id: 1
    name: 'test'
}
ds.read(parameters);

在此示例中，网格的读取操作由 2 个参数值调用，在获得结果后，网格的分页位于第 1 页。

于 2019-04-30T11:33:51.633 回答
2

小部件的默认/更新配置/数据设置为自动绑定到关联的数据源。

$('#GridId').data('kendoGrid').dataSource.read();
$('#GridId').data('kendoGrid').refresh();
于 2017-02-02T09:06:47.243 回答
1

最简单的刷新方法是使用 refresh() 函数。这就像：

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

同时您也可以使用以下命令刷新数据源：

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

后者实际上是重新加载网格的数据源。两者的使用可以根据您的需要和要求来完成。

于 2018-09-04T11:49:56.673 回答
1

我看到这里的很多答案都建议同时调用dataSource.read和grid.refresh，但是，网格在内部侦听 dataSource 更改，并在更改后自行刷新。换句话说，同时执行dataSource.read和grid.refresh将导致两次刷新网格，这是不必要的。打电话dataSource.read就够了。

于 2021-09-17T09:44:23.260 回答
-2

我的解决方案是：

var gridObj = $('#GridName').data('kendoGrid');
gridObj.dataSource.read();
gridObj.refresh();

也适用于其他对象功能

于 2021-08-24T20:10:31.903 回答
-3 
$("#grd").data("kendoGrid").dataSource.read();
于 2018-07-21T05:50:24.950 回答
-3

$('#GridName').data('kendoGrid').dataSource.read(); //首先你必须读取数据源数据 $('#GridName').data('kendoGrid').refresh(); // 之后就可以刷新了

于 2021-11-19T11:30:21.383 回答