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

Question

我试图以下面的方式更改我的剑道网格的列集合.

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网格动态列可以帮助你 - 使用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指令.来自文档:

选项更改时的小组件更新

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