-
-
Notifications
You must be signed in to change notification settings - Fork 118
Row Selection
- Single Row Selection
- Unsubscribe Events
- Multiple Row Selections
- Mixing Single & Multiple Row Selections
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.
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)
).
<angular-slickgrid gridId="grid4"
(onGridCreated)="gridReady($event)"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>
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 || '';
});
}
});
}
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();
}
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)
).
<angular-slickgrid gridId="grid4"
(gridChanged)="gridReady($event)"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>
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: false,
enableCheckboxSelector: true,
enableRowSelection: true
}
}
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);
});
}
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:
<angular-slickgrid gridId="grid4"
(onGridCreated)="gridReady($event)"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>
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]);
}
});
}
}
Contents
- Angular-Slickgrid Wiki
- Installation
- Styling
- Interfaces/Models
- Testing Patterns
- Column Functionalities
- Global Grid Options
- Localization
- Events
- Grid Functionalities
- Auto-Resize / Resizer Service
- Resize by Cell Content
- Composite Editor
- Context Menu
- Custom Tooltip
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid State & Presets
- Grouping & Aggregators
- Row Detail
- SlickGrid Controls
- SlickGrid Plugins
- Pinning (frozen) of Columns/Rows
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services