我正在尝试通过以下方式更改我的剑道网格的列集合。
var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
.success(function (data) {
grid.columns = data;
})
.error(function (data) {
console.log(data);
});
这正在更改列集合，但不会立即反映在我的网格中。但是当我尝试在网格中执行一些操作（如分组）时，我的新列集就会出现。
请让我知道如何实现这一目标。
问候， 迪利普库马尔
您可以通过设置 KendoUI 数据源、销毁网格并重建它来做到这一点
$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
$.ajax({
url: "/Home/Load",
success: function (state) {
state = JSON.parse(state);
var options = grid.options;
options.columns = state.columns;
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$("#grid")
.empty()
.kendoGrid(options);
}
});
});
在这里你可以这样做：
var options = grid.options;
options.columns = state.columns;
您可以在其中检索会话或数据库中的列
这个jsfiddle - Kendo UI 网格动态列可以帮助你 - 使用 kendo.observable。
var columns = data;
var configuration = {
editable: true,
sortable: true,
scrollable: false,
columns: columns //set the columns here
};
var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel); //viewModel will be data as in jsfiddle
对于同时使用Kendo 和 Angular的人来说，这里有一个对我有用的解决方案：
这个想法是使用k-rebind 指令。从文档：
您可以从控制器更新小部件。使用特殊的 k-rebind 属性创建一个小部件，该小部件会在某些范围变量更改时自动更新。此选项将破坏原始小部件并使用更改的选项重新创建它。
除了像往常一样在 GridOptions 中设置列数组之外，我们还必须持有对它的引用：
vm.gridOptions = { ... };
vm.gridColumns = [{...}, ... ,{...}];
vm.gridOptions.columns = vm.gridColumns;
然后将该变量传递给 k-rebind 指令：
<div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
</div>
当您将网格绑定到远程数据（在我的例子中为 OData）时就是这样。现在，您可以在列数组中添加或删除元素。网格将在重新创建后再次查询数据。
当将 Grid 绑定到本地数据（对象的本地数组）时，我们必须以某种方式推迟数据的绑定，直到重新创建小部件。对我有用的（也许有一个更清洁的解决方案）是使用 $timeout 服务：
vm.gridColumns.push({ ... });
vm.$timeout(function () {
vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
}, 0);
这已经使用 AngularJS v1.5.0 和 Kendo UI v2016.1.226 进行了测试。
我将此代码用于动态更改列：
kendo.data.binders.widget.columns = kendo.data.Binder.extend({
refresh: function () {
var value = this.bindings["columns"].get();
this.element.setOptions({ columns: value.toJSON });
this.element._columns(value.toJSON());
this.element._templates();
this.element.thead.empty();
this.element._thead();
this.element._renderContent(this.element.dataSource.view());
}
});
婚礼
这是我使用的
var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
grid.setOptions({ columns: columns });
grid._columns(columns);
grid._templates();
grid.thead.empty();
grid._thead();
grid._renderContent(grid.dataSource.view());
刷新您的网格
.success(function (data) {
grid.columns = data;
grid.refresh();
})
我认为您所要求的解决方案是在函数内部调用等效的远程 DataSource.read() 方法。这就是我用来动态更改本地 js 数据的列数的方法。
$("#numOfValues").change(function () {
var columnsConfig = [];
columnsConfig.push({ field: "item", title: "Metric" });
// Dynamically assign number of value columns
for (var i = 1; i <= $(this).val(); i++) {
columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
}
columnsConfig.push({ field: "target", title: "Target" });
columnsConfig.push({ command: "destroy", title: "" });
$("#grid").data("kendoGrid").setOptions({
columns: columnsConfig
});
columnDataSource.read(); // This is what reloads the data
});
刷新网格
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
var newDataSource = new kendo.data.DataSource({data: dataSource}); $("#grid").data("kendoGrid").setDataSource(newDataSource); $("#grid").data("kendoGrid").dataSource.read();
而不是循环遍历所有元素。我们可以使用单个语句删除网格中的所有数据
$("#Grid").data('kendoGrid').dataSource.data([]);
如果您的网格很简单，并且您不需要配置特殊的特定于列的设置，那么您可以简单地省略 columns 参数，如API 参考中所建议的那样。
使用自动生成的列（即不设置任何列设置）
... 和 ....
如果未指定此 [column] 设置，则网格将为数据项的每个字段创建一列。