重新加载/刷新Kendo网格
如何使用JavaScript重新加载或刷新Kendo网格？
通常需要在某个时间之后或用户操作之后重新加载或刷新网格。
您可以使用
$('#GridName').data('kendoGrid').dataSource.read(); $('#GridName').data('kendoGrid').refresh(); 我从来没有刷新。
$('#GridName').data('kendoGrid').dataSource.read();
独自一人为我工作。
$('#GridName').data('kendoGrid').dataSource.read(); $('#GridName').data('kendoGrid').refresh();
在最近的一个项目中，我不得不根据一些调用更新Kendo UI Grid，这些调用发生在一些下拉select上。 这是我最终使用的：
$.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); });
希望这会为你节省一些时间。
其实它们是不一样的
-
$('#GridName').data('kendoGrid').dataSource.read()刷新表行的uid属性 -
$('#GridName').data('kendoGrid').refresh()离开相同的uid
如果您不想在处理程序中引用网格，则可以使用以下代码：
$(".k-pager-refresh").trigger('click');
这将刷新网格，如果有刷新button。 button可以这样启用：
[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))
你只需要在你的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(); }
在我的情况下，我有一个自定义的url去每次; 尽pipe结果的模式将保持不变。
我使用了以下内容：
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();
对于自动刷新function，看看这里
通过使用下面的代码，它自动调用网格的读取方法，并再次填充网格
$('#GridName').data('kendoGrid').dataSource.read();
重新加载网格的另一种方法是
$("#GridName").getKendoGrid().dataSource.read();
你总是可以使用$('#GridName').data('kendoGrid').dataSource.read(); 。 你真的不需要.refresh(); 之后， .dataSource.read(); 会做的伎俩。
现在，如果你想以更有angular度的方式刷新你的网格，你可以这样做：
<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div> vm.grid.dataSource.read();`
要么
vm.gridOptions.dataSource.read();
不要忘记把你的数据源声明为kendo.data.DataSourcetypes
为了做一个完整的刷新，在网格将被重新渲染的同时有新的读取请求，您可以执行以下操作：
Grid.setOptions({ property: true/false });
财产可以是任何财产，如sorting
只需写下面的代码
$('.ki-refresh').click();
$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);
小部件的默认/更新configuration/数据被设置为自动绑定到关联的数据源。
$('#GridId').data('kendoGrid').dataSource.read(); $('#GridId').data('kendoGrid').refresh();
当我刷新网格时，我想回到第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(); } }
我用Jquery .ajax来获取数据。 为了将数据重新加载到当前网格中，我需要执行以下操作：
.success (function (result){ $("#grid").data("kendoGrid").dataSource.data(result.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>
