From 18ae4bc2b5f7d0f9a1b4365d33af8a52c52fab5c Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 12:01:41 -0400 Subject: [PATCH 1/6] fix: respect `multiSelect` in checkbox and row keyboard selection --- .../slickCheckboxSelectColumn.spec.ts | 31 +++++++++++++++++++ .../slickHybridSelectionModel.spec.ts | 17 ++++++++++ .../extensions/slickCheckboxSelectColumn.ts | 11 +++++-- .../extensions/slickHybridSelectionModel.ts | 6 +++- 4 files changed, 61 insertions(+), 4 deletions(-) diff --git a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts index efbd170659..ed4f17289c 100644 --- a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts @@ -449,6 +449,37 @@ describe('SlickCheckboxSelectColumn Plugin', () => { expect(setActiveCellSpy).toHaveBeenCalledWith(2, 0); }); + it('should call "toggleRowSelection" and keep only one selected row when grid multiSelect is false', () => { + vi.spyOn(gridStub, 'getDataItem').mockReturnValue({ firstName: 'John', lastName: 'Doe', age: 30 }); + vi.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns); + vi.spyOn(gridStub, 'getOptions').mockReturnValue({ multiSelect: false }); + vi.spyOn(gridStub, 'getSelectedRows').mockReturnValue([1, 2]); + const setActiveCellSpy = vi.spyOn(gridStub, 'setActiveCell'); + const setSelectedRowSpy = vi.spyOn(gridStub, 'setSelectedRows'); + + plugin.init(gridStub); + plugin.toggleRowSelection(2); + + expect(setSelectedRowSpy).toHaveBeenCalledWith([2], 'click.toggle'); + expect(setActiveCellSpy).toHaveBeenCalledWith(2, 0); + }); + + it('should call "toggleRowSelection" and unselect row when grid multiSelect is false and row is already selected', () => { + vi.spyOn(gridStub, 'getDataItem').mockReturnValue({ firstName: 'John', lastName: 'Doe', age: 30 }); + vi.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns); + vi.spyOn(gridStub, 'getOptions').mockReturnValue({ multiSelect: false }); + vi.spyOn(gridStub, 'getSelectedRows').mockReturnValue([2]); + const setActiveCellSpy = vi.spyOn(gridStub, 'setActiveCell'); + const setSelectedRowSpy = vi.spyOn(gridStub, 'setSelectedRows'); + + plugin.init(gridStub); + plugin.selectedRowsLookup = { 2: true }; + plugin.toggleRowSelection(2); + + expect(setSelectedRowSpy).toHaveBeenCalledWith([], 'click.toggle'); + expect(setActiveCellSpy).toHaveBeenCalledWith(2, 0); + }); + it('should fill the "selectableOverride" and expect', () => { vi.spyOn(gridStub, 'getDataItem').mockReturnValue({ firstName: 'John', lastName: 'Doe', age: 30 }); vi.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns); diff --git a/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts b/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts index a61b357a6e..003e0e2e90 100644 --- a/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHybridSelectionModel.spec.ts @@ -482,6 +482,23 @@ describe('Row Selection Model Plugin', () => { ]); }); + it('should keep single row range on Shift+ArrowDown when multiSelect is false in row mode', () => { + vi.spyOn(gridStub, 'getOptions').mockReturnValue({ ...mockGridOptions, multiSelect: false }); + vi.spyOn(gridStub, 'getActiveCell').mockReturnValue({ cell: 1, row: 2 }); + vi.spyOn(gridStub, 'getDataLength').mockReturnValue(6); + vi.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns); + + plugin.activeSelectionIsRow = true; + plugin.init(gridStub); + plugin.setSelectedRanges([new SlickRange(2, 0, 2, 2)]); + + const setSelectRangeSpy = vi.spyOn(plugin, 'setSelectedRanges'); + const keyDownEvent = addVanillaEventPropagation(new Event('keydown'), ['shiftKey'], 'ArrowDown'); + gridStub.onKeyDown.notify({ cell: 1, row: 2, grid: gridStub }, keyDownEvent, gridStub); + + expect(setSelectRangeSpy).toHaveBeenCalledWith([{ fromCell: 0, fromRow: 3, toCell: 2, toRow: 3 }]); + }); + it('should not call "setSelectedRanges" when triggered by "onClick" and "canCellBeActive" returns false', () => { vi.spyOn(gridStub, 'canCellBeActive').mockReturnValue(false); vi.spyOn(gridStub, 'getCellFromEvent').mockReturnValue({ cell: 2, row: 3 }); diff --git a/packages/common/src/extensions/slickCheckboxSelectColumn.ts b/packages/common/src/extensions/slickCheckboxSelectColumn.ts index 7683bc981c..8997e87fc4 100644 --- a/packages/common/src/extensions/slickCheckboxSelectColumn.ts +++ b/packages/common/src/extensions/slickCheckboxSelectColumn.ts @@ -326,9 +326,14 @@ export class SlickCheckboxSelectColumn { this._addonOptions.onRowToggleStart(event, { row, previousSelectedRows }); } - const newSelectedRows = this._selectedRowsLookup[row] - ? this._grid.getSelectedRows().filter((n) => n !== row) - : this._grid.getSelectedRows().concat(row); + const isMultiSelect = this._grid.getOptions().multiSelect !== false; + const newSelectedRows = isMultiSelect + ? this._selectedRowsLookup[row] + ? this._grid.getSelectedRows().filter((n) => n !== row) + : this._grid.getSelectedRows().concat(row) + : this._selectedRowsLookup[row] + ? [] + : [row]; this._grid.setSelectedRows(newSelectedRows, 'click.toggle'); this._grid.setActiveCell(row, this.getCheckboxColumnCellIndex()); diff --git a/packages/common/src/extensions/slickHybridSelectionModel.ts b/packages/common/src/extensions/slickHybridSelectionModel.ts index 71d07b0dd9..b66a412d5d 100644 --- a/packages/common/src/extensions/slickHybridSelectionModel.ts +++ b/packages/common/src/extensions/slickHybridSelectionModel.ts @@ -467,8 +467,8 @@ export class SlickHybridSelectionModel implements SelectionModel= 0 && active < this._grid.getDataLength()) { this._grid.scrollRowIntoView(active); + if (!isMultiSelect) { + top = active; + bottom = active; + } const tempRanges = this.rowsToRanges(this.getRowsRange(top, bottom)); this.setSelectedRanges(tempRanges); } From 05ee8e9ee7e17c8d45bee9e076b76420c3965de1 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 12:16:29 -0400 Subject: [PATCH 2/6] chore: run Prettier formatter --- .../common/src/extensions/slickHybridSelectionModel.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/common/src/extensions/slickHybridSelectionModel.ts b/packages/common/src/extensions/slickHybridSelectionModel.ts index b66a412d5d..5a63576ec1 100644 --- a/packages/common/src/extensions/slickHybridSelectionModel.ts +++ b/packages/common/src/extensions/slickHybridSelectionModel.ts @@ -468,14 +468,7 @@ export class SlickHybridSelectionModel implements SelectionModel x - y); From 96938e7785f702be978555e10c98a8095abff610 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 12:20:38 -0400 Subject: [PATCH 3/6] docs: add documentation about `multiSelect` option --- docs/grid-functionalities/row-selection.md | 23 +++++++++++++++++++ .../grid-functionalities/row-selection.md | 23 +++++++++++++++++++ .../grid-functionalities/row-selection.md | 23 +++++++++++++++++++ .../grid-functionalities/row-selection.md | 23 +++++++++++++++++++ .../grid-functionalities/row-selection.md | 23 +++++++++++++++++++ 5 files changed, 115 insertions(+) diff --git a/docs/grid-functionalities/row-selection.md b/docs/grid-functionalities/row-selection.md index 863209b3bd..d93198f8e7 100644 --- a/docs/grid-functionalities/row-selection.md +++ b/docs/grid-functionalities/row-selection.md @@ -6,6 +6,7 @@ - [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride) - [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection) - [Change Row Selections](#change-row-selections) +- [Understanding the multiSelect Option](#understanding-the-multiselect-option) - Troubleshooting - [Adding a Column dynamically is removing the Row Selection column, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that) - [Hybrid Selection Model (cell+row selection)](#hybrid-selection-model-and-drag-fill) @@ -339,6 +340,28 @@ export class Example1 { } ``` +## Understanding the `multiSelect` Option +The `multiSelect` grid option is a critical setting that controls how row selection works across all selection methods (checkboxes, keyboard navigation, and click handlers). Understanding this option is key to implementing the correct selection behavior for your use case. + +### `multiSelect: false` (Single Selection Mode) +When `multiSelect: false`, the grid enforces **strict single selection**: +- **Checkbox Selection**: Clicking a checkbox selects only that row. Clicking a checkbox that's already selected will **deselect** it (toggle behavior). Only one row can be selected at a time. +- **Keyboard Selection**: Using Shift+Arrow keys to extend a range will select only the current row (range is clamped to a single row). Regular arrow navigation moves between rows but doesn't change selection. +- **Overall Behavior**: At most one row is selected at any time. If you programmatically select a row while another is selected, only the new row remains selected. + +### `multiSelect: true` (Multiple Selection Mode) +When `multiSelect: true`, the grid allows **multiple rows to be selected**: +- **Checkbox Selection**: Clicking a checkbox adds or removes that row from the selection set. Multiple rows can be checked independently. +- **Keyboard Selection**: Using Shift+Arrow keys extends the selection range to include multiple rows. Ctrl/Cmd+Click or Shift+Click can be used to build complex selections. +- **Overall Behavior**: Multiple rows can be selected and retained in the selection set. + +### Selection Methods & `multiSelect` +All row selection methods respect the `multiSelect` option: +1. **Checkbox Selection** (when `enableCheckboxSelector: true`): Respects `multiSelect` setting +2. **Keyboard Selection** (Shift+Arrow): Respects `multiSelect` setting +3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it +4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and Slickgrid-Universal is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the Slickgrid-Universal internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md b/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md index 312f0c137f..f7fe566784 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md @@ -6,6 +6,7 @@ - [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride) - [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection) - [Change Row Selections](#change-row-selections) +- [Understanding the multiSelect Option](#understanding-the-multiselect-option) - Troubleshooting - [Adding a Column dynamically is removing the Row Selection column, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that) - [Hybrid Selection Model (cell+row selection)](#hybrid-selection-model-and-drag-fill) @@ -295,6 +296,28 @@ copyDraggedCellRange(args: OnDragReplaceCellsEventArgs) { } ``` +## Understanding the `multiSelect` Option +The `multiSelect` grid option is a critical setting that controls how row selection works across all selection methods (checkboxes, keyboard navigation, and click handlers). Understanding this option is key to implementing the correct selection behavior for your use case. + +### `multiSelect: false` (Single Selection Mode) +When `multiSelect: false`, the grid enforces **strict single selection**: +- **Checkbox Selection**: Clicking a checkbox selects only that row. Clicking a checkbox that's already selected will **deselect** it (toggle behavior). Only one row can be selected at a time. +- **Keyboard Selection**: Using Shift+Arrow keys to extend a range will select only the current row (range is clamped to a single row). Regular arrow navigation moves between rows but doesn't change selection. +- **Overall Behavior**: At most one row is selected at any time. If you programmatically select a row while another is selected, only the new row remains selected. + +### `multiSelect: true` (Multiple Selection Mode) +When `multiSelect: true`, the grid allows **multiple rows to be selected**: +- **Checkbox Selection**: Clicking a checkbox adds or removes that row from the selection set. Multiple rows can be checked independently. +- **Keyboard Selection**: Using Shift+Arrow keys extends the selection range to include multiple rows. Ctrl/Cmd+Click or Shift+Click can be used to build complex selections. +- **Overall Behavior**: Multiple rows can be selected and retained in the selection set. + +### Selection Methods & `multiSelect` +All row selection methods respect the `multiSelect` option: +1. **Checkbox Selection** (when `enableCheckboxSelector: true`): Respects `multiSelect` setting +2. **Keyboard Selection** (Shift+Arrow): Respects `multiSelect` setting +3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it +4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and Angular-Slickgrid is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the Angular-Slickgrid internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md index 8add7d0745..ad98779bc2 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md @@ -6,6 +6,7 @@ - [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride) - [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection) - [Change Row Selections](#change-row-selections) +- [Understanding the multiSelect Option](#understanding-the-multiselect-option) - Troubleshooting - [Adding a Column dynamically is removing the Row Selection column, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that) - [Hybrid Selection Model (cell+row selection)](#hybrid-selection-model-and-drag-fill) @@ -309,6 +310,28 @@ export class Example { } ``` +## Understanding the `multiSelect` Option +The `multiSelect` grid option is a critical setting that controls how row selection works across all selection methods (checkboxes, keyboard navigation, and click handlers). Understanding this option is key to implementing the correct selection behavior for your use case. + +### `multiSelect: false` (Single Selection Mode) +When `multiSelect: false`, the grid enforces **strict single selection**: +- **Checkbox Selection**: Clicking a checkbox selects only that row. Clicking a checkbox that's already selected will **deselect** it (toggle behavior). Only one row can be selected at a time. +- **Keyboard Selection**: Using Shift+Arrow keys to extend a range will select only the current row (range is clamped to a single row). Regular arrow navigation moves between rows but doesn't change selection. +- **Overall Behavior**: At most one row is selected at any time. If you programmatically select a row while another is selected, only the new row remains selected. + +### `multiSelect: true` (Multiple Selection Mode) +When `multiSelect: true`, the grid allows **multiple rows to be selected**: +- **Checkbox Selection**: Clicking a checkbox adds or removes that row from the selection set. Multiple rows can be checked independently. +- **Keyboard Selection**: Using Shift+Arrow keys extends the selection range to include multiple rows. Ctrl/Cmd+Click or Shift+Click can be used to build complex selections. +- **Overall Behavior**: Multiple rows can be selected and retained in the selection set. + +### Selection Methods & `multiSelect` +All row selection methods respect the `multiSelect` option: +1. **Checkbox Selection** (when `enableCheckboxSelector: true`): Respects `multiSelect` setting +2. **Keyboard Selection** (Shift+Arrow): Respects `multiSelect` setting +3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it +4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and Aurelia-Slickgrid is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the Aurelia-Slickgrid internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md b/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md index 7fa7ab0103..89c62ef335 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md @@ -6,6 +6,7 @@ - [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride) - [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection) - [Change Row Selections](#change-row-selections) +- [Understanding the multiSelect Option](#understanding-the-multiselect-option) - Troubleshooting - [Adding a Column dynamically is removing the Row Selection column, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that) - [Hybrid Selection Model (cell+row selection)](#hybrid-selection-model-and-drag-fill) @@ -397,6 +398,28 @@ const Example: React.FC = () => { export default Example; ``` +## Understanding the `multiSelect` Option +The `multiSelect` grid option is a critical setting that controls how row selection works across all selection methods (checkboxes, keyboard navigation, and click handlers). Understanding this option is key to implementing the correct selection behavior for your use case. + +### `multiSelect: false` (Single Selection Mode) +When `multiSelect: false`, the grid enforces **strict single selection**: +- **Checkbox Selection**: Clicking a checkbox selects only that row. Clicking a checkbox that's already selected will **deselect** it (toggle behavior). Only one row can be selected at a time. +- **Keyboard Selection**: Using Shift+Arrow keys to extend a range will select only the current row (range is clamped to a single row). Regular arrow navigation moves between rows but doesn't change selection. +- **Overall Behavior**: At most one row is selected at any time. If you programmatically select a row while another is selected, only the new row remains selected. + +### `multiSelect: true` (Multiple Selection Mode) +When `multiSelect: true`, the grid allows **multiple rows to be selected**: +- **Checkbox Selection**: Clicking a checkbox adds or removes that row from the selection set. Multiple rows can be checked independently. +- **Keyboard Selection**: Using Shift+Arrow keys extends the selection range to include multiple rows. Ctrl/Cmd+Click or Shift+Click can be used to build complex selections. +- **Overall Behavior**: Multiple rows can be selected and retained in the selection set. + +### Selection Methods & `multiSelect` +All row selection methods respect the `multiSelect` option: +1. **Checkbox Selection** (when `enableCheckboxSelector: true`): Respects `multiSelect` setting +2. **Keyboard Selection** (Shift+Arrow): Respects `multiSelect` setting +3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it +4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and slickgrid-react is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the slickgrid-react internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md b/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md index f86349d373..14cfee154a 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md @@ -6,6 +6,7 @@ - [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride) - [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection) - [Change Row Selections](#change-row-selections) +- [Understanding the multiSelect Option](#understanding-the-multiselect-option) - Troubleshooting - [Adding a Column dynamically is removing the Row Selection column, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-column-why-is-that) - [Hybrid Selection Model (cell+row selection)](#hybrid-selection-model-and-drag-fill) @@ -463,6 +464,28 @@ function copyDraggedCellRange(args: OnDragReplaceCellsEventArgs) { ``` +## Understanding the `multiSelect` Option +The `multiSelect` grid option is a critical setting that controls how row selection works across all selection methods (checkboxes, keyboard navigation, and click handlers). Understanding this option is key to implementing the correct selection behavior for your use case. + +### `multiSelect: false` (Single Selection Mode) +When `multiSelect: false`, the grid enforces **strict single selection**: +- **Checkbox Selection**: Clicking a checkbox selects only that row. Clicking a checkbox that's already selected will **deselect** it (toggle behavior). Only one row can be selected at a time. +- **Keyboard Selection**: Using Shift+Arrow keys to extend a range will select only the current row (range is clamped to a single row). Regular arrow navigation moves between rows but doesn't change selection. +- **Overall Behavior**: At most one row is selected at any time. If you programmatically select a row while another is selected, only the new row remains selected. + +### `multiSelect: true` (Multiple Selection Mode) +When `multiSelect: true`, the grid allows **multiple rows to be selected**: +- **Checkbox Selection**: Clicking a checkbox adds or removes that row from the selection set. Multiple rows can be checked independently. +- **Keyboard Selection**: Using Shift+Arrow keys extends the selection range to include multiple rows. Ctrl/Cmd+Click or Shift+Click can be used to build complex selections. +- **Overall Behavior**: Multiple rows can be selected and retained in the selection set. + +### Selection Methods & `multiSelect` +All row selection methods respect the `multiSelect` option: +1. **Checkbox Selection** (when `enableCheckboxSelector: true`): Respects `multiSelect` setting +2. **Keyboard Selection** (Shift+Arrow): Respects `multiSelect` setting +3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it +4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and slickgrid-vue is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns.value`. To address this issue, you need to get the slickgrid-vue internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. From 3c609b8ac0f2cd1d8b6f3e23b3cb3949dea79c39 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 13:17:57 -0400 Subject: [PATCH 4/6] chore: remove invalid `multiSelect: false` from Composite Editor demos --- demos/aurelia/src/examples/slickgrid/example30.ts | 1 - demos/react/src/examples/slickgrid/Example30.tsx | 1 - demos/vue/src/components/Example30.vue | 1 - .../angular-slickgrid/src/demos/examples/example30.component.ts | 1 - 4 files changed, 4 deletions(-) diff --git a/demos/aurelia/src/examples/slickgrid/example30.ts b/demos/aurelia/src/examples/slickgrid/example30.ts index d7c10cbcf4..e6b3b8b154 100644 --- a/demos/aurelia/src/examples/slickgrid/example30.ts +++ b/demos/aurelia/src/examples/slickgrid/example30.ts @@ -497,7 +497,6 @@ export class Example30 { preHeaderPanelHeight: 28, enableCheckboxSelector: true, enableSelection: true, - multiSelect: false, checkboxSelector: { hideInFilterHeaderRow: false, hideInColumnTitleRow: true, diff --git a/demos/react/src/examples/slickgrid/Example30.tsx b/demos/react/src/examples/slickgrid/Example30.tsx index 6ce2e2e608..a2ef2f4e67 100644 --- a/demos/react/src/examples/slickgrid/Example30.tsx +++ b/demos/react/src/examples/slickgrid/Example30.tsx @@ -492,7 +492,6 @@ const Example30: React.FC = () => { preHeaderPanelHeight: 28, enableCheckboxSelector: true, enableSelection: true, - multiSelect: false, checkboxSelector: { hideInFilterHeaderRow: false, hideInColumnTitleRow: true, diff --git a/demos/vue/src/components/Example30.vue b/demos/vue/src/components/Example30.vue index 5331dec1f2..689907cad6 100644 --- a/demos/vue/src/components/Example30.vue +++ b/demos/vue/src/components/Example30.vue @@ -456,7 +456,6 @@ function defineGrid() { preHeaderPanelHeight: 28, enableCheckboxSelector: true, enableSelection: true, - multiSelect: false, checkboxSelector: { hideInFilterHeaderRow: false, hideInColumnTitleRow: true, diff --git a/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts index 5d5cdfeeb6..6213d79ec1 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts @@ -504,7 +504,6 @@ export class Example30Component implements OnDestroy, OnInit { preHeaderPanelHeight: 28, enableCheckboxSelector: true, enableSelection: true, - multiSelect: false, checkboxSelector: { hideInFilterHeaderRow: false, hideInColumnTitleRow: true, From 5200c3ca376bbefdf8c33dcd9ba1a790cc45c0d0 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 13:29:26 -0400 Subject: [PATCH 5/6] docs: mention `multiSelect` in Composite Editor & Row Selection docs --- docs/grid-functionalities/composite-editor-modal.md | 4 ++++ docs/grid-functionalities/row-selection.md | 6 +++++- .../docs/grid-functionalities/composite-editor-modal.md | 4 ++++ .../docs/grid-functionalities/row-selection.md | 3 ++- .../docs/grid-functionalities/composite-editor-modal.md | 4 ++++ .../docs/grid-functionalities/row-selection.md | 6 +++++- .../docs/grid-functionalities/composite-editor-modal.md | 4 ++++ .../docs/grid-functionalities/row-selection.md | 6 +++++- .../docs/grid-functionalities/composite-editor-modal.md | 4 ++++ .../docs/grid-functionalities/row-selection.md | 6 +++++- 10 files changed, 42 insertions(+), 5 deletions(-) diff --git a/docs/grid-functionalities/composite-editor-modal.md b/docs/grid-functionalities/composite-editor-modal.md index 0af6dcac27..7f4e0a03f6 100644 --- a/docs/grid-functionalities/composite-editor-modal.md +++ b/docs/grid-functionalities/composite-editor-modal.md @@ -143,6 +143,8 @@ Mass Update allows you to apply changes (from the modal form) to the entire data Note however that there is a subtle difference compare to the Create Item action, you need to specifically tag which column will show up in the Mass Update and you need to do that by adding `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the form. +Important: `selectionOptions.selectActiveRow: false` is commonly used for checkbox-based multi-row workflows, but you must also keep `multiSelect` enabled (default `true`), otherwise `mass-selection` and `auto-mass` will not work as expected because only one row can stay selected at a time. + `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. ##### with TypeScript @@ -237,6 +239,8 @@ example class MyCompositeDemo { ## Mass Selection Similar to the Mass Update but apply changes only on the selected rows. The setup is nearly identical to the Mass Update, just make sure to display appropriate modal title. Also note that you also need to add `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the Mass Selection changes form. +**Important**: Mass Selection requires real multi-row selection, so even if you use `selectionOptions.selectActiveRow: false`, you must keep `multiSelect` enabled (default `true`); with `multiSelect: false`, only one row can remain selected and the modal will not behave as expected. + Refer to the [Mass Update](#mass-update) section for code sample. `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. diff --git a/docs/grid-functionalities/row-selection.md b/docs/grid-functionalities/row-selection.md index d93198f8e7..52fd49711d 100644 --- a/docs/grid-functionalities/row-selection.md +++ b/docs/grid-functionalities/row-selection.md @@ -81,7 +81,7 @@ gridObjChanged(grid) { ``` ## 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. +As for multiple row selections, you need to enable `enableCheckboxSelector` and `enableRowSelection`, keep `multiSelect` enabled (default is `true`), and typically use `selectionOptions.selectActiveRow: false` when you do not want active-row clicks to interfere with checkbox-based multi-selection. 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 Custom Events (preferred way) You can also do it through a Custom Event listener since all SlickGrid events are exposed as Custom Events. For more info see [Wiki - OnEvents](grid-dataview-events.md) @@ -113,6 +113,7 @@ export class Example1 { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -139,6 +140,7 @@ export class Example1 { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -362,6 +364,8 @@ All row selection methods respect the `multiSelect` option: 3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it 4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint +`selectionOptions.selectActiveRow` only controls whether activating a row also selects it; it does not override `multiSelect` and cannot enable multiple selection when `multiSelect: false`. + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and Slickgrid-Universal is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the Slickgrid-Universal internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md b/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md index aa81c0b98f..bbaccf2bde 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md @@ -108,6 +108,8 @@ Mass Update allows you to apply changes (from the modal form) to the entire data Note however that there is a subtle difference compare to the Create Item action, you need to specifically tag which column will show up in the Mass Update and you need to do that by adding `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the form. +Important: `selectionOptions.selectActiveRow: false` is commonly used for checkbox-based multi-row workflows, but you must also keep `multiSelect` enabled (default `true`), otherwise `mass-selection` and `auto-mass` will not work as expected because only one row can stay selected at a time. + `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. ##### with TypeScript @@ -166,6 +168,8 @@ example class MyCompositeDemo { ## Mass Selection Similar to the Mass Update but apply changes only on the selected rows. The setup is nearly identical to the Mass Update, just make sure to display appropriate modal title. Also note that you also need to add `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the Mass Selection changes form. +**Important**: Mass Selection requires real multi-row selection, so even if you use `selectionOptions.selectActiveRow: false`, you must keep `multiSelect` enabled (default `true`); with `multiSelect: false`, only one row can remain selected and the modal will not behave as expected. + Refer to the [Mass Update](#mass-update) section for code sample. `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md b/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md index f7fe566784..a53a8c369e 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md @@ -55,7 +55,7 @@ onSelectedRowsChanged(e, args) { ``` ## 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 `enableSelection` (or `enableRowSelection` in <=9.x). Then as describe earlier, you will subscribe to `onSelectedRowsChanged` (for that you need to bind to `(gridChanged)`). +As for multiple row selections, you need to provide `selectionOptions.selectActiveRow: false` and keep `multiSelect` enabled (default is `true`). The other configurations are the same as a Single Selection, which is to enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x). Then as describe earlier, you will subscribe to `onSelectedRowsChanged` (for that you need to bind to `(gridChanged)`). #### View ```html @@ -84,6 +84,7 @@ export class Example1 implements OnInit { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md index 705c3bb4c8..78cf6ab34c 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md @@ -108,6 +108,8 @@ Mass Update allows you to apply changes (from the modal form) to the entire data Note however that there is a subtle difference compare to the Create Item action, you need to specifically tag which column will show up in the Mass Update and you need to do that by adding `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the form. +Important: `selectionOptions.selectActiveRow: false` is commonly used for checkbox-based multi-row workflows, but you must also keep `multiSelect` enabled (default `true`), otherwise `mass-selection` and `auto-mass` will not work as expected because only one row can stay selected at a time. + `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. ##### with TypeScript @@ -166,6 +168,8 @@ example class MyCompositeDemo { ## Mass Selection Similar to the Mass Update but apply changes only on the selected rows. The setup is nearly identical to the Mass Update, just make sure to display appropriate modal title. Also note that you also need to add `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the Mass Selection changes form. +**Important**: Mass Selection requires real multi-row selection, so even if you use `selectionOptions.selectActiveRow: false`, you must keep `multiSelect` enabled (default `true`); with `multiSelect: false`, only one row can remain selected and the modal will not behave as expected. + Refer to the [Mass Update](#mass-update) section for code sample. `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md index ad98779bc2..5acc05a0c5 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-selection.md @@ -56,7 +56,7 @@ onSelectedRowsChanged(e, args) { ``` ## 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 `enableSelection` (or `enableRowSelection` in <=9.x). Then as describe earlier, you will subscribe to `onSelectedRowsChanged` (for that you need to bind to `gridChanged`). +As for multiple row selections, you need to provide `selectionOptions.selectActiveRow: false` and keep `multiSelect` enabled (default is `true`). The other configurations are the same as a Single Selection, which is to enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x). Then as describe earlier, you will subscribe to `onSelectedRowsChanged` (for that you need to bind to `gridChanged`). #### View ```html @@ -90,6 +90,7 @@ export class Example1 { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -121,6 +122,7 @@ export class Example1 { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -332,6 +334,8 @@ All row selection methods respect the `multiSelect` option: 3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it 4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint +`selectionOptions.selectActiveRow` only controls whether activating a row also selects it; it does not override `multiSelect` and cannot enable multiple selection when `multiSelect: false`. + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and Aurelia-Slickgrid is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the Aurelia-Slickgrid internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md index 52b87fcc56..7fedc13b22 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md @@ -113,6 +113,8 @@ Mass Update allows you to apply changes (from the modal form) to the entire data Note however that there is a subtle difference compare to the Create Item action, you need to specifically tag which column will show up in the Mass Update and you need to do that by adding `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the form. +Important: `selectionOptions.selectActiveRow: false` is commonly used for checkbox-based multi-row workflows, but you must also keep `multiSelect` enabled (default `true`), otherwise `mass-selection` and `auto-mass` will not work as expected because only one row can stay selected at a time. + `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. ##### with TypeScript @@ -177,6 +179,8 @@ const Example: React.FC = () => { ## Mass Selection Similar to the Mass Update but apply changes only on the selected rows. The setup is nearly identical to the Mass Update, just make sure to display appropriate modal title. Also note that you also need to add `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the Mass Selection changes form. +**Important**: Mass Selection requires real multi-row selection, so even if you use `selectionOptions.selectActiveRow: false`, you must keep `multiSelect` enabled (default `true`); with `multiSelect: false`, only one row can remain selected and the modal will not behave as expected. + Refer to the [Mass Update](#mass-update) section for code sample. `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md b/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md index 89c62ef335..90767a09f0 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/row-selection.md @@ -87,7 +87,7 @@ gridObjChanged(grid) { ``` ## Multiple Row Selections -As for multiple row selections, you need to disable `enableCellNavigation` and enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x). 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. +As for multiple row selections, you need to enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x), keep `multiSelect` enabled (default is `true`), and typically use `selectionOptions.selectActiveRow: false` when you do not want active-row clicks to interfere with checkbox-based multi-selection. 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 event (preferred way) You can also do it through an event since all SlickGrid events are exposed. For more info see [Docs - OnEvents - `3. event`](../events/grid-dataview-events.md) @@ -113,6 +113,7 @@ const Example: React.FC = () => { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -151,6 +152,7 @@ const Example: React.FC = () => { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection }); } @@ -420,6 +422,8 @@ All row selection methods respect the `multiSelect` option: 3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it 4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint +`selectionOptions.selectActiveRow` only controls whether activating a row also selects it; it does not override `multiSelect` and cannot enable multiple selection when `multiSelect: false`. + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and slickgrid-react is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns`. To address this issue, you need to get the slickgrid-react internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md index 1ffba0c419..e848227989 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md @@ -114,6 +114,8 @@ Mass Update allows you to apply changes (from the modal form) to the entire data Note however that there is a subtle difference compare to the Create Item action, you need to specifically tag which column will show up in the Mass Update and you need to do that by adding `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the form. +Important: `selectionOptions.selectActiveRow: false` is commonly used for checkbox-based multi-row workflows, but you must also keep `multiSelect` enabled (default `true`), otherwise `mass-selection` and `auto-mass` will not work as expected because only one row can stay selected at a time. + `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. ##### with TypeScript @@ -178,6 +180,8 @@ function openCompositeModal(modalType: CompositeEditorModalType = 'mass-update') ## Mass Selection Similar to the Mass Update but apply changes only on the selected rows. The setup is nearly identical to the Mass Update, just make sure to display appropriate modal title. Also note that you also need to add `massUpdate: true` flag inside the `editor` property of each column definition that you wish to be included in the Mass Selection changes form. +**Important**: Mass Selection requires real multi-row selection, so even if you use `selectionOptions.selectActiveRow: false`, you must keep `multiSelect` enabled (default `true`); with `multiSelect: false`, only one row can remain selected and the modal will not behave as expected. + Refer to the [Mass Update](#mass-update) section for code sample. `auto-mass` option: If you decide to use Mass Update and Mass Selection and wish to only expose 1 button to do the action and let the system decide if it's doing a Mass Update or a Mass Selection change, you can use the modal type `auto-mass` (if it detect that some rows are selected it will use Mass Selection or else Mass Update). From our experience, user prefer to expose the 2 separate action buttons (less confusion), but this for you to decide, you have the option. diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md b/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md index 14cfee154a..2c66d222db 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/row-selection.md @@ -97,7 +97,7 @@ function gridObjChanged(grid) { ``` ## Multiple Row Selections -As for multiple row selections, you need to disable `enableCellNavigation` and enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x). 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. +As for multiple row selections, you need to enable `enableCheckboxSelector` and `enableSelection` (or `enableRowSelection` in <=9.x), keep `multiSelect` enabled (default is `true`), and typically use `selectionOptions.selectActiveRow: false` when you do not want active-row clicks to interfere with checkbox-based multi-selection. 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 event (preferred way) You can also do it through an event since all SlickGrid events are exposed. For more info see [Docs - OnEvents - `3. event`](../events/grid-dataview-events.md) @@ -134,6 +134,7 @@ function defineGrid() { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -184,6 +185,7 @@ function defineGrid() { // True (Single Selection), False (Multiple Selections) selectActiveRow: false }, + // keep `multiSelect` enabled (default) for actual multiple row selection } } @@ -486,6 +488,8 @@ All row selection methods respect the `multiSelect` option: 3. **Programmatic Selection** (calling `setSelectedRows()`): Not restricted by `multiSelect` but subsequent UI interactions will respect it 4. **Other Selection Handlers**: All adhere to the `multiSelect` constraint +`selectionOptions.selectActiveRow` only controls whether activating a row also selects it; it does not override `multiSelect` and cannot enable multiple selection when `multiSelect: false`. + ## Troubleshooting ### Adding a Column dynamically is removing the Row Selection column, why is that? The reason is because the Row Selection (checkbox) plugin is a special column and slickgrid-vue is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columns.value`. To address this issue, you need to get the slickgrid-vue internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work. From 07962af339c6a995b339b404cfc501b0ec344c58 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 7 May 2026 13:40:24 -0400 Subject: [PATCH 6/6] docs: clarify comment for selectActiveRow property --- .../common/src/interfaces/selectionModelOption.interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/src/interfaces/selectionModelOption.interface.ts b/packages/common/src/interfaces/selectionModelOption.interface.ts index 579457b9b9..f42c83a80e 100644 --- a/packages/common/src/interfaces/selectionModelOption.interface.ts +++ b/packages/common/src/interfaces/selectionModelOption.interface.ts @@ -17,7 +17,7 @@ export interface HybridSelectionModelOption { /** defaults to True, do we want to select the active cell? */ selectActiveCell?: boolean; - /** defaults to True, do we want to select the active row? */ + /** defaults to True, should the currently-active row be automatically selected during navigation? */ selectActiveRow?: boolean; /** cell range selector */