Question

我正在尝试以下面的方式更改我的Kendo网格的列集。

var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
    .success(function (data) {
        grid.columns = data;                    
    })
    .error(function (data) {
        console.log(data);
    });

这是更改列集合但不立即反映在我的网格中。但是当我尝试在网格中执行某些操作（比如分组）时，我的新列集就出现了。

请让我知道如何实现这一目标。

此致 Dilip Kumar

Answer 1

您可以通过设置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;

您可以在会话或数据库中检索列

Answer 2

此jsfiddle - Kendo UI grid dynamic columns可以帮助您 - 使用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

Answer 3

对于那些一起使用 Kendo和Angular 的人来说，这是一个对我有用的解决方案：

想法是使用 k-rebind指令。来自文档：

Widget Update upon Option Changes

您可以从控制器更新小部件。使用特殊的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对此进行了测试。

Answer 4

我将此代码用于动态更改列：

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

<在>婚礼

Answer 5

刷新网格

 .success(function (data) {
        grid.columns = data;
        grid.refresh();                    
    })

Answer 6

这是我使用的

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

Answer 7

我认为您所要求的解决方案是在函数内部调用等效的远程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
});

Answer 8

刷新网格

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

Answer 9

而不是循环遍历所有元素。我们可以使用单个语句删除网格中的所有数据

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

Answer 10

如果您的网格很简单，并且您不需要配置特定的列特定设置，那么您可以omit the columns argument，suggested in the API reference.

使用自动生成的列（即不设置任何列设置）

......和....

如果未指定此[列]设置，网格将为数据项的每个字段创建一列。

Answer 11

var newDataSource = new kendo.data.DataSource（{data：dataSource}）; $（“＃grid”）。data（“ kendoGrid”）。setDataSource（newDataSource）; $（“＃grid”）。data（“ kendoGrid”）。dataSource.read（）;

如何动态更改kendo网格的列集

11 个答案: