jQuery UI Widgets Forums Plugins AngularJS jqxTreeGrid: Selecting multiple rows very very slow

Tagged: ,

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

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

  • badera
    Participant

    I have a jqxTreeGrid, where I may have a few hundred rows. selectionModeis multipleRows (default). I need then to select programatically some of the rows – in may also be few hundrets. I have a loop, where execute selectRow with the given row id. This is very slow. Selecting 200 rows takes more than 15 seconds. What is the reason for this bad behavior? Is there a bether way to select multiple rows?

    (It may be a general jqx-tree-grid issue; I posted it here, because the sample is angularjs!)

    Here the demo:
    https://www.jseditor.io/?key=treegrid-select-multiple-columns-very-slow

    – click on ‘Insert Rows’
    – click on ‘Select Rows’
    You will see that it is not usable.

    Thanks for help/fixing this.
    – badera


    admin
    Keymaster

    Hi Badera,

    The issue here is that you invoke a rendering method 200 times in a loop. Solutions are simple.

    1. Turn on pageable: true.
    2. Use

        $scope.treeGridSettings.apply('beginUpdate');
            for (var i = 100; i < 300; i++)
              $scope.treeGridSettings.apply('selectRow', i);
     $scope.treeGridSettings.apply('endUpdate');

    Best Regards,
    Peter Stoev

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


    badera
    Participant

    Dear Peter

    Thank you very much. beginUpdate and endUpdate definitely does the trick.
    I also though about that prior writing this question here, and I tried it; but it did not work. I found the reason: I also had an expandAll before selecting. And this is even with beginUpdate and endUpdate a problem. There is somthing not proper, I think.

    demo:
    https://www.jseditor.io/?key=treegrid-select-multiple-rows-very-slow-2

    Why does this piece of code still takes > 15 seconds:

        $scope.selectWithProblem = function () {
            
            $scope.treeGridSettings.apply('beginUpdate');
            $scope.treeGridSettings.apply('expandAll');             // < before selecting
            for (var i = 100; i < 300; i++)
                $scope.treeGridSettings.apply('selectRow', i);
            $scope.treeGridSettings.apply('endUpdate');
        }
    

    And this one not:

        $scope.selectWithoutProblem = function () {
            
            $scope.treeGridSettings.apply('beginUpdate');
            for (var i = 100; i < 300; i++)
                $scope.treeGridSettings.apply('selectRow', i);
            $scope.treeGridSettings.apply('expandAll');             // < after selecting
            $scope.treeGridSettings.apply('endUpdate');
        }
    

    Why this big difference? By the way the differences even exists, if there are already all rows expanded or even, if there are all rows on same level (i.e. no hierarchy)

    Best regards,
    – badera


    admin
    Keymaster

    Hi badera,

    expandAll ends the update and you have the same scenario you had previously. I saw in your sample that you know where to call expandAll.

    Best Regards,
    Peter Stoev

    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.