jqxTreeGrid: Selecting multiple rows very very slow

[baderaParticipant]

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

[adminKeymaster]

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/

[baderaParticipant]

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

[adminKeymaster]

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/

[Author]

Posts