重新加载/刷新剑道网格答案

【问题标题】：Reloading/refreshing Kendo Grid重新加载/刷新剑道网格
【发布时间】：2013-08-26 07:50:13
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

你可以使用

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

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

【讨论】：

@zespri read 将请求服务器并重新加载仅重新加载数据源。 UI 不会有任何变化。 refresh 将从当前数据源重新渲染网格中的项目。这就是为什么两者都是必需的。
我认为您不需要更新最新版本的剑道。因为它似乎没有它也能正常工作
是的！这项工作也适用于 TreeList： $('#Gantt').data('kendoTreeList').dataSource.read(); $('#Gantt').data('kendoTreeList').refresh();
开发人员明确表示不要在阅读后调用刷新：telerik.com/forums/show-progress-spinner-during-load-refresh，因为它可能会阻止进度指示器出现。
我正在使用更新的版本，我只需要调用 .read。读取后调用 .refresh 会导致两次到服务器获取数据。

【解决方案2】：

我从不刷新。

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

一个人总是为我工作。

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，但这给出了“TypeError: $(...).data(...) is undefined”错误。我还查看了许多页面并尝试了此解决方案的不同变体，但仍然得到相同的错误。有什么想法吗？
如果 data('kendoGrid') 返回 null 那么很可能是 id 错误或者您尚未创建网格。注意，您使用 $(..).kendoGrid() 创建网格，稍后使用 $().data('kendoGrid') 访问它

【解决方案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);
    });

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

【讨论】：

正是我要找的 grid.setDataSource(dataSource);对于非远程呼叫，这是您必须使用的。谢谢！

【解决方案5】：

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

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

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

【讨论】：

利用内置的 Promise 支持非常方便，并且还删除了几行代码。我敢打赌这应该是真正的答案。
谢谢扎卡里！我在这个问题上花了几个小时 - 你的解决方案是唯一对我有用的解决方案。我通过 ajax 将行插入到我的网格数据库源中，循环（一次一行）。循环完成后 dataSource.read() 仅在某些时候起作用。 “然后”是我需要的。非常感谢！

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

其实它们是不同的：

$('#GridName').data('kendoGrid').dataSource.read()刷新表格行的uid属性
$('#GridName').data('kendoGrid').refresh() 保留相同的 uid

【讨论】：

【解决方案8】：

你所要做的就是添加一个事件 .Events(events => events.Sync("KendoGridRefresh")) 在您的 kendoGrid 绑定代码中。无需在 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();
}

【讨论】：

通过添加事件刷新 kendoGrid。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

您可以使用以下几行

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

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案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 类型

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

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

【讨论】：

【解决方案17】：

你可以试试：

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

【讨论】：

【解决方案18】：

只写下面的代码

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

【讨论】：

只有当您使用 pageable.refresh = true... 初始化网格时才会如此，默认情况下不是这样。无论如何，当您能够使用 API 函数（请参阅接受的答案）时，您不应该使用 UI 解决方法

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

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

【讨论】：

【解决方案21】：

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

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

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

【讨论】：

【解决方案22】：

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

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

【讨论】：

接受的答案（从 2013 年开始）是否有问题，因为您的答案看起来如此相似。您至少应该以某种方式发表评论-该答案中的 cmets 甚至说您不应该致电refresh

【解决方案23】：

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

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

虽然您也可以使用此命令刷新数据源：

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

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

【讨论】：

【解决方案24】：

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

【讨论】：

【解决方案25】：

我的解决办法是：

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

也适用于其他对象函数

【讨论】：

【解决方案26】：

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

【讨论】：

虽然这至少不是 1to1 复制粘贴，但它没有提供其他信息。使用dataSource.read() 推荐了这篇文章中几乎每个答案都有不止一个赞成票

【解决方案27】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
不是和the accepted answer中的解决方案一样吗？