jqxgrid is very slow to update after modifying many records in View Model (knockout)

[pja1Participant]

We are new to jqx Grid, but have been very impressed so far.  However we have encountered a significant performance issue when we update underlying data which we can’t work out how to overcome.

We have a jqxgrid using bound to a knockout observable array via a data adapter. We have a small number of columns showing, and a single editable checkbox field bound to a Boolean observable.

The initial load of the grid is triggered after we retrieve data from the server and map to the view model.  The speed of this is ok (grid rendering is not noticeable when there are approx 100 records), however when we click on the checkbox, there is a small, but noticeable delay of about half a second when updating the grid (the checkbox doesn’t change state right away).

However if we update the boolean value of all the underlying records at once via a method  in the viewmodel (viewModel.updateExportToXero), then there is a long delay  while the grid refreshes (20 seconds for 100 records).  The browser seems to hang.  This gets worse the more records that are updated and we sometimes get a script time out.
I have tried putting

$(“#jqxgrid”).jqxGrid(‘beginupdate’);

before we update the viewmodel and then

$(“#jqxgrid”).jqxGrid(‘resumeupdate’);

when we have completed, however that didn’t make a difference.

There is nothing else being triggered on the update of this field in the grid or in the viewmodel.  For comparison I have tried using a normal knockout html binding with a checkbox in a html list (ie. no jqxGrid at all) and this is extremely fast (even with 500+ records its < 1 second).  We have also tried changing the checkbox to a textbox in jqxgrid and this didn’t make any difference; was still extremely slow to update.  500 records might take 60 seconds.  Tested same with ie10 and FF20.0.1

I tried removing the localisation that we were applying (date formatting), but this didn’t make any difference.

If I don’t display the check box field in the grid and also remove it from the dataadapter, then there is no delay.  If the field is still listed in the dataadapter, then there is a big delay.

Here is the code we are running:

viewModel.updateExportToXero = function () {
ko.utils.arrayForEach(this.items(), function (item) {
item.ExportToXero(true);
}
}

viewModel.createJqxGrid = function () {

var dataSourceInvoices = {
localdata: viewModel.items,
datafields: [
{ name: ‘ExportToXero’ },
{ name: ‘OkToExport’ },
{ name: ‘InvoiceNumber’ },
],
datatype: ‘observablearray’
}

var invoiceColumns = [
{ text: ‘Export’, dataField: ‘ExportToXero’, editable: true, width: 50, columntype: ‘checkbox’},
{ text: ‘Invoice#’, dataField: ‘InvoiceNumber’, editable: false, width: 80},
{ text: ‘Date’, dataField: ‘InvoiceDate’, editable: false, cellsformat: ‘d’, width: 100 },
];

$(“#jqxgrid”).jqxGrid({
source: dataSourceInvoices,
width: ‘100%’,
columns: gridColumns,
height: 500,
theme: ‘ui-redmond’,
editable: true,
sortable: true,
columnsresize: true,
showaggregates: true,
showstatusbar: true,
statusbarheight: 30,
selectionmode: ‘singlerow’
});

}

viewModel.updateExportToXero = function () {
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
ko.utils.arrayForEach(this.items(), function (item) {
item.ExportToXero(true);
}
$(“#jqxgrid”).jqxGrid(‘resumeupdate’);
}

I can work up a proper example with some test data (apologies for the poor formatting of this code), but I wondered if there was anything you could suggest I look at first (we are a bit rushed for time).  It seems like we are missing something obvious here and any help would be much appreciated.

 

 

 

 

[Peter StoevKeymaster]

Hi,

If you update multiple records at ones and use the Grid with KO binding, use the adapter’s beginUpdate and endUpdate methods before and after the operation. Otherwise, you will end up with Refreshes equal to the number of updates.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[pja1Participant]

Thanks for the reply. That worked brilliantly. 600+ records updated and refreshed in under 1 second. We also used this technique to speed up the initial display of the grid when retrieving records from the server.

We changed viewModel.updateExportToXero to be
viewModel.updateExportToXero = function () {
dataAdapter.beginUpdate();
ko.utils.arrayForEach(this.items(), function (item) {
item.ExportToXero(true);
}
dataAdapter.endUpdate();
}

FYI, the code I put in the initial post was an untested cut down version of what we are actually using. I noticed that I hadn’t declared the dataadapter in the above code, which I thought I’d correct here for the benefit of anyone else looking at this who is new to jq Widgets.

viewModel.updateExportToXero = function () {
ko.utils.arrayForEach(this.items(), function (item) {
item.ExportToXero(true);
}
}

viewModel.createJqxGrid = function () {

var dataSourceInvoices = {
localdata: viewModel.items,
datafields: [
{ name: ‘ExportToXero’ },
{ name: ‘OkToExport’ },
{ name: ‘InvoiceNumber’ },
],
datatype: ‘observablearray’
}

var invoiceColumns = [
{ text: ‘Export’, dataField: ‘ExportToXero’, editable: true, width: 50, columntype: ‘checkbox’},
{ text: ‘Invoice#’, dataField: ‘InvoiceNumber’, editable: false, width: 80},
{ text: ‘Date’, dataField: ‘InvoiceDate’, editable: false, cellsformat: ‘d’, width: 100 },
];

var dataAdapter = new $.jqx.dataAdapter(dataSourceInvoices);

$(‘#jqxgrid’).jqxGrid({
source: dataAdapter,
width: ’100%’,
columns: gridColumns,
height: 500,
theme: ‘ui-redmond’,
editable: true,
sortable: true,
columnsresize: true,
showaggregates: true,
showstatusbar: true,
statusbarheight: 30,
selectionmode: ‘singlerow’
});
}

viewModel.updateExportToXero = function () {
dataAdapter.beginUpdate();
ko.utils.arrayForEach(this.items(), function (item) {
item.ExportToXero(true);
}
dataAdapter.endUpdate();
}

[pja1Participant]

We have also found that having Firebug open can cause grid updates to take a long time.

[Peter StoevKeymaster]

Hi,

It is normal that if Firebug is opened, the page will be slower than normal, because Firebug is a Debugging Tool.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts