jQuery UI Widgets Forums Lists ListBox $("#listbox").jqxListBox('checkAll') Crashing page more than 1000 items

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 3 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • PBDeveloper
    Participant

    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

    • This topic was modified 3 years, 6 months ago by  PBDeveloper. Reason: Typos

    Hristo
    Participant

    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


    PBDeveloper
    Participant

    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.


    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.