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

Destroy recreate grid with different columns

3 Answers 884 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RainerAtSpirit
Top achievements
Rank 1
RainerAtSpirit asked on 11 May 2012, 06:41 PM
Hi there,

Probably me overlooking something obvious. I read a couple of threads that the grid currently can't be configured with dynamic columns on refresh. No big deal was my first reaction just destroy it and create a new one, whenever changing from one column set to the next.

However I couldn't find a destroy method on $('#grid').kendoGrid, so what would be the recommend way to completely remove an existing kendoGrid instance?

When trying things like $('#grid').removeData().empty(); or using an wrapper object to use .remove()

 $('#gridWrapper').find('div').remove().append($('<div id="grid"></div>')); I receive an error message from kendo.core stating that one the columns names are no longer defined.

So somewhere there must be some lingering data that isn't cleaned up by the process above, but I couldn't figure out where that is ...yet.
Any hints welcome :).

Thanks,

Rainer

var crudServiceBaseUrl = "../_vti_bin/listdata.svc/",
     kendo = window.kendo,
     App = window.App = {
           columMap : {
               'Tasks' : [
                   { title : "Title", field : "Title" },
                   { title : "Created", field : "Created" },
                   { title : "Created By", field : "CreatedBy.Account" }
               ],
               'Contacts' : [
                   { title : "Last Name", field : "LastName" },
                   { title : "Created", field : "Created" },
                   { title : "Created By", field : "CreatedBy.Account" }
               ]
           },
           Model : {
               gridMeta : kendo.observable({
                   listName : 'Contacts',
                   total : 0
               })
           }
       };
 
 
   App.DS = {
       sharableDataSource : new kendo.data.DataSource({
           type : "SP2010",
           serverPaging : true,
           serverSorting : true,
           serverFiltering : true,
           sort : [
               { field : "Created", dir : "desc" }
           ],
           pageSize : 40,
           transport : {
               read : {
                   url : function () {
                       return crudServiceBaseUrl + App.Model.gridMeta.get('listName')
                   },
                   dataType : "json"
               }
           },
           change : function (e) {
               App.Model.gridMeta.set('total', this.total() || 0);
           }
       })
   };
 
 
   App.createGrid = function(options) {
       var options = options || {};
       $('#grid').kendoGrid({
                  dataSource : App.DS.sharableDataSource,
                  autoBind : options.autobind || false,
                  height : 400,
                  sortable : true,
                  navigatable : true,
                  selectable : 'row',
                  scrollable : {
                      virtual : true
                  },
                  columns : App.columMap[App.Model.gridMeta.get('listName')] || []
              });
   };
// Currently KendoUI grid doesn't support column modifying of an existent grid
   App.refreshGrid = function() {
        
       $('#gridWrapper').find('div')
           .remove()
           .append($('<div id="grid"></div>'));
 
       // This throws an error when changing from one column set to another
       App.createGrid({autobind: true});
   };
 
   App.init = function () {
 
       kendo.bind($("span.total"), App.Model.gridMeta);
 
       App.createGrid();
 
       };

3 Answers, 1 is accepted

Sort by
0
RainerAtSpirit
Top achievements
Rank 1
answered on 13 May 2012, 03:43 PM
I eventually found an answer in this blog http://www.kendoui.com/blogs/teamblog/posts/12-04-24/creating_a_kendo_ui_mvvm_widget.aspx.

<quote>Since we have already bound the change event on the DataSource possibly once, we need to make sure we unbind it if neccessary. If this is not done, the widget will retain a list of all the bindings and will execute the refresh function numerous times - which is not what we want.</quote>

After updating the App.refreshGrid method all starts working as expected.

Would be great though if that would be taken care of by a native destroy method ;-).

Rainer

App.refreshGrid = function (listName) {
       var CHANGE = 'change',
           $grid = $('#grid');
 
       App.Model.gridMeta.set('listName', listName);
 
       // Unbind existing refreshHandler in order to re-create with different column set
       if ($grid.length > 0 && $grid.data().kendoGrid) {
           var thisKendoGrid = $grid.data().kendoGrid;
 
           if (thisKendoGrid.dataSource && thisKendoGrid._refreshHandler) {
               thisKendoGrid.dataSource.unbind(CHANGE, thisKendoGrid._refreshHandler);
               $grid.removeData('kendoGrid');
               $grid.empty();
           }
       }
 
       App.createGrid({autobind : true});
   };
0
joshua
Top achievements
Rank 1
answered on 15 Aug 2012, 08:33 PM
Could you please do a quick jsfiddle.... I am new to mvvm in knedo and would need a more complete picture to do this... I really need, but dont we all dont we all
0
Jason
Top achievements
Rank 1
answered on 14 Dec 2018, 05:21 PM

$grid.removeData('kendoGrid');
$grid.empty();

These two lines saved me tons of time searching. Thank you very much.

Tags
Grid
Asked by
RainerAtSpirit
Top achievements
Rank 1
Answers by
RainerAtSpirit
Top achievements
Rank 1
joshua
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Share this question
or