grid configuration : how to add fields to dataSource.schema.model.fields at runtime

[Tim R]

What is the proper way to add field objects at runtime to an incomplete, i.e. only partially defined, dataSource schema model fields object?  While some of the model fields will be pre-defined as part of the grid configuration, some of the column-names of the grid will be based on fields that are not known at design-time; they will be the names of employees in a department, and so they are not known until the department is selected by the user. So fields have to be added to the model, and corresponding columns have to be added to the grid at runtime.

Date..........Tom...........Dick..............Harry..............Jane...............Liz
1/1/2013......90.............180...............23.....................65..................50
1/2/2013......65.............210...............19.....................99..................28
1/3/2013......25.............100...............89.....................54..................22
.
.
.
1/31/2013

or a different department:

Date..........Ralph.........Delores.......Fred.
1/1/2013......19.............120...............41
1/2/2013......57.............315...............29
1/3/2013......21.............246...............63

[Alexander Valchev]

Hi Tim,

I am afraid that what you would like to achieve is not supported out of the box. Grid column and DataSource's model are set once during the initialization of the component and cannot be changed at runtime.

I can suggest a few alternative solutions:

1. Destroy the old Grid and re-create it with the new settings. (destroy method)
2. Retrieve the model and column settings via separate Ajax request. At the success event of this request you can build a Grid with the received settings.
3. Use grid with auto-generated columns and setDataSource method to rebind the grid. Here is an example: http://jsbin.com/iqezov/2/edit
   
   Note: this is kind of a 'hack' and may cause unexpected behaviour in some cases. In works only when you use auto generated columns, and the DataSource returns only the columns to be shown. Also in this way it is not possible to define format, template, etc.
   
   If you need a reliable solution that will allow you to use the full Grid functionality, I advise you to choose #1 approach.
   
   

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Tim R]

EDIT:  

grid.wrapper.html("");

is the silver bullet. :-)  It would help to have a little note to this effect in the API docs.

 Dynamically changing columns at runtime as shown below DOES work if the line above is added after invoking grid.destroy()

Yeah, baby.

~~~~~~~~~~~
I tried option #2 since auto-generate won't work for me.   I configure fields and columns dynamically by fetching the employees from the chosen department.  It works  beautifully, but only on the first invocation.

function configureGrid(PIVDATA) {      

        $("#grid").kendoGrid({

            dataSource: {

                data:[] ,

                schema: {

                    model: {

                        fields: configureFields()  /* dynamic: AJAX from database */

                    }

                }

            },  

            groupable: false,            

            sortable: true,

            filterable: false,

            resizable: true,

            height: 777,

            columns: configureColumns()   /* dynamic: AJAX from database */

        });

 

    var grid = $('#grid').data('kendoGrid');

    grid.dataSource.data(PIVDATA);

        

}

Kendo grid does not like to have its fields and columns collections changed at runtime.  Vestiges remain after a destroy().

               var existingGrid = $('#grid').data('kendoGrid');
               existingGrid.destroy();
               // call to database
              configureGrid(NEW DATA);

Even if I do with destroy() before calling configureGrid, the grid codes crashes here in the minified code:

       n.thead.find("th:not(.k-hierarchy-cell,.k-group-cell)").each(function(o){t=i[o],t.sortable!==!1
       t is undefined.

if the change-of-department brings back fewer columns than the previous time.  If the change of department brings back MORE employee-columns, code doesn't crash, but the column-names from the previous department stick around and are not replaced with the new set.

What is the proper way to remove() kendo grid from DOM after destroy()?

[Alexander Valchev]

Hello Tim,

Destroy method of the widgets does not remove their mark-up from the DOM. This is written in the docs (link).
Destroy method is intended to detach all event handlers and remove jQuery.data attributes to avoid memory leaks. The developer should remove the generated mark-up manually - with the html, empty or remove methods.

Regards,
Alexander Valchev
the Telerik team

[Tim R]

I saw the note in the docs about destroy() method not removing the grid from the DOM, and reading that, I did try remove() but remove() did not work.  Setting html to "" did work.