Checkbox selection and groups

[rokslide@gmail.comParticipant]

I’ve been working on some code to do checkbox selections within groups and have something that largely works. The selection of the rows works but I still need to implement the partial checking of the group level checkbox nad the selection process is very slow.

I tracked the slowness down to this line of javascript

 $('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getrowboundindexbyid', boundIndex));

which takes between 300-500+ milliseconds

Is there a better/faster method of doing this selection?

Alternatively, is there a built in method that I have missed that enables the selection of groups using checkboxes? At the moment I am using the grouprender to create a custom checkbox and using jquery to programatically identify the child rows of the group.

Any assistance would be greatly appreciated.

[DimitarParticipant]

Hello rokslide@gmail.com,

Are you sure this time is for one call of this line of code? We benchmarked the method selectrow using the following example: http://jsfiddle.net/jqwidgets/FQxrf/ and it takes about 3ms for one call. If you wish, you can post a larger part of your code and we will tell you if it can be optimized somehow.

Best Regards,
Dimitar

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

[rokslide@gmail.comParticipant]

Below is a larger snippet of the code I am using. The console.time and console.timeEnd functions are built in features for Firefox to collect performance stats. I’m going to do some profiling in Chrome shortly and will let you know how that looks.

    while (inGroup) {
        if (isGrouping(nextRow) && !isGrouping(thisRow)) {
            var thisGroupLevel = getGroupLevel(nextRow);
            if (thisGroupLevel <= groupLevel) {
                inGroup = false;
            } else {
                thisRow = nextRow;
                toggleRowCheckbox(thisRow, isChecked);
            }
        }
        else {
            thisRow = nextRow;
            //var paymentId = thisRow.children('div.PaymentID').children('span').text();
            console.time("get rowid time");
            var irow = parseInt(thisRow.children('div.PaymentID').children('span').attr("rowid"));
            console.timeEnd("get rowid time");
            //var irow = boundRows.map(function (d) { return d['PaymentID']; }).indexOf(parseInt(paymentId));
            console.time("boundIndex time");
            var boundIndex = $('#jqxgrid').jqxGrid('getrowboundindexbyid', irow);
            console.timeEnd("boundIndex time");
            console.time("selectrow time");
            $('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getrowboundindexbyid', boundIndex));
            console.timeEnd("selectrow time");
        }
        nextRow = thisRow.next('div[role="row"]');
        if (typeof nextRow === 'undefined') {
            inGroup = false;
        }

        //toggleCheckBox(elem, isChecked);
    }

Essentially we find what grouping level we are at and we start walking through the rows under that grouping level selecting them if the grouping level is greater than the initial grouping level (eg. more nested). I thought my delay was initially around the manner I was walking through the rows but it looks like this is not the case as the output to the console looks like this…

get rowid time: 0.17ms PaymentViewer.js (line 98)
boundIndex time: 0.01ms PaymentViewer.js (line 102)
selectrow time: 677.29ms PaymentViewer.js (line 105)
get rowid time: 0.18ms PaymentViewer.js (line 98)
boundIndex time: 0.08ms PaymentViewer.js (line 102)
selectrow time: 426.94ms PaymentViewer.js (line 105)
get rowid time: 0.18ms PaymentViewer.js (line 98)
boundIndex time: 0.08ms PaymentViewer.js (line 102)
selectrow time: 460.62ms PaymentViewer.js (line 105)
get rowid time: 0.18ms PaymentViewer.js (line 98)
boundIndex time: 0.12ms PaymentViewer.js (line 102)
selectrow time: 448.90ms PaymentViewer.js (line 105)

This might be something to do with having the select mode set to checkbox. I haven’t been able to catch the times for this, but when we tick or untick a checkbox it does appear fairly slow. Having said that, using the “select all” checkbox in the header ticks all boxes in about the same time as a single tick box.

The grid itself has 300 or so rows with multiple grouping levels which also might have an effect, but I would be a bit surprised if this was the case.

Does the selection of a row alter the bound data? If it does it might be faster to update the underlying bound data for all rows and then do a single refresh of the grid or something similar.

Thanks,
Shaun

[rokslide@gmail.comParticipant]

So it looks like the delay is directly related to the number of records.

With 7 rows, the select row takes about ~9ms

With 18 rows, the select row time jumps up to ~17ms

With 79 rows, the select row time jumps up to ~50ms

The “select all” checkbox still performs within a second….

[DimitarParticipant]

Hello Shaun,

Unlike the “select all” checkbox, your functionality is not built-in and performance slowdown can be expected when dealing with a large amount of rows. The only suggestion I can give you is to make sure you are using the latest version of jQWidgets (4.1.1), because widget optimizations are constantly introduced in new releases.

To answer your other question – row selection does not alter the grid’s data.

Best Regards,
Dimitar

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

[rokslide@gmail.comParticipant]

Thanks Dimitar.

Understand that the functionality is not built in, shame really…

I’ve managed to find a workable solution…

var selectedrowindexes = $('#jqxgrid').jqxGrid('selectedrowindexes');
while (inGroup) {
        if (isGrouping(nextRow) && !isGrouping(thisRow)) {
            var thisGroupLevel = getGroupLevel(nextRow);
            if (thisGroupLevel <= groupLevel) {
                inGroup = false;
            } else {
                thisRow = nextRow;
                toggleRowCheckbox(thisRow, isChecked);
            }
        }
        else {
            thisRow = nextRow;
            //var paymentId = thisRow.children('div.PaymentID').children('span').text();
            console.time("get rowid time");
            var irow = parseInt(thisRow.children('div.PaymentID').children('span').attr("rowid"));
            console.timeEnd("get rowid time");
            //var irow = boundRows.map(function (d) { return d['PaymentID']; }).indexOf(parseInt(paymentId));
            console.time("boundIndex time");
            var boundIndex = $('#jqxgrid').jqxGrid('getrowboundindexbyid', irow);
            console.timeEnd("boundIndex time");
            console.time("selectrow time");
            //$('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getrowboundindexbyid', boundIndex));
            selectedrowindexes.push($('#jqxgrid').jqxGrid('getrowboundindexbyid', boundIndex));
            console.timeEnd("selectrow time");
        }
        nextRow = thisRow.next('div[role="row"]');
        if (typeof nextRow === 'undefined') {
            inGroup = false;
        }

        //toggleCheckBox(elem, isChecked);
    }

    $('#jqxgrid').jqxGrid({ selectedrowindexes: selectedrowindexes });
    $('#jqxgrid').jqxGrid('refresh');
}

[Author]

Posts