Update MVC grid with new, different columns after dataSource.read update

[Mark Mergler]

On page load we build a grid based on a DataTable model, we have a for each loop to generate the columns. Then from a kendo dropdown list we select a new ID which on selection, fires the dataSource.read method, passing the new ID. This returns a different dataset with different columns. The grid refreshes and shows the correct number of items/rows but the old columns remain and the grid is empty. The grid is not displaying the new columns.

I have tried to destroy and empty the grid before dataSource.read but then get a dataSource is undefined console error. See setup code below:

Grid:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName).Hidden(column.ColumnName == "CustID").Title(column.ColumnName.ToString().Replace(" ", ""));
        }
        columns.Bound("CustID").Title("").ClientTemplate("<a href='/Customers/Customer/#: CustID #'>More Details</a>");
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .ServerOperation(false)
        .Model(model =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    model.Field(column.ColumnName, column.DataType);
                }
            })
        .Read(read => read.Action("CustomerDataRead", "Customers", new { _CustomerListID = 18 }))
    )
)

The dropdown list select function:

function select(e) {
    var dataItem = this.dataItem(e.item.index());
    if (dataItem.CustomerListID == "") {dataItem.CustomerListID = -1}
    //$('#Grid').data().kendoGrid.destroy();
    //$('#Grid').empty();
    $("#Grid").data("kendoGrid").dataSource.read({ _CustomerListID: dataItem.CustomerListID});
}

In the select event above, I pass the ID to the read method. 

The grid refreshes, but the old columns do not update but the number of items returns is correct. See this screenshot:
http://prntscr.com/26yio5

If the dataset returned by dataSource.read has the same columns as the original grid, the grid refreshes OK and the data is displayed.

If I destroy and empty the grid, the dataSource.read method fails:
"Uncaught TypeError: Cannot read property 'dataSource' of undefined "

How to update the grid with new columns in each subsequent dataSource.read

[Daniel]

Hello,

The Grid does not support recreating the columns after each request. The columns can be set only on initialization. If the columns are different in your scenario then I can suggest to load the Grid again from a partial view via Ajax. An alternative is to destroy it and recreate it with JavaScript without setting the columns so that they are generated from the received data.

Regards,
Daniel
Telerik