title: JQGrid - copying selected rows between grids
body: <p>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:</p>
  
  <pre><code>  $('#imgRightArrow').click(function ()
  {
      var fromGrid = $('#fromGrid');
      var toGrid = $('#toGrid');
      var rowKeys = fromGrid.getGridParam('selarrrow');
      var j = rowKeys.length - 1;
      if (j &gt;= 0) $('body').addClass('loading');
  
      (function ()
      {
          for (; j &gt;= 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;
                  }
              }
          }
      })();
  });
  </code></pre>
  
  <p>It's so slow that I have to use a kludge to prevent the browser from timing out.</p>
  
  <p>I've tried something like this:</p>
  
  <pre><code>$('#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 &gt;= 0) $('body').addClass('loading');
  
      (function ()
      {
          for (; j &gt;= 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;
                  }
              }
          }
      })();
  });
  </code></pre>
  
  <p>...it seems faster, but deleting the rows from the fromGrid still uses delRowData, which is very slow.</p>
  
  <p>Any ideas on how to accomplish this efficiently for large sets of data?  </p>