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

Destroy recreate grid with different columns

3 Answers 1709 Views

Grid

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

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

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});

};