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\         


        

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

Refresh your grid

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

Answer 3

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

Answer 4

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 5

Refresh the grid

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

Answer 6

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