重新加载/刷新Kendo Grid

Question

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

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

Answer 1

您可以使用

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

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Answer 2

我从不刷新.

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

一直对我有用.

Answer 3

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

Answer 4

在最近的一个项目中,我不得不根据一些调用来更新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);
    });

希望这能为您节省一些时间.

Answer 5

这些答案中没有一个得到read返回promise 的事实,这意味着您可以在调用refresh之前等待数据加载.

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

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

Answer 6

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

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

如果有刷新按钮,这将刷新网格.可以像这样启用按钮:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

Answer 7

实际上,他们是不同的:

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

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

Answer 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);
    });

Answer 9

你要做的就是 在你的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文件中添加以下全局函数.因此,您可以为项目中的所有kendo网格调用它来刷新kendoGrid.

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}

Answer 10

我想在刷新网格时返回到第 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();
     }
}

Answer 11

您可以使用以下几行

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

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

Answer 12

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

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

Answer 13

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

$("#GridName").getKendoGrid().dataSource.read();

Answer 14

您始终可以使用$('#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类型

Answer 15

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

.success (function (result){
    $("#grid").data("kendoGrid").dataSource.data(result.data);
})