Not able to refresh the data grid after selecting

Question

I am just started with kendo UI grids, And I could able to make out how to integrate the kendo with angularJS.

But I was trying to implement some thing like dynamically adding/selecting or unselecting the column names, then the data grid should display the columns accordingly in the data table.

Ex:

Now when I selecting a new column in the right side of the grid, The datatable is updated with that selected column

Hope this image gives a clear idea on what I am pointing

So, I want to achieve this kind of dynamic data grid,

I tried the to implement a sample, in Jsfiddle . In this jsfiddle you can find the datagrid with one column but, when you select a column by selecting a checkbox, above the datagrid, then could not able to reload/refresh the datagrid.

//vm.gridOptions.refresh(); THIS SAYS ERROR

ERROR:

TypeError: vm.gridOptions.refresh is not a function
    at vm.addColumsn (

NOTE: Please Consider the columns names are fetched from API, so I need to implement dynamically based on API

Answer 1

Indeed the options doesn't have a refresh method. This is a method of the Kendo UI widget which won't help you achieve your goal.

You need to use the k-rebind directive in order to set options at runtime:

<kendo-grid k-options="vm.gridOptions" k-rebind="vm.gridOptions"></kendo-grid>

Here is a live demo: http://jsfiddle.net/btjgzkup/34/