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

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

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

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

请让我知道如何才能做到这一点

问候,， 迪利普·库马尔（Dilip Kumar）

这可以帮助你——使用剑道

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

---

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

---

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

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

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

---

Weddin

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

$（“#numofalues”）.change（函数（）{
var columnsConfig=[]；
push（{field:“item”，title:“Metric”}）；
//动态分配值列的数量
对于（var i=1；i刷新网格

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

我们可以使用一条语句删除网格中的所有数据，而不是遍历所有元素

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

刷新网格

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

对于那些同时使用剑道和棱角的人，这里有一个对我有用的解决方案：

我们的想法是使用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>

这已经使用AngularJS v1.5.0和剑道UI v2016.1.226进行了测试。
以下是我使用的

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

如果您的网格很简单，并且不需要配置特定于列的特殊设置，那么您只需

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

……还有

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

var newDataSource=new kendo.data.DataSource（{data:DataSource}）；$（“#grid”）.data（“kendoGrid”）.setDataSource（newDataSource）；
$（“#grid”）.data（“kendoGrid”）.dataSource.read（）；
这是否意味着我可以使用数据绑定来分配列？欢迎使用堆栈溢出！通常不建议使用仅代码的答案。您还可以解释一下如何解决此问题吗？刷新（）将从当前数据库中重新加载网格的项。更改列后立即刷新网格可使其重新加载包含新列的项，而无需在网格分组中执行任何额外操作。非常好-动态列。向下投票，因为这不是“动态更改列”。这只是每次创建一个新网格，覆盖旧网格。另外，不要
destroy（）
旧的网格，所以内存泄漏正在发生。谢谢。工作非常出色，为我的场景做了一些即兴创作。在更新的剑道版本中，他们现在有了自己的实现。但很高兴这有帮助哇，这是Telerik实现的奇怪行为。所以
网格。选项。列
是分配定义的，而不是
grid.columns
。这个答案最终让网格公开了我提供的数据。谢谢。看看telerik的当前实现，我相信它已经改变了。它在没有网格的情况下对我有效。_renderContent（grid.dataSource.view（））；thx很多！你节省了我一天时间。我尝试了它，但它不起作用。无法调用_thead（）方法由于这会弄乱库中的内部代码，可能会导致版本更新。方法.data（）就是我要找的。
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());