Row Selection

index

• Single Row Selection
• Unsubscribe Events
• Multiple Row Selections
• Mixing Single & Multiple Row Selections

Description

For row selection, you can simply play with couple of grid options (see below) and subscribe to onSelectedRowsChanged (a SlickGrid Event that is, it's not an Observable). However please note that onSelectedRowsChanged is a function available on the Grid object and you will need bind to (gridChanged) to get the object when grid is ready. There are 2 types of row selection(s) which you can do.

Demo

Demo Page / Demo Component

Single Row Selection

For a single row selection, you need to enableCellNavigation and enableRowSelection to True and as describe earlier, subscribe to onSelectedRowsChanged (for that you need to bind to (gridChanged)).

View

<angular-slickgrid gridId="grid4"
      (onGridCreated)="gridReady($event)"
      [columnDefinitions]="columnDefinitions"
      [gridOptions]="gridOptions"
      [dataset]="dataset">
</angular-slickgrid>

Component

this.gridOptions = {
  enableAutoResize: true,
  enableCellNavigation: true,
  enableCheckboxSelector: true,
  enableRowSelection: true
}

gridReady(grid) {
  grid.onSelectedRowsChanged.subscribe((e, args) => {
    if (Array.isArray(args.rows)) {
      this.selectedObjects = args.rows.map(idx => {
        const item = grid.getDataItem(idx);
        return item.title || '';
      });
    }
  });
}

Unsubscribe

Don't forget to unsubscribe any Event including Slickgrid Events.

ngOnDestroy(): void {
    // unsubscrible any Slick.Event you might have used
    // a reminder again, these are SlickGrid Event, not RxJS events
    this.gridObj.onSelectedRowsChanged.unsubscribe();
}

Multiple Row Selections

As for multiple row selections, you need to provide an extra grid option of rowSelectionOptions which is an object and within it, you need to disable the selectActiveRow flag. The other configurations are the same as a Single Selection, which is to enable enableCheckboxSelector and enableRowSelection. Then as describe earlier, you will subscribe to onSelectedRowsChanged (for that you need to bind to (gridChanged)).

View

<angular-slickgrid gridId="grid4"
      (gridChanged)="gridReady($event)"
      [columnDefinitions]="columnDefinitions"
      [gridOptions]="gridOptions"
      [dataset]="dataset">
</angular-slickgrid>

Component

export class Example1 implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    // unsubscrible any Slick.Event you might have used
    // a reminder again, these are SlickGrid Event, not RxJS events
    this.gridObj.onSelectedRowsChanged.unsubscribe();
    this.gridObj.onClick.unsubscribe();
  }

  ngOnInit() {
    this.gridOptions = {
      enableAutoResize: true,
      enableCellNavigation: true,
      enableCheckboxSelector: true,
      enableRowSelection: true,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        // Default to True when no "rowSelectionOptions" provided
        selectActiveRow: false
      },
    }
 }

  gridReady(grid) {
    this.gridObj = grid;

    grid.onSelectedRowsChanged.subscribe((e, args) => {
      // user clicked on the 1st column, multiple checkbox selection
      console.log('multiple row checkbox selected', event, args);
    });
}

Mixing Single & Multiple Row Selections

SlickGrid is so powerful and customizable, you could if you wish mix the multiple row selections (cell column 1) and single row selection (any other cell click). For that though, you will need to use 2 SlickGrid Events (onClick and onSelectedRowsChanged). For example with a delegate we can do it this way:

View

<angular-slickgrid gridId="grid4"
      (onGridCreated)="gridReady($event)"
      [columnDefinitions]="columnDefinitions"
      [gridOptions]="gridOptions"
      [dataset]="dataset">
</angular-slickgrid>

Component

export class Example1 implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    // unsubscrible any Slick.Event you might have used
    // a reminder again, these are SlickGrid Event, not RxJS events
    this.gridObj.onSelectedRowsChanged.unsubscribe();
    this.gridObj.onClick.unsubscribe();
  }

  gridReady(grid) {
    this.gridObj = grid;

    grid.onSelectedRowsChanged.subscribe((e, args) => {
      // user clicked on the 1st column, multiple checkbox selection
      console.log('multiple row checkbox selected', event, args);
    });

    grid.onClick.subscribe((e, args) => {
      // when clicking on any cell, we will make it the new selected row
      // however, we don't want to interfere with multiple row selection checkbox which is on 1st column cell
      if (args.cell !== 0) {
        grid.setSelectedRows([args.row]);
      }
    });
  }
}