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