RainerAtSpirit
Top achievements
Rank 1
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()
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
0
RainerAtSpirit
Top achievements
Rank 1
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
<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
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
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.