Combing Slickgrid example 4 and example 9 (adding row reordering to dataview)

Question

I'm trying to figure out how to combine Slickgrid's example 4 and example 9. Basically adding row reordering to a dataview grid. So far I have row reordering working as long as there is only one page in the grid. With multiple pages, row reordering works only on the first page and on any other pages, rows can be dragged up or down, but will not reorder.

example 4: https://github.com/mleibman/SlickGrid/blob/master/examples/example4-model.html

example 9: https://github.com/mleibman/SlickGrid/blob/master/examples/example9-row-reordering.html

Any ideas? Thanks so much!

Here is the row reordering code I have on my dataview grid:

//Re-order rows on drag
var moveRowsPlugin = new Slick.RowMoveManager({});
moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, inboxData) {
for (var i = 0; i < inboxData.rows.length; i++) {
// no point in moving before or after itself
if (inboxData.rows[i] == inboxData.insertBefore || inboxData.rows[i] == inboxData.insertBefore - 1) {
    e.stopPropagation();
    return false;
  }

}
return true;
});

moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
var extractedRows = [], left, right;
var rows = args.rows;
var insertBefore = args.insertBefore;
left = inboxData.slice(0, insertBefore);
right = inboxData.slice(insertBefore, inboxData.length);

rows.sort(function(a,b) { return a-b; });

for (var i = 0; i < rows.length; i++) {
  extractedRows.push(inboxData[rows[i]]);
}

rows.reverse();

for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  if (row < insertBefore) {
    left.splice(row, 1);
  } else {
    right.splice(row - insertBefore, 1);
  }
}

inboxData = left.concat(extractedRows.concat(right));

var selectedRows = [];
for (var i = 0; i < rows.length; i++)
  selectedRows.push(left.length + i);

inboxGrid.resetActiveCell();
inboxDataView.setItems(inboxData);
inboxGrid.setSelectedRows(selectedRows);
inboxGrid.render();


 });

inboxGrid.registerPlugin(moveRowsPlugin);
//End re-order rows

Amir Geri Amir Geri · Accepted Answer · 2014-04-08T15:11:06

I'm not sure, but maybe these methods will help you:

inboxGrid.invalidateAllRows(); //tells the grid that all the rows has been changed and it needs to rerender them.
inboxGrid.invalidateRows(rows); // tells the grid that the specified rows has been changed and it needs to rerender them.

You also need to use beginUpdate and endUpdate when updating the dataView:

inboxDataView.beginUpdate();
inboxDataView.setItems(inboxData);
inboxDataView.endUpdate();

Hope these help.

Combing Slickgrid example 4 and example 9 (adding row reordering to dataview)

1 Answers