-
-
Notifications
You must be signed in to change notification settings - Fork 118
Row Selection
- Single Row Selection
- Unsubscribe Events
- Multiple Row Selections
- Change Dynamically Single/Multiple 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.
Note: enableCheckboxSelector
and enableExcelCopyBuffer
do not work well together, this is because they both share the same Row.SelectionModel
and one cancels the other. It is recommended to not use enableExcelCopyBuffer
in that case.
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)
).
Note: if you want to change from Multiple Selections to Single Selection (and vice-versa), you could use the grid options enableCellNavigation
flag, however this is not possible when using Inline Editors since this flag is required. However, there is no other known ways of toggling dynamically.
<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 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)
).
<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: 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);
});
}
If you want to change from Multiple Selections to Single Selection (and vice-versa), you could toggle the grid options enableCellNavigation
flag (False
when you want Single Selection), however this is not possible when using Inline Editors since this flag is required. Note that there is currently no other ways of toggling dynamically without re-creating the grid.
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