Row Selection

index

• Single Row Selection
• 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 ViewModel

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)). There are 2 ways to choose for the implementation of a row selection, option 1. is the most common option and is the recommend way of doing it.

1. with Delegate

You can also do it through a delegate since all SlickGrid events are exposed as delegate. For more info see Wiki - OnEvents - 3. delegate

View

<aurelia-slickgrid gridId="grid4"
    grid.bind="gridObj"
    columnDefinitions.bind="columnDefinitions" 
    gridOptions.bind="gridOptions" 
    dataset.bind="dataset"
    sg-on-selected-rows-changed.delegate="handleRowSelection($event.detail.eventData, $event.detail.args)">
</aurelia-slickgrid>

ViewModel

export class Example1 {
  defineGrid() {
    // define columns 
    ...
  
    // grid options
    this.gridOptions = {
      enableAutoResize: true,
      enableCellNavigation: true,
      enableRowSelection: true
    }
  }

  handleRowSelection(event, args) {
    console.log(event, args);
  }
}

2. with SlickGrid object & onEvent

It's preferable to use the with delegate, but if you really wish, you can also use directly the SlickGrid event that you can subscribe to. However, don't forget to unsubscribe to a SlickGrid event.

ViewModel

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

gridObjChanged(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 || '';
      });
    }
  });
}

Multiple Row Selections

As for multiple row selections, you need to disable enableCellNavigation and enable enableCheckboxSelector and enableRowSelection. Then as describe earlier, you will subscribe to onSelectedRowsChanged (for that you need to bind to (gridChanged)). There are 2 ways to choose for the implementation of a row selection, option 1. is the most common option and is the recommend way of doing it.

1. with Delegate

You can also do it through a delegate since all SlickGrid events are exposed as delegate. For more info see Wiki - OnEvents - 3. delegate

View

<aurelia-slickgrid gridId="grid4"
    grid.bind="gridObj"
    columnDefinitions.bind="columnDefinitions" 
    gridOptions.bind="gridOptions" 
    dataset.bind="dataset"
    sg-on-selected-rows-changed.delegate="handleRowSelection($event.detail.eventData, $event.detail.args)">
</aurelia-slickgrid>

ViewModel

export class Example1 {
  defineGrid() {
    // define columns 
    ...
  
    // grid options
    this.gridOptions = {
      enableAutoResize: true,
      enableCellNavigation: true,
      enableRowSelection: true,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        // Default to True when no "rowSelectionOptions" provided
        selectActiveRow: false
      },
    }
  }

  handleRowSelection(event, args) {
    console.log(event, args);
  }
}

2. with SlickGrid object & onEvent

It's preferable to use the with delegate, but if you really wish, you can also use directly the SlickGrid event that you can subscribe to. However, don't forget to unsubscribe to a SlickGrid event.

ViewModel

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
  },
}

gridObjChanged(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 || '';
      });
    }
  });
}

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

<aurelia-slickgrid gridId="grid4"
    grid.bind="gridObj"
    columnDefinitions.bind="columnDefinitions" 
    gridOptions.bind="gridOptions" 
    dataset.bind="dataset"
    sg-on-click.delegate="handleSingleRowClick($event.detail.eventData, $event.detail.args)"
    sg-on-selected-rows-changed.delegate="handleMultipleRowSelections($event.detail.eventData, $event.detail.args)">
</aurelia-slickgrid>

ViewModel

export class Example1 {
  handleMultipleRowSelections(event, args) {
    console.log('multiple row checkbox selected', event, args);
  }

  handleSingleRowClick(event, args) {
    console.log('multiple row checkbox selected', event, 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]);
    }
  }
}