1

Please see this example

I want to update the columns afte the kendo grid initiated.

For example the current columns definition is as this:

             columns: [{
                field: "FirstName",
                title: "First Name",
                width: "120px"
                },{
                field: "LastName",
                title: "Last Name",
                width: "120px"
                },{
                field: "Country",
                width: "120px"
                },{
                field: "City",
                width: "120px"
                },{
                field: "Title"
            }]

After the grid presented, I want to update the definition of columns as this:

             var newCol = [{
                field: "FirstName",
                title: "You First Name",
                width: "200px"
                },{
                field: "LastName",
                title: "You Last Name",
                width: "200px"
                },{
                field: "Title"
            }]

I want this function since it lets users dynamically change the whole grid. Not only the dataSource, but also the columns. They can choose to reset the width, title. They can choose to query the data they want and present it in the grid with self-defined columns configuration.

I know that I can destroy the grid then create another, but that might not be necessary, right? Any help is appreciated.

Thanks.

toby_yo
  • 179
  • 2
  • 15
  • Possible duplicate of [How to change columns set of kendo grid dynamically](http://stackoverflow.com/questions/17205595/how-to-change-columns-set-of-kendo-grid-dynamically) – Peter Elliott Nov 24 '15 at 15:44

1 Answers1

5

Fist of all you will need to get reference to kendoGrid instance. To do so you need to name directive in template, for example:

<div kendo-grid="grid" options="mainGridOptions"></div>

So in your scope $scope.grid will be grid instance. Then you can use normal grid methods like hideColumn:

$scope.grid.hideColumn(2); // hide the second column

Demo: http://dojo.telerik.com/iyuZE/5

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Thanks. Is there a way to substitute the whole column configuration with a new one? Instead of change them one-by-one? – toby_yo Nov 24 '15 at 16:18
  • Well you could also do something like this: `$scope.mainGridOptions.columns = [...]; $scope.grid.setOptions($scope.mainGridOptions);`. http://dojo.telerik.com/iyuZE/6 – dfsq Nov 24 '15 at 16:27
  • That is what I long for....I really mean that...I have been looking for it for so long. Thanks. – toby_yo Nov 24 '15 at 16:35
  • Cool, glad that it helped you! – dfsq Nov 24 '15 at 16:36
  • +1 for **setOptions**. Here is the working demo. [http://dojo.telerik.com/eGEvU](http://dojo.telerik.com/eGEvU) – Win Nov 24 '15 at 16:51