KendoGrid / Angular:无法动态创建网格列/数据

时间:2015-02-13 14:37:41

标签: angularjs kendo-ui kendo-grid

In this plunk我有一个空网格(没有列)。当我点击“Build Grid”时,我需要添加列(从数组中取出)并在表中添加一行。

问题是列没有添加到网格中,有什么想法吗?如果我尝试刷新网格,则会出现undefined错误。

HTML:

<button ng-click="buildGrid()">Build Grid</button>
<div kendo-grid="grid" k-options="gridOptions" k-data-source="ds"></div>

使用Javascript:

var app = angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {

    $scope.ds = []

    $scope.colsList =  [{ name: "col1" },
                        { name: "col2" },
                        { name: "col3" },
                        { name: "col4" }];


  var gridCols = [];

    $scope.gridOptions = {
            columns: gridCols
  };


$scope.buildGrid = function() {

        $scope.data = {};

        for (var x=0;x<$scope.colsList.length;x++) {
            var col = {};
            col.field = $scope.colsList[x].name;
            col.title = $scope.colsList[x].name;
            $scope.data[col.field] = "" + (1111 * (x+1));
            gridCols.push(col);
        }

        // add one row to the table
        $scope.ds.push($scope.data);
        //$scope.grid.refresh();

    };  
}

1 个答案:

答案 0 :(得分:3)

您需要使用k-rebind以便网格重新初始化(您无法在现有网格上动态设置列):

<div kendo-grid="grid" 
     k-options="gridOptions" 
     k-data-source="ds" 
     k-rebind="gridOptions"></div>

demo