sgOnSelectedRowsChanged() event emitted multiple times when used with draggable grouping Angular-slickgrid

Question

Draggable grouping and check box selector are enabled. If we click the select all checkbox when the grid is grouped with some column(s), the sgOnSelectedRowsChanged() event is emitted multiple times until all the selected check-boxes become deselected. This happens within a fraction of a second, so that it appears that the select-all option does not work. But the single select check-box works fine.

This issue can be recreated in the draggable grouping slick-grid demo.

enableCheckboxSelector: true in gridOptions.
HTML

<angular-slickgrid gridId="grid19"
    [dataset]="dataset"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    (onAngularGridCreated)="angularGridReady($event)"
    (sgOnSelectedRowsChanged)="SelectedRows($event, $event.detail.args)">
  </angular-slickgrid>

SelectedRows() in TS.

public selectedRows = [];

SelectedRows(e, args) {
    console.log("args", args)
    this.selectedRows = [];
    if (Array.isArray(args.rows)) {
      this.selectedRows = args.rows.map(res => {
        const item = this.gridObj.getDataItem(res);
        return item;
      });
    }
  }

ghiscoding · Answer 1 · 2020-08-12T15:11:19.250

It might not be ideal to use both of these features together, you'll probably have to do some tricks to get them working together. The best way to understand what is happening is to look at the SlickGrid (core lib) plugin code, in this case it's slick.draggablegrouping.js and we can see that while calling the method updateGroupBy() when grouping, it calls dataView.setGrouping([]); and that explains why your selection becomes empty.

The best chance you have to get a working solution is like I said to trick the lib a little bit. You'll have to find a way to get the selection before the Draggable Grouping kicks in, meaning that you'll want to get the selection before dataView.setGrouping([]); gets called. Unfortunately, that plugin only has a onGroupChanged event and we would like to have a onBeforeGroupChanged event for that work.

possible solution, create a Pull Request on the 6pac/SlickGrid fork to add in a onBeforeGroupChanged event in the slick.draggablegrouping.js. I strongly suggest you to do it, this will help the community
similar to option 1) but instead add a new onBeforeSetGrouping event in a onBeforeGroupChanged event in the slick.dataview.js.
in the DataView I see a onBeforePagingInfoChanged that I think is called during the process of the setGrouping(), if it happens before the grouping is done you might get lucky and be able to pull the getSelectedRows() before the onSelectedRowsChanged, you'll have to try.
if you're calling the grouping via a button then you are the one calling setDroppedGroups and so you can take a copy of the selection before applying the group

I tried to find an event that is triggered before the selection, but I couldn't find anything (though I checked very quickly in the source). I know that we use the slick.rowselectionmodel.js (Row Selection Method) but even that one only has an event of onSelectedRangesChanged which again is after the fact while we need an event that happens before the grouping/selection changes.

So your best bet is to first try Option 3) and if that doesn't work then I strongly suggest you to contribute and do Option 1) and/or 2) (you can add both). If do decide to create a PR then just reference this SO Answer to your PR. Good luck.

... oh and BTW, I'm the author of Angular-Slickgrid and as you can see Angular-Slickgrid highly depends on the core lib SlickGrid (6pac fork), in your use case the issue is with the core lib itself not Angular-Slickgrid.

sgOnSelectedRowsChanged() event emitted multiple times when used with draggable grouping Angular-slickgrid

1 Answers1