How to change columns set of kendo grid dynamicall

Question

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

Answer 1

If your grid is simple and you don't need to configure special column-specific settings, then you can simply omit the columns argument, as suggested in the API reference.

Use autogenerated columns (i.e. do not set any column settings)

... and ....

If this [column] setting is not specified the grid will create a column for every field of the data item.

Answer 2

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

Answer 3

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

Answer 4

Refresh the grid

     $('#GridName').data('kendoGrid').dataSource.read();
     $('#GridName').data('kendoGrid').refresh();