JQGrid - copying selected rows between grids

Question

I have two grids that I allow the user to copy rows between. For small sets, no problem, but for large datasets (5-10 thousand) I notice JQGrid is very slow. This is what I have now:

  $('#imgRightArrow').click(function ()
{
    var fromGrid = $('#fromGrid');
    var toGrid = $('#toGrid');
    var rowKeys = fromGrid.getGridParam('selarrrow');
    var j = rowKeys.length - 1;
    if (j >= 0) $('body').addClass('loading');

    (function ()
    {
        for (; j >= 0; j--)                        // - high to low to avoid id reordering
        {
            var row = fromGrid.jqGrid('getRowData', rowKeys[j]);
            toGrid.addRowData('gtp_' + rowKeys[j], row); // - add prefix to keep rowid's unique between grids
            fromGrid.delRowData(rowKeys[j]);

            if (j % 100 === 0)
            {
                $('#fromGridHeader').text(fromGrid.jqGrid('getGridParam', 'records') + ' Cards on this Order');
                $('#toGridHeader').text(toGrid.jqGrid('getGridParam', 'records') + ' Cards to be Dispatched');

                if (j === 0)        // - done
                    $('body').removeClass('loading');
                else
                {
                    j--;
                    window.setTimeout(arguments.callee); // - set a timer for the next iteration 
                    break;
                }
            }
        }
    })();
});

It's so slow that I have to use a kludge to prevent the browser from timing out.

I've tried something like this:

$('#imgRightArrow').click(function ()
{
    var fromGrid = $('#fromGrid');
    var toGrid = $('#toGrid');

    var copyData = toGrid.jqGrid('getRowData'); // - existing data
    var rowKeys = fromGrid.getGridParam('selarrrow');

    var j = rowKeys.length - 1;
    if (j >= 0) $('body').addClass('loading');

    (function ()
    {
        for (; j >= 0; j--)
        {
            copyData.push(fromGrid.jqGrid('getRowData', rowKeys[j]));
            fromGrid.jqGrid('delRowData', rowKeys[j]);

            if (j % 100 === 0)
            {
                if (j === 0)
                {
                    fromGrid[0].refreshIndex();
                    toGrid.jqGrid('clearGridData', true);
                    toGrid.setGridParam({ data: copyData });
                    toGrid[0].refreshIndex();
                    toGrid.trigger('reloadGrid');

                    $('#fromGridHeader').text(fromGrid.jqGrid('getGridParam', 'records') + ' Cards on this Order');
                    $('#toGridHeader').text(toGrid.jqGrid('getGridParam', 'records') + ' Cards to be Dispatched');
                    $('body').removeClass('loading');
                }
                else
                {
                    j--; // - manually decrement since we break
                    window.setTimeout(arguments.callee); // - set a timer for the next iteration 
                    break;
                }
            }
        }
    })();
});

...it seems faster, but deleting the rows from the fromGrid still uses delRowData, which is very slow.

Any ideas on how to accomplish this efficiently for large sets of data?

Answer 1

By pressing ctrl+c we can copy and paste the selected row using the following methods,

   $(document).ready(function () {

$('#gvMygrid').keyup(function (e) {
    var crtlpressed = false;
    var celValue = "";
    var celValue1 = "";
    var celValue2 = "";
    if (e.keyCode == 17) {
        crtlpressed = true;
    }
    if (e.keyCode == 67 && e.ctrlKey == true) {
        var myGrid = $('#gvMygrid');
        var my_array = new Array;
        my_array = $("#gvMygrid").getGridParam('selarrrow');

         for (var i = 0; i < my_array.length; i++) {

            var rowInfo = $("#gvMygrid").getRowData(my_array[i]);
            if (rowInfo != null)
                var data = JSON.stringify(rowInfo);
            var splitData = data.split('","');

         for (var j = 1; j < splitData.length; j++) {
                celValue1 = celValue1 + splitData[j].split(":")[1] + "      ";
            }
            celValue1 = celValue1 + '\r\n';
        }
        celValue2 = celValue1.replace(/"/g, '');
        celValue = celValue2.replace(/}/g, '');
        crtlpressed = false;
        copyToClipboard(celValue);
    }
    function copyToClipboard(s) {
        if (window.clipboardData && clipboardData.setData) {
            window.clipboardData.clearData("Text");
            clipboardData.setData("Text", s);
        }
    }

});  });

We are splitting the data with a four spaces in the for loop so that we can get each cells data with four spaces.

Answer 2

Any client-side operation is going to be very slow when you have thousands of rows involved. The best way to speed it up would be to do the operations server-side. For example, you could pass the ID's to the server as part of an AJAX request and then refresh the grids when the server response is received.

Alternatively, is the user really selecting five thousand rows to copy, or are they just trying to do a bulk operation such as "copy all"? Maybe you can implement such a feature to improve the overall experience, and eliminate the need to pass any ID's to the AJAX request.

Does that help?