Kendo Grid: Update column configuration after Kendo Grid initiated

Question

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.

Possible duplicate of How to change columns set of kendo grid dynamically — Peter Elliott

dfsq dfsq · Accepted Answer · 2015-11-24T16:15:16

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

Kendo Grid: Update column configuration after Kendo Grid initiated

1 Answers