slickgrid select rows while filter is on forgets p

Question

I have a large list where I've implemented filtering. I'd like to user to be able to select some rows, filter the list, select a few more, change the filter, select more, and have all of the selections remain.

I am following this example: http://mleibman.github.com/SlickGrid/examples/example4-model.html

Follow these steps to see my problem:

1. Click on the 0 row
2. Shift-click on the 10 row. Rows 0 through 10 are selected now.
3. Move the slider up to about 90%, so only a few of the rows 0 - 10 show. (For me, 2, 6, and 8 still show and are still selected.)
4. Ctrl-click on an un-selected row (for me, row 29)
5. Slide the filter back down to zero.

Now this issue is seen. For me, only rows 2, 6, 8, and 29 are selected. I would prefer that 0 through 10 and 29 remain selected. Is there an option to get this behavior? If not, can someone recommend an approach that might work?

Answer 1

This problem has been solved on Github.

• First, add a variable to store id.
  • var selectedIds=[];
• Second, modifiy syncGridSelection
  • DataView.syncGridSelection(grid, true, true, function(syncIds) { selectedIds = syncIds;});

Answer 2

The trick is to:

1. Save some indication for every selected row
2. As you build the filtered data, note which lines are selected in an array
3. Call "setSelectedRows" after "setGridData"

Here is code that does it.

// filter grid without harming selection
// grid: a SlickGrid Object
// filter: a function that receieves a "data row" and returns true if it meets the filter
function filterGrid(grid,filter) {
    var oldline;
    var olddata=grid.getData();
    var oldselection=grid.getSelectedRows()

    var newline=0;
    var newdata=[];
    var newselection=[];

    for (oldline=0; oldline<olddata.length ; oldline++ ) {
      if (filter(olddata[oldline]) {
        newdata.push(olddata[oldline]);
        if (oldselection.indexOf(oldline)>-1) { // note on condition: ECMA5 - in IE8 you will need to loop
          newselection.push(newline);
          newline++;
        }
      }
    }

    grid.setData(newdata);
    grid.setSelectedRows(newselection);
    grid.updateRowCount();
    grid.render();      
}

Note that this code DOES NOT preserve selected rows which do not pass the filter.