如何使用Javascript重新加载或刷新Kendo Grid？
在一段时间后或用户操作后，通常需要重新加载或刷新网格。
29个回答
337
您可以使用
$('#GridName').data('kendoGrid').dataSource.read(); <!-- first reload data source -->
$('#GridName').data('kendoGrid').refresh(); <!-- refresh current UI -->
- Jaimin
11
64
我从不刷新。
$('#GridName').data('kendoGrid').dataSource.read();
独处总是适合我。
- Purna Pilla
32
在最近的一个项目中，我必须根据一些下拉选择调用来更新Kendo UI网格。以下是我使用的代码：
$.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);
});
希望这能节省您一些时间。
- asuciu
1
1正是我在寻找的，grid.setDataSource(dataSource); 对于非远程调用，这就是你必须使用的。谢谢！ - Rui Lima
32
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
- Oxon
2
谢谢，但是这会导致“TypeError: $(...).data(...)未定义”的错误。我也查看了许多页面并尝试了不同的解决方案变体，但仍然出现相同的错误。有什么想法吗？ - Jack
如果 data('kendoGrid') 返回 null，则很可能是 id 不正确或者您还没有创建 grid。请注意，您可以通过 $(..).kendoGrid() 创建 grid，并在稍后通过 $().data('kendoGrid') 访问它。 - tony
22
这些答案中没有一个意识到read返回一个Promise，这意味着您可以在调用刷新之前等待数据加载。
$('#GridId').data('kendoGrid').dataSource.read().then(function() {
$('#GridId').data('kendoGrid').refresh();
});
如果您的数据获取是即时/同步的，那么这是不必要的，但很可能来自于一个不会立即返回的终端点。
- Zachary Dow
2
2利用内置的 Promise 支持非常方便，也减少了一些代码行。我敢打赌这应该是正确的答案。 - FoxDeploy
2谢谢你，Zachary！我在这个问题上花了几个小时——你的解决方案是唯一一个对我有效的。我通过ajax向我的网格数据库源插入行，循环（一次插入一行）。循环结束后，dataSource.read()有时候不起作用。"then"就是我需要的。非常感谢！ - Antony D
10
如果您不想在处理程序中引用网格，请使用此代码：
$(".k-pager-refresh").trigger('click');
如果有刷新按钮，这将刷新网格。可以像这样启用该按钮：
[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))
- d.popov
10
实际上它们是不同的：
$('#GridName').data('kendoGrid').dataSource.read()刷新了表格行的uid属性。$('#GridName').data('kendoGrid').refresh()不改变uid。
- Ignas Paplauskas
8
在我的情况下，我需要每次使用自定义的URL，尽管结果的模式保持不变。
我使用了以下方式：
我使用了以下方式：
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);
});
- Amit Kapoor
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文件中添加以下全局函数。因此，您可以调用它来刷新项目中的所有kendo网格。
function KendoGridRefresh() {
var grid = $('#document').data('kendoGrid');
grid.dataSource.read();
}
- Milan
1
通过添加事件来刷新kendoGrid。 - Milan
6
我使用Jquery .ajax获取数据。为了将数据重新加载到当前网格中，我需要执行以下操作：
.success (function (result){
$("#grid").data("kendoGrid").dataSource.data(result.data);
})
- oopsdazie
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
read将请求服务器和重新加载 仅仅 数据源。界面不会有任何改变。refresh将从当前数据源重新渲染网格中的项。这就是为什么两者都是必需的。 - macwier