This is a migrated thread and some comments may be shown as answers.

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

1 Answer 131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark Mergler
Top achievements
Rank 1
Mark Mergler asked on 27 Nov 2013, 11:24 AM
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






1 Answer, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 29 Nov 2013, 08:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Mark Mergler
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or