$("#listbox").jqxListBox('checkAll') Crashing page more than 1000 items

[PBDeveloperParticipant]

Hola,

We are currently implementing the ‘listbox’ functionality to show a list of students that could potentially be emailed. When a user clicks a ‘select/unselect all’ button, instead of rendering the list with every item/student check-marked, the page completely crashes and its unusable. This occurs for any listbox that contains more than 1000 records. Smaller sets don’t have a problem and the checkmark is rendered next to every student/item.

Firefox error logs reflect the following errors when the page crashes:

——————————START FIREFOX ERROR————————–
_updateInputSelection@http://myDomain.com/JqWidgets/jqwidgets/jqxlistbox.js:7:39729
_raiseEvent@http://myDomain.com/JqWidgets/jqwidgets/jqxlistbox.js:7:76557
checkIndex@http://myDomain.com/JqWidgets/jqwidgets/jqxlistbox.js:7:31881
a.jqx.invoke@http://myDomain.com/JqWidgets/jqwidgets/jqxcore.js:14:56922
a.jqx.jqxWidgetProxy@http://myDomain.com/JqWidgets/jqwidgets/jqxcore.js:14:61983
a.jqx.jqxWidget/a.fn[g]/<@http://myDomain.com/JqWidgets/jqwidgets/jqxcore.js:14:67900
each@https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:2571
each@https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:1238
a.jqx.jqxWidget/a.fn[g]@http://myDomain.com/JqWidgets/jqwidgets/jqxcore.js:14:67873
@http://myDomain.com/pba/myUsers/emailStudents/:909:5
each@https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:2571
@http://myDomain.com/pba/myUsers/emailStudents/:905:4
dispatch@https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:41720
add/y.handle@https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:39774
——————————END FIREFOX ERROR————————–

$('#jqxSelectAll').on('click', function () {
  var items = $("#listbox").jqxListBox('getCheckedItems');
  if (items.length > 0) {
    $("#listbox").jqxListBox('uncheckAll');
  } else {
    $("#listbox").jqxListBox('checkAll');
  }
});

Using the Google Developers tool’s console and running $(“#listbox”).jqxListBox(‘uncheckAll’); OR $(“#listbox”).jqxListBox(‘checkAll’); on a large result set is enough to break the page.

What can I do?

Thanks,
~ PBDeveloper

[HristoParticipant]

Hello PBDeveloper,

Could you provide your example for testing purpose?
I would like to suggest you an option that you could transform the jqxGrid to looks like a jqxListBox.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PBDeveloperParticipant]

Hello Hristo,

I saw the example that you provided where the jqxGrid is used instead of the jqxListbox. The grid is a different JQX plugin than that of the listbox:

1. Does this mean that the jqxListBox cannot handle a volume of items bigger than 2,000 and the jqxGrid should be used instead?
2. As for my example:

$('#jqxSelectAll').on('click', function () {
  var items = $("#listbox").jqxListBox('getCheckedItems');
  if (items.length > 0) {
    $("#listbox").jqxListBox('uncheckAll');
  } else {
    $("#listbox").jqxListBox('checkAll');
  }
});

3. Is there something I can do with the jqxListBox that will allow it to handle more items? Perhaps wire it differently etc. The issue is really tied to volume from my observation because the functionality works just fine as long as its with a small number.

[HristoParticipant]

Hello PBDeveloper,

There has a lot of elements that should be loaded initially and that cause this slow loading.
Also, I tested one jqxListBox with more than 3200 records and it seems to work fine (with checkboxes).
You could try to load data via jqxDataAdapter from the database.

The jqxGrid provide a lot of options and you could modify it in the desired way.
Please, take a look at this example: https://jseditor.io/?key=jqxgrid-as-a-jqxlistbox

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts