[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');
}

[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….

[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

[Author]

Posts