重新加载/刷新剑道网格

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

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

您可以使用

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

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

我从不刷新。

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

一直对我有用。

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

在最近的项目中，我不得不基于一些调用中的某些调用来更新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);
    });

希望这可以节省您一些时间。

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

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

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

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

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

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

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

实际上，它们是不同的：

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

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

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

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

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

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

您可以使用以下几行

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

有关自动刷新功能，请点击此处

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

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

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

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

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

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

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

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

为了进行完整的刷新，将在网格和新的读取请求一起重新渲染网格，您可以执行以下操作：

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

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

只需编写下面的代码

$('.k-i-refresh').click();

$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);

您可以尝试：

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

如果希望按时自动刷新网格，则可以使用以下示例，该示例将间隔设置为30秒：

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         setInterval(function () {
            var grid = $("#GridName").data("kendoGrid");
            grid.dataSource.read();
         }, 30000);
      });
   </script>

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

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

您还可以通过向“读取操作”发送新参数并将页面设置为所需的内容来刷新网格：

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

在此示例中，通过2个参数值调用网格的读取操作，获得结果后，将在页面1中调用网格。

刷新的最简单方法是使用refresh（）函数。就像这样：

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

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

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

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

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