How to change columns set of kendo grid dynamically

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

score 17 · Answer 1 · edited Feb 23 '15 at 10:31

17

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

edited Feb 23 '15 at 10:31

Hans Z.

50,496
12
102
115

answered Jun 03 '14 at 07:17

ECie

1,265
4
21
50

thank you. Worked like a charm, with a few improvisations for my scenario. – Immortal Nov 29 '16 at 00:14
in the updated kendo version they have their implementations nowadays.. but glad it helped – ECie Nov 29 '16 at 09:49
Wow, that's a bizarre behavior that Telerik implemented. So the `grid.options.columns` is what assigns the definitions, not the `grid.columns`. This answer finally made the grid expose the data I provided. Thank you. – Suncat2000 Mar 08 '17 at 21:07
look at the current implementations of telerik i believe it has change. – ECie Mar 09 '17 at 06:55

Paritosh · Answer 2 · 2015-10-09T12:12:23.990

10

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

edited Oct 09 '15 at 12:12

answered Jun 20 '13 at 09:19

Paritosh

11,144
5
56
74

Very nice - dynamic columns. – DeeArgee Oct 08 '15 at 14:00
6

Downvote 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. – Jorge Fuentes González Jul 22 '16 at 09:55

score 9 · Answer 3 · answered Mar 13 '16 at 00:40

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.

The method .data() was what I was looking for. – Daniel Apr 22 '20 at 21:32 — Daniel, Apr 22 '20 at 21:32

score 3 · Answer 4 · answered Aug 29 '14 at 13:51

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

Does this mean I can use data-binding to assign columns? – Markus Johnsson Aug 29 '14 at 14:00 — Markus Johnsson, Aug 29 '14 at 14:00

score 2 · Answer 5 · answered Aug 16 '15 at 19:48

2

Refresh your grid

 .success(function (data) {
        grid.columns = data;
        grid.refresh();                    
    })

answered Aug 16 '15 at 19:48

samira riazati

515
7
21

Welcome to Stack Overflow! Code-only answers are generally discouraged. Can you also provide an explanation as to how this fixes the problem? – Nate Barbettini Aug 16 '15 at 19:56
refresh() 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. – samira riazati Aug 16 '15 at 21:37

score 2 · Answer 6 · answered Sep 19 '16 at 04:41

2

Here is what i use

var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
        grid.setOptions({ columns: columns });
        grid._columns(columns);
        grid._templates();
        grid.thead.empty();
        grid._thead();
        grid._renderContent(grid.dataSource.view());

answered Sep 19 '16 at 04:41

CMS

3,657
1
27
46

it worked to me without (grid._renderContent(grid.dataSource.view()); thx a lot ! you saved me a day – FrankTan Jan 31 '17 at 16:48
I tried it and it does not work. Could not call _thead() method – shahar eldad May 08 '17 at 08:30
1

since this is messing with internal code from the library it may break in version updates – CMS May 08 '17 at 13:26

score 1 · Answer 7 · answered Feb 18 '15 at 23:02

I think a solution for what you are asking is to call the equivalent remote DataSource.read() method inside of the function. This is what I used to change the number of columns dynamically for local js data.

$("#numOfValues").change(function () {
    var columnsConfig = [];
    columnsConfig.push({ field: "item", title: "Metric" });

    // Dynamically assign number of value columns
    for (var i = 1; i <= $(this).val(); i++) {
        columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
    }

    columnsConfig.push({ field: "target", title: "Target" });
    columnsConfig.push({ command: "destroy", title: "" });

    $("#grid").data("kendoGrid").setOptions({
        columns: columnsConfig
    });
    columnDataSource.read(); // This is what reloads the data
});

score 0 · Answer 8 · answered Apr 30 '15 at 20:02

0

Refresh the grid

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

answered Apr 30 '15 at 20:02

GANI

2,013
4
35
69

score 0 · Answer 9 · answered Aug 15 '15 at 21:44

0

Instead of looping through all the elements. we can remove all the data in the grid by using a single statement

$("#Grid").data('kendoGrid').dataSource.data([]);

answered Aug 15 '15 at 21:44

Prathap Kudupu

1,315
11
11

score 0 · Answer 10 · answered Nov 10 '16 at 15:17

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.

score 0 · Answer 11 · answered May 02 '19 at 17:52

0

var newDataSource = new kendo.data.DataSource({data: dataSource}); $("#grid").data("kendoGrid").setDataSource(newDataSource); $("#grid").data("kendoGrid").dataSource.read();

answered May 02 '19 at 17:52

parham parsa

1

john nowlin · Answer 12 · 2022-04-26T19:31:15.217

0

After fighting this for a day and seeing hints in this thread that Kendo had simplified this problem, I discovered you can just use setOptions with a single property.

.success(function (data) {
    grid.setOptions({
        columns: data,
    });                    
})

Grid Set Options

edited Apr 26 '22 at 19:31

answered Apr 26 '22 at 19:10

john nowlin

135
10

How to change columns set of kendo grid dynamically

12 Answers12

Linked

Related