angularjs - Angularjs Grid列更改在kendo ui中没有影响

Question

我面临一个与使用kendo带有两个按钮的网格相关的问题。如果我点击第一个按钮，它应该显示三列，如果我点击第二个按钮，它应该只显示两列。但它似乎没有工作。我目前的例子是：

参考链接

<div id="example" ng-app="KendoDemos">
  <div ng-controller="MyCtrl">
     <button ng-click="execute1($event)">Execute 1</button>
     <button ng-click="execute2($event)">Execute 2</button>
     <div kendo-grid="grid" k-options="gridOptions" k-rebind="selectedType"></div>
  </div>
</div>

Answer 1

你有一个简单的错误

在这两种情况下，您都使用 dataModel1，您必须对 gridOptions2 使用“dataModel2”

var gridOptions2 = {
        dataSource: new kendo.data.DataSource({
            data: new kendo.data.ObservableArray(dataModel2),
          columns: [
                    { field: "Id", title:"ID", width: "56px" },
                    { field: "company", title:"company", width: "110px" },
                            { field: "os", title:"os", width: "110px" }
                   ]
        })

这里解决了：

http://plnkr.co/edit/Nie7eJVoPmt6xUpnmqnF?p=preview

编辑：

现在我不明白这个问题：

你有这个：

var gridOptions1 = {
        dataSource: new kendo.data.DataSource({
            data: new kendo.data.ObservableArray(dataModel1),
            columns: [
                    { field: "Id", title:"ID", width: "56px" },
                    { field: "company", title:"company", width: "110px" }

                   ]
        })
    };

但是“列”应该在 DataSource 之外，如下所示：

var gridOptions1 = {
        dataSource: new kendo.data.DataSource({
            data: new kendo.data.ObservableArray(dataModel1),

        }),
         columns: [
                    { field: "Id", title:"ID", width: "56px" },
                    { field: "company", title:"company", width: "110px" }

                   ]
    };

这是工作：

http://plnkr.co/edit/qQ2IzHSyGM7SsZxE3BEI?p=preview