The other day I noticed poor performance of a JQXGrid when combined with knockout. I had an
ko.ObservableArray() with objects. Each object contains only 3
ko.observable(). I was using JQXGrid’s selection check-box on each row. Event-handlers were established to react to changes in the check-box and set one of the
ko.observable() in the the corresponding object in the array.
On my page I was displaying the following:
- The JQXgrid
- A HTML table using the knockout
foreachbinding. This table displayed a checkbox for 1 of the observables and static text for the other one
- A string representation of the ViewModel using
data-bind="text: JSON.stringify(ko.toJS(MyViewModel), null, 4)"
When I increased the number of object in the array, just modifying one check-box caused the UI to slowdown to unacceptable levels.
|Items in array||Time to complete one click (ms)||Time to select all (ms)|
When we graph this, you can see a clear O(n^2) performance bottleneck:
I wanted to change the grid’s
source property to use a dataAdapter, However, that did render the table, but each colunm had no value. This is detailed in link where they say:
March 30, 2012 at 12:53 pm It is currently not possible to bind the grid datafields to observable properties. Could you send us a sample view model which demonstrates the required functionality, so we can create a new work item and consider implementing the functionality in the future versions? Looking forward to your reply. Best Wishes, Peter