Hello,
I've been playing around with the new MVVM framework and ran into some interesting behavior when a Grid is bound to a ViewModel property and that view model property is changes from a source outside the grid. Basically, I have a ViewModel which contains an array of people. There are input fields that let you add new people and the added people are displayed using a Grid. Initially this works fine, you are able to add new entries and even delete entries using the in-built grid "destroy" functionality. The problem arises when you try to populate the people array from an external source (for example an xhr request). The people array is indeed updated but from that point on, the Grid no longer updates when new people are added. I put togather a simple fiddle (Weird Grid Fiddle) to illustrate. I included a simple kendo template below to grid to show that the underlying viewModel (people array) is still being updated even after the Grid stops refreshing. To add to the weirdness, the "Delete" functionality of the grid still works even after the grid itself stops refreshing itself with the changes to the ViewModel. I tried to manually call some "refresh" looking methods on the grid and underlying datasource after loading the external people but none of them seemed to work. Any explanations? Thanks in advance
Sean
I've been playing around with the new MVVM framework and ran into some interesting behavior when a Grid is bound to a ViewModel property and that view model property is changes from a source outside the grid. Basically, I have a ViewModel which contains an array of people. There are input fields that let you add new people and the added people are displayed using a Grid. Initially this works fine, you are able to add new entries and even delete entries using the in-built grid "destroy" functionality. The problem arises when you try to populate the people array from an external source (for example an xhr request). The people array is indeed updated but from that point on, the Grid no longer updates when new people are added. I put togather a simple fiddle (Weird Grid Fiddle) to illustrate. I included a simple kendo template below to grid to show that the underlying viewModel (people array) is still being updated even after the Grid stops refreshing. To add to the weirdness, the "Delete" functionality of the grid still works even after the grid itself stops refreshing itself with the changes to the ViewModel. I tried to manually call some "refresh" looking methods on the grid and underlying datasource after loading the external people but none of them seemed to work. Any explanations? Thanks in advance
Sean
1 Answer, 1 is accepted
0
Sean
Top achievements
Rank 1
Rank 1
answered on 27 Apr 2012, 04:28 PM
Just an update to this issues. I was able to get it working by changing the loading logic from :
To:
Basically I just added the entries to the existing array instead of replacing it. I would still really like to understand why the previous logic caused the Kendo Grid to stop responding though. Is this a bug or is there some fundamental aspect about kendo databinding that I'm missing? Any help would be greatly appreciated.
var externalPeople = [{name:"John", age:"33"}, {name:"Jones", age:"32"}];this.set("people", externalPeople);To:
var externalPeople = [{name:"John", age:"33"}, {name:"Jones", age:"32"}];var existingPeople = this.get("people");$.each(externalPeople, function(i, person) { existingPeople.push(person); });Basically I just added the entries to the existing array instead of replacing it. I would still really like to understand why the previous logic caused the Kendo Grid to stop responding though. Is this a bug or is there some fundamental aspect about kendo databinding that I'm missing? Any help would be greatly appreciated.