Search code examples
javascriptjqueryslickgrid

SlickGrid: sorting after reordering doesn't work


In SlickGrid you can enable row reordering (drag and drop). See http://mleibman.github.io/SlickGrid/examples/example9-row-reordering.html

My problem is that once I reorder a row (e.g. put row 3 above row 1) I can't sort the entries anymore. If a column is named "date" and I click on that column, nothing happens. On the other hand, if I do not reorder the rows manually and then sort by column, it works.

I don't mind that the "sort by column" will destroy my manual order. I just want to keep the option to sort it by column after the reorder.

Any tips are appreciated.

(I am using SlickGrid because there's a nice fork which features sticky rows/columns. I haven't found this feature elsewhere, so it's my only option)


Solution

  • When the grid is manually reordered the function subscribed to moveRowsPlugin.onMoveRows is executed. This function is calling grid.setData(data) to update the reordered rows onto the grid. Calling grid.setData(data) overrides the DataView and directly sets the data on the grid. Updates made to the DataView (e.g. sorting) are therefore no longer reflected on the grid.

    To resolve this change grid.setData(data) to dataView.setItems(data) in the function subscribed to moveRowsPlugin.onMoveRows (line 364 of the inline JavaScript). I'd also recommend clearing the sort fields so the sort indicator is removed.

    //Set updated data in DataView
    dataView.setItems(data);
    
    //Clear sort columns
    grid.setSortColumns([]);