KendoUI Grid Create Columns Programmatically

Question

I have an app with a KendoUI DropDownList that is populated with a list of tables from a database and a grid that is initially set with a columns atrribute of an empty array:

... columns: [] ...

The intent is to select a table from the list, send the table name to the server and have the server return JSON data containing the column names and the data from a "SELECT * FROM table" query. The data comes back as expected and the first time through I can use it as follows where "self" is just a reference to the grid in my view/model:

self.columns.removeAll();

for (var i = 0; i < joOutput["Cols"].length; i++) {
   var col = { title: joOutput["Cols"][i], field: joOutput["Cols"][i] };

   self.columns.push(col);
   } 

After extracting my data and assigning it to the grids datasource, the grid displays correctly with the correct column headers and data. However, when I select another table from the list and receive data from the server, the grid display does not update, even though it seems the grid columns have been updated though the execution of the above code. The end the result on screen is the column headers are the names of the columns from the first grid and the number of empty lines from the rows returned from the second query.

This dynamic manipulation of columns seems to be very difficult to do as seen by the forum post at http://www.kendoui.com/forums/ui/grid/dynamically-add-new-column.aspx but that post is over a year old now and I would've hoped some progress would've been made on this now, especially in light on the recent webcast on March 20 for the new release. So I guess the question remains: Is what I'm after even possible or am I SOL? Thanks.

Answer 1

You cannot dynamically change the columns of the grid after initialization. You can however create a new grid instance. Don't forget to call the destroy method of the old grid.