SlickGrid multi-level grouping with group level selection

Question

I've implemented a slick grid with a custom selection model as well as a custom checkbox selection plugin. I've also added group level checkboxes to allow toggling selection at the top level. One of my requirements is that collapsed groupings are still selectable via any parent level grouping checkboxes.

My stumbling block seems to be that I can't figure out how to select rows that aren't currently visible on the group. The slick grid maintains the set of visually selected items while the grids data view maintains the full set of selected items, visible or not. However, I can't figure out how to pipe into data when clicking the group checkbox of a collapsed row.

I am configuring my grid like so:

let checkboxSelectionModel = new Slick.CheckboxSelectionModel();
this.grid.setSelectionModel(checkboxSelectionModel);

this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());

let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true);

onSelectedRowIdsChanged.subscribe(
  function(e: any, args: any)
    {
      //business logic stuff                    
    }
  );

let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({
  cssClass: "slick-cell-checkboxsel",
  onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged
});

let columns = this.grid.getColumns();
columns.unshift(groupedCheckboxSelector.getColumnDefinition());
this.grid.setColumns(columns);

this.grid.registerPlugin(groupedCheckboxSelector);

gist to custom plugins, too long to include here Specifically, if you look at line 57 of slick.checkboxselectionmodel:

$.each(dataItem.rows, function(index, groupRow) {
  var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
    if (groupRowIndex) {
      selection.push(groupRowIndex);
    }
});

groupRowIndex is never resolved for hidden rows, and so never get selected. I attempted to expand the group when clicked, then resolve the rows, which works but when the group is collapsed afterward, the wrong rows are selected in the grid.

any help would be greatly appreciated!

some notes:

• if I select a row and collapse its group, the item retains its selection
• there is a different branch of the slick grid which has an equally non-functional implementation of group selection

Answer 1

gist to updated plugins

A functional solution that I'm confident could put anyone seeking similar behavior on the right path, however, I'm not sure how well either of these plugins would work independently. one of my requirements was to only allow row selection via the row checkbox.

one gotcha (that I'm sure is easily improved) is that the group level checkbox still needs to be defined in your group format operator

the main solution to my issue was to expand all collapsed groups when making group-level selects/unselects, perform any select/unselect routines, then collapse any previously expanded groups

EDIT:

This fails when the grid has large amounts of data (10k rows). Re-opening with a bounty.

It looks like the performance hit of having to expand and collapse so many groups cause issues.