KendoGrid/Angular: cannot create grid columns/data dynamically

Question

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

    };  
}

Lars Höppner · Accepted Answer · 2015-02-13 17:36:35Z

3

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)

answered Feb 13, 2015 at 17:36

Lars Höppner

18.4k2 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saulyasar Over a year ago

is there any way to do without js? I have same issue . I have grid in angular and two buttons ones bind 5 column the other bind 2 but when i click them grid always shows 5 column.... How to fix this?

Collectives™ on Stack Overflow

KendoGrid/Angular: cannot create grid columns/data dynamically

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related