如何动态更改剑道网格的列集

Posted 2023-05-07

【中文标题】如何动态更改剑道网格的列集

【英文标题】：How to change columns set of kendo grid dynamically

【发布时间】：2013-06-16 20:02:22

【问题描述】：

我正在尝试通过以下方式更改我的剑道网格的列集合。

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

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

请告诉我如何实现这一目标。

问候， 迪利普库马尔

【参考方案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;

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

【讨论】：

谢谢。工作就像一个魅力，我的场景有一些即兴发挥。

在更新的剑道版本中，他们现在有自己的实现......但很高兴它有所帮助

哇，这是 Telerik 实现的奇怪行为。所以grid.options.columns 是分配定义的对象，而不是grid.columns。这个答案终于让网格暴露了我提供的数据。谢谢。

看看telerik的当前实现我相信它已经改变了。

【参考方案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

【讨论】：

非常好 - 动态列。

投反对票，因为这不是“动态更改列”。这只是每次都创建一个新网格，覆盖旧网格。另外，不要destroy() 旧网格，以免发生内存泄漏。

【参考方案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 进行了测试。

【讨论】：

方法 .data() 是我要找的。​​span>

【参考方案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());
    
);

婚礼

【讨论】：

这是否意味着我可以使用数据绑定来分配列？

【参考方案5】：

刷新你的网格

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

【讨论】：

欢迎来到 Stack Overflow！通常不鼓励仅使用代码的答案。您能否解释一下这是如何解决问题的？

refresh() 将从当前数据库重新加载网格的项目。在更改列后刷新网格使其重新加载包含新列的项目，而无需在网格中执行任何额外的操作，如分组。

【参考方案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());

【讨论】：

它在没有 (grid._renderContent(grid.dataSource.view()); 的情况下对我有用！谢谢！你为我节省了一天

我试过了，还是不行。无法调用 _thead() 方法

因为这会与库中的内部代码混淆，它可能会在版本更新中中断

【参考方案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
);

【参考方案8】：

刷新网格

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

【参考方案9】：

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

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

【参考方案10】：

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

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

... 和 ....

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

【参考方案11】：

var newDataSource = new kendo.data.DataSource(data: dataSource); $("#grid").data("kendoGrid").setDataSource(newDataSource); $("#grid").data("kendoGrid").dataSource.read();