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

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

Answer 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());

Answer 3

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
});

Answer 4

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.

Answer 5

Refresh your grid

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

Answer 6

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([]);