SlickGrid DataView syncGridSelection does not remove the old selection when the table changes

Question

I have a SlickGrid running with a dataView and I'm using the rowSelectionModel with the option multiSelect=false. When I select something in the grid and then expand my grid by clicking a button to show some hidden rows, the selection is moving correctly, but the old selection still remains on the old row.

This is what I have so far:

var dataView = new Slick.Data.DataView({inlineFilters: false});
var grid = new Slick.Grid(gridDiv, dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: true}));
grid.setSelectedRows([]); //make sure the selection is empty
dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidate();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(displayFilter);
dataView.endUpdate();
dataView.syncGridSelection(grid);
grid.render();

Here are some screenshots on the behavior:

Before expanding:

Expected behavior after expanding:

Actual behavior after expanding:

I'm pretty sure I'm close, but i can't quite figure out what I'm doing wrong.

Thank you in advance for taking the time to help me with this :)

EDIT: I might have found something. I'm using syncGridSelection which sets some events, but overwrite them later. The events I overwrite are dataView.onRowCountChanged() dataView.onRowsChanged() grid.onSelectedRowsChanged

might this be the issue here? I need those events to get the collapse/expand functionality to work. The grid.onSelectedRowsChanged is used to pass the selected item to a chart, so it is also required.

EDIT 2: I was able to reproduce the issue with Example 5, the modified code can be found in this paste Steps to reproduce: 1. Select item 10 2. Collapse item 7

Answer 1

Having had a look at the code, I think that is actually is working. It's just that your CSS changes have obscured one point.

There are selected row(s) and the active row. These are different things. You have set the CSS for both (in the CSS area in the page itself) to look the same. So it looks like the selection is still there when in fact it's been removed, but that row is now active.

Just delete the two CSS rules and have a look.

For extra points, use:

dataView.syncGridSelection(grid, true);

and the grid will preserve the selections as the selection moves in and out of sight on collapse/expand.