KendoGrid /角：不能动态地创建网格列/数据 [英] KendoGrid/Angular: cannot create grid columns/data dynamically

问题描述

在这个普拉克我有一个空网格（没有列）。当我点击生成网格我需要添加列（从阵列服用），并添加一行到表中。

的问题是，这些列未添加到网格，任何想法？如果我尝试刷新网格，我得到一个未定义错误。

HTML

 ＆LT;按钮NG点击=buildGrid（）＆GT;构建网格和LT; /按钮＆GT;
＆LT; D​​IV剑道网=网格K-选项=gridOptionsK-数据源=DS＆GT;＆LT; / DIV＆GT;
 

使用Javascript：

  VAR应用= angular.module（应用程序，[kendo.directives]）;功能MyCtrl（$范围）{    $ scope.ds = []    $ scope.colsList = {[名字：COL1}，
                        {名：COL2}，
                        {名：COL3}，
                        {名：COL4}];
  变种gridCols = [];    $ scope.gridOptions = {
            列：gridCols
  };
$ scope.buildGrid =功能（）{        $ scope.data = {};        为（变量X = 0; X＆下; $ scope.colsList.length; X ++）{
            VAR山坳= {};
            col.field = $ scope.colsList [X]。名称;
            col.title = $ scope.colsList [X]。名称;
            $ scope.data [col.field] =+（1111 *（X + 1））;
            gridCols.push（COL）;
        }        //添加一行表
        $ scope.ds.push（$ scope.data）;
        // $ scope.grid.refresh（）;    };
}
 

解决方案

您需要使用K-重新绑定使电网的重新初始化（你不能设置动态列上的现有网格）：

 ＆LT; D​​IV剑道网=网格
     K-选项=gridOptions
     K-数据源=DS
     K-重新绑定=gridOptions＆GT;＆LT; / DIV＆GT;
 

（演示）

In this plunk I have an empty grid (without columns). When I click on "Build Grid" I need to add columns (taken from an array) and also add a row to the table.

The problem is that the columns are not added to the grid, any ideas? If I try to refresh the grid, I get an undefined error.

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

    };  
}

解决方案

You need to use k-rebind so that the grid reinitializes (you can't set the columns dynamically on an existing grid):

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

(demo)

这篇关于KendoGrid /角：不能动态地创建网格列/数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！