How to change columns set of kendo grid dynamically
Solution 1
You can do it by setting the KendoUI datasource, destroy the grid, and rebuild it
$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
$.ajax({
url: "/Home/Load",
success: function (state) {
state = JSON.parse(state);
var options = grid.options;
options.columns = state.columns;
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$("#grid")
.empty()
.kendoGrid(options);
}
});
});
here you can just do this :
var options = grid.options;
options.columns = state.columns;
where you can retrieve the columns in a session or in a db
Solution 2
This jsfiddle - Kendo UI grid dynamic columns can help you - using kendo.observable.
var columns = data;
var configuration = {
editable: true,
sortable: true,
scrollable: false,
columns: columns //set the columns here
};
var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel); //viewModel will be data as in jsfiddle
Solution 3
For the ones who are using Kendo and Angular together, here is a solution that worked for me:
The idea is to use the k-rebind directive. From the docs:
Widget Update upon Option Changes
You can update a widget from controller. Use the special k-rebind attribute to create a widget which automatically updates when some scope variable changes. This option will destroy the original widget and will recreate it using the changed options.
Apart from setting the array of columns in the GridOptions as we normally do, we have to hold a reference to it:
vm.gridOptions = { ... };
vm.gridColumns = [{...}, ... ,{...}];
vm.gridOptions.columns = vm.gridColumns;
and then pass that variable to the k-rebind directive:
<div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
</div>
And that's it when you are binding the grid to remote data (OData in my case). Now you can add or remove elements to/from the array of columns. The grid is going to query for the data again after it is recreated.
When binding the Grid to local data (local array of objects), we have to somehow postpone the binding of the data until the widget is recreated. What worked for me (maybe there is a cleaner solution to this) is to use the $timeout service:
vm.gridColumns.push({ ... });
vm.$timeout(function () {
vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
}, 0);
This has been tested using AngularJS v1.5.0 and Kendo UI v2016.1.226.
Solution 4
I'm use this code for change columns dynamic:
kendo.data.binders.widget.columns = kendo.data.Binder.extend({
refresh: function () {
var value = this.bindings["columns"].get();
this.element.setOptions({ columns: value.toJSON });
this.element._columns(value.toJSON());
this.element._templates();
this.element.thead.empty();
this.element._thead();
this.element._renderContent(this.element.dataSource.view());
}
});
Weddin
Solution 5
Refresh your grid
.success(function (data) {
grid.columns = data;
grid.refresh();
})
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on May 03, 2020Comments
-
Admin about 4 years
I am trying to change the columns collection of my Kendo grid in the below way.
var grid = $("#grid").data("kendoGrid"); $http.get('/api/GetGridColumns') .success(function (data) { grid.columns = data; }) .error(function (data) { console.log(data); });
This is changing the column collection but not reflecting immediately in my grid. But when I try to perform some actions in the grid (like grouping), then my new column set is appearing.
Please let me know how can I achieve this.
Regards, Dilip Kumar
-
Markus Johnsson almost 10 yearsDoes this mean I can use data-binding to assign columns?
-
Nate Barbettini almost 9 yearsWelcome to Stack Overflow! Code-only answers are generally discouraged. Can you also provide an explanation as to how this fixes the problem?
-
samira riazati almost 9 yearsrefresh() will reload grid's items from the current database. Refreshing grid just after changing columns makes it to reload items include the new column without doing any extra actions in the grid like grouping.
-
DeeArgee over 8 yearsVery nice - dynamic columns.
-
Jorge Fuentes González almost 8 yearsDownvote because this is not "change columns dinamically". This justs creates a new grid each time, overwritting the old one. Also, do not
destroy()
the old grid so a memory leak is happening. -
Immortal over 7 yearsthank you. Worked like a charm, with a few improvisations for my scenario.
-
Edu Cielo over 7 yearsin the updated kendo version they have their implementations nowadays.. but glad it helped
-
T-student over 7 yearsit worked to me without (grid._renderContent(grid.dataSource.view()); thx a lot ! you saved me a day
-
Suncat2000 over 7 yearsWow, that's a bizarre behavior that Telerik implemented. So the
grid.options.columns
is what assigns the definitions, not thegrid.columns
. This answer finally made the grid expose the data I provided. Thank you. -
Edu Cielo over 7 yearslook at the current implementations of telerik i believe it has change.
-
shahar eldad about 7 yearsI tried it and it does not work. Could not call _thead() method
-
CMS about 7 yearssince this is messing with internal code from the library it may break in version updates
-
Daniel about 4 yearsThe method .data(<my new state>) was what I was looking for.