From 154892fac15d353b68e7c0694ec2dc0e6a276b06 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 12 Nov 2021 14:31:09 +0200 Subject: [PATCH 1/3] fix(grid,perf): don't emit multiple events for group row selection BEHAVIOR CHANGE: row selection even is now emitted only once for the entire group selected as intended. `added` and `removed` arrays in args contain all affected rows Closes #9250 --- .../src/lib/grids/common/events.ts | 8 ++-- .../src/lib/grids/grid/grid.groupby.spec.ts | 12 +++++ .../lib/grids/grid/groupby-row.component.ts | 8 +--- .../lib/grids/selection/selection.service.ts | 45 ++++++++++++++++--- src/app/grid-groupby/grid-groupby.sample.html | 2 +- src/app/grid-groupby/grid-groupby.sample.ts | 8 +++- 6 files changed, 63 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts index f468cbc13a8..c9bc5e1a205 100644 --- a/projects/igniteui-angular/src/lib/grids/common/events.ts +++ b/projects/igniteui-angular/src/lib/grids/common/events.ts @@ -83,11 +83,11 @@ export interface IColumnResizingEventArgs extends IColumnResizeEventArgs, Cancel } export interface IRowSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { - oldSelection: any[]; + readonly oldSelection: any[]; newSelection: any[]; - added: any[]; - removed: any[]; - event?: Event; + readonly added: any[]; + readonly removed: any[]; + readonly event?: Event; } export interface IColumnSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index a052c6d1f1d..e93b7b0ee5f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1173,9 +1173,15 @@ describe('IgxGrid - GroupBy #grid', () => { tick(); fix.detectChanges(); + const selectionSpy = spyOn(grid.rowSelected, 'emit'); GridFunctions.simulateGridContentKeydown(fix, 'Space'); fix.detectChanges(); + expect(selectionSpy).toHaveBeenCalledTimes(1); + const args = selectionSpy.calls.mostRecent().args[0]; + expect(args.added.length).toBe(2); + expect(grid.selectedRows.length).toEqual(2); + for (const key of grRow.groupRow.records) { expect(GridSelectionFunctions.verifyRowSelected(grid.gridAPI.get_row_by_key(key))); } @@ -1257,9 +1263,15 @@ describe('IgxGrid - GroupBy #grid', () => { tick(); fix.detectChanges(); + const selectionSpy = spyOn(grid.rowSelected, 'emit'); GridFunctions.simulateGridContentKeydown(fix, 'Space'); fix.detectChanges(); + expect(selectionSpy).toHaveBeenCalledTimes(1); + const args = selectionSpy.calls.mostRecent().args[0]; + expect(args.removed.length).toBe(2); + expect(grid.selectedRows.length).toEqual(0); + for (const key of grRow.groupRow.records) { expect(GridSelectionFunctions.verifyRowSelected(grid.gridAPI.get_row_by_key(key), false)); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index 3439738bff6..473fe5bbbc6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -218,13 +218,9 @@ export class IgxGridGroupByRowComponent implements OnDestroy { } event.stopPropagation(); if (this.areAllRowsInTheGroupSelected) { - this.groupRow.records.forEach(row => { - this.gridSelection.deselectRow(this.getRowID(row), event); - }); + this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x))); } else { - this.groupRow.records.forEach(row => { - this.gridSelection.selectRowById(this.getRowID(row), false, event); - }); + this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x))); } } diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index be051c4fc16..98f96ad4e08 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts @@ -438,7 +438,6 @@ export class IgxGridSelectionService { const addedRows = allRowIDs.filter((rID) => !this.isRowSelected(rID)); const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows; this.indeterminateRows.clear(); - this.selectedRowsChange.next(); this.emitRowSelectionEvent(newSelection, addedRows, [], event); } @@ -449,10 +448,10 @@ export class IgxGridSelectionService { } clearPrevSelection = !this.grid.isMultiRowSelectionEnabled || clearPrevSelection; - const newSelection = clearPrevSelection ? [rowID] : this.getSelectedRows().indexOf(rowID) !== -1 ? - this.getSelectedRows() : [...this.getSelectedRows(), rowID]; - const removed = clearPrevSelection ? this.getSelectedRows() : []; - this.selectedRowsChange.next(); + const selectedRows = this.getSelectedRows(); + const newSelection = clearPrevSelection ? [rowID] : this.rowSelection.has(rowID) ? + selectedRows : [...selectedRows, rowID]; + const removed = clearPrevSelection ? selectedRows : []; this.emitRowSelectionEvent(newSelection, [rowID], removed, event); } @@ -463,11 +462,44 @@ export class IgxGridSelectionService { } const newSelection = this.getSelectedRows().filter(r => r !== rowID); if (this.rowSelection.size && this.rowSelection.has(rowID)) { - this.selectedRowsChange.next(); this.emitRowSelectionEvent(newSelection, [], [rowID], event); } } + /** Select the specified rows and emit event. */ + public selectRows(keys: any[], clearPrevSelection?: boolean, event?): void { + if (!this.grid.isMultiRowSelectionEnabled) { + return; + } + + const rowsToSelect = keys.filter(x => !this.isRowDeleted(x) && !this.rowSelection.has(x)); + if (!rowsToSelect.length && !clearPrevSelection) { + // no valid/additional rows to select and no clear + return; + } + + const selectedRows = this.getSelectedRows(); + const newSelection = clearPrevSelection ? rowsToSelect : [...selectedRows, ...rowsToSelect]; + const keysAsSet = new Set(rowsToSelect); + const removed = clearPrevSelection ? selectedRows.filter(x => !keysAsSet.has(x)) : []; + this.emitRowSelectionEvent(newSelection, rowsToSelect, removed, event); + } + + public deselectRows(keys: any[], event?): void { + if (!this.rowSelection.size) { + return; + } + + const rowsToDeselect = keys.filter(x => this.rowSelection.has(x)); + if (!rowsToDeselect.length) { + return; + } + + const keysAsSet = new Set(rowsToDeselect); + const newSelection = this.getSelectedRows().filter(r => !keysAsSet.has(r)); + this.emitRowSelectionEvent(newSelection, [], rowsToDeselect, event); + } + /** Select specified rows. No event is emitted. */ public selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void { if (clearPrevSelection) { @@ -508,7 +540,6 @@ export class IgxGridSelectionService { const added = this.getRowIDs(rows).filter(rID => !this.isRowSelected(rID)); const newSelection = this.getSelectedRows().concat(added); - this.selectedRowsChange.next(); this.emitRowSelectionEvent(newSelection, added, [], event); } diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index b85fe7abca9..7812a692ad8 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -69,7 +69,7 @@

Selection Performance

+ height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelected)="rowSelectionChanged($event)"> diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 9872a78be43..bf700a92c14 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -3,7 +3,7 @@ import { Component, ViewChild, OnInit, Inject } from '@angular/core'; import { IgxGridComponent, SortingDirection, ISortingExpression, - DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode + DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode, IRowSelectionEventArgs } from 'igniteui-angular'; @Component({ @@ -33,7 +33,7 @@ export class GridGroupBySampleComponent implements OnInit { constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { } public ngOnInit(): void { - for (let i = 0; i < 60; i++) { + for (let i = 0; i < 2500; i++) { this.data2.push(...Array(10).fill({ STATUS: 'A', FIELD: 'some text' })); this.data2.push(...Array(10).fill({ STATUS: 'B', FIELD: 'some text' })); this.data2.push(...Array(10).fill({ STATUS: 'C', FIELD: 'some text' })); @@ -174,4 +174,8 @@ export class GridGroupBySampleComponent implements OnInit { this.grid1.showGroupArea = !this.grid1.showGroupArea; this.grid1.cdr.detectChanges(); } + + public rowSelectionChanged(e: IRowSelectionEventArgs) { + console.log(e); + } } From 2e83004940c51f33c187a17ef30a19a7eae2b2d6 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 12 Nov 2021 14:34:42 +0200 Subject: [PATCH 2/3] perf(grid): groupBy selection getter filter w/ set instead of array --- .../src/lib/grids/grid/groupby-row.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index 473fe5bbbc6..35b99b4e115 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -278,8 +278,8 @@ export class IgxGridGroupByRowComponent implements OnDestroy { * @hidden @internal */ public get selectedRowsInTheGroup(): any[] { - const selectedIds = this.gridSelection.filteredSelectedRowIds; - return this.groupRow.records.filter(rowID => selectedIds.indexOf(this.getRowID(rowID)) > -1); + const selectedIds = new Set(this.gridSelection.filteredSelectedRowIds); + return this.groupRow.records.filter(rowID => selectedIds.has(this.getRowID(rowID))); } /** From 3fba870e2eec78541227bb34a3cb25ff10473041 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 12 Nov 2021 16:22:05 +0200 Subject: [PATCH 3/3] refactor(grid): rename rowSelected to rowSelectionChanging --- CHANGELOG.md | 1 + .../update-13_0_0/changes/members.json | 10 + .../update-13_0_0/changes/outputs.json | 37 ++++ .../igniteui-angular/src/lib/grids/README.md | 2 +- .../src/lib/grids/grid-base.directive.ts | 4 +- .../lib/grids/grid/grid-row-selection.spec.ts | 198 +++++++++--------- .../src/lib/grids/grid/grid.groupby.spec.ts | 4 +- .../child-grid-row.component.ts | 4 +- .../hierarchical-grid.selection.spec.ts | 8 +- .../src/lib/grids/row.directive.ts | 4 +- .../lib/grids/selection/selection.service.ts | 2 +- .../tree-grid/tree-grid-selection.service.ts | 2 +- .../tree-grid/tree-grid-selection.spec.ts | 26 +-- .../lib/test-utils/grid-interfaces.spec.ts | 4 +- .../src/lib/test-utils/grid-samples.spec.ts | 4 +- .../lib/test-utils/template-strings.spec.ts | 2 +- src/app/grid-groupby/grid-groupby.sample.html | 2 +- .../grid-selection/grid-selection.sample.html | 2 +- .../grid-updates.component.html | 4 +- src/app/splitter/splitter.sample.html | 4 +- 20 files changed, 186 insertions(+), 138 deletions(-) create mode 100644 projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json diff --git a/CHANGELOG.md b/CHANGELOG.md index fe3e35f36d9..b92eb1fd94a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -73,6 +73,7 @@ All notable changes for each version of this project will be documented in this - Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. + - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function - `igxGrid` - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information. - `IgxColumnActionsComponent` diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json index c8258011600..33a842432bb 100644 --- a/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json +++ b/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json @@ -21,6 +21,16 @@ "definedIn": [ "IgxComboBaseDirective" ] + }, + { + "member": "rowSelected", + "replaceWith": "rowSelectionChanging", + "definedIn": [ + "IgxGridComponent", + "IgxTreeGridComponent", + "IgxHierarchicalGridComponent", + "IgxRowIslandComponent" + ] } ] } diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json new file mode 100644 index 00000000000..5f930796e75 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json @@ -0,0 +1,37 @@ +{ + "$schema": "../../common/schema/binding.schema.json", + "changes": [ + { + "name": "rowSelected", + "replaceWith": "rowSelectionChanging", + "owner": { + "selector": "igx-grid", + "type": "component" + } + }, + { + "name": "rowSelected", + "replaceWith": "rowSelectionChanging", + "owner": { + "selector": "igx-tree-grid", + "type": "component" + } + }, + { + "name": "rowSelected", + "replaceWith": "rowSelectionChanging", + "owner": { + "selector": "igx-hierarchical-grid", + "type": "component" + } + }, + { + "name": "rowSelected", + "replaceWith": "rowSelectionChanging", + "owner": { + "selector": "igx-row-island", + "type": "component" + } + } + ] +} diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index be5724d6d0f..b0b1b67b5d3 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -228,7 +228,7 @@ A list of the events emitted by the **igx-grid**: |`columnMovingEnd`|Emitted when a column moving ends. Returns the source and target columns objects. This event is cancelable.| |`columnMovingStart`|Emitted when a column moving starts. Returns the moved column object.| |`selected`|Emitted when a cell is selected. Returns the cell object.| -|`rowSelected`|Emitted when a row selection has changed. Returns array with old and new selected rows' IDs and the target row, if available.| +|`rowSelectionChanging`|Emitted when row selection is changing. Returns array with old and new selected rows' IDs and the target row, if available.| |`columnSelected`|Emitted when a column selection has changed. Returns array with old and new selected column' fields| |`columnInit`|Emitted when the grid columns are initialized. Returns the column object.| |`sortingDone`|Emitted when sorting is performed through the UI. Returns the sorting expression.| diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 574e6dea252..a21a3fe3436 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -465,11 +465,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @Output() - public rowSelected = new EventEmitter(); + public rowSelectionChanging = new EventEmitter(); /** * Emitted when `IgxColumnComponent` is selected. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts index 6bdb05d37b3..178a9abeff8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts @@ -124,14 +124,14 @@ describe('IgxGrid - Row Selection #grid', () => { it('Header checkbox should select/deselect all rows', () => { const allRowsArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray()); expect(grid.selectedRows).toEqual(allRowsArray); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: allRowsArray, cancel: false, @@ -140,7 +140,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); @@ -148,7 +148,7 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray(), false); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { oldSelection: allRowsArray, newSelection: [], @@ -157,12 +157,12 @@ describe('IgxGrid - Row Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('Header checkbox should deselect all rows - scenario when clicking first row, while header checkbox is clicked', () => { const firstRow = grid.gridAPI.get_row_by_index(0); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); @@ -187,18 +187,18 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(4); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(4); }); it('Checkbox should select/deselect row', () => { const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: [1], cancel: false, @@ -207,7 +207,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); @@ -221,7 +221,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); expect(grid.selectedRows).toEqual([1, 2]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { added: [2], cancel: false, @@ -230,7 +230,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [1], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); @@ -239,7 +239,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); expect(grid.selectedRows).toEqual([2]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(3); args = { added: [], cancel: false, @@ -248,7 +248,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [1, 2], removed: [1] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickRowCheckbox(secondRow); fix.detectChanges(); @@ -256,7 +256,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(4); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(4); args = { added: [], cancel: false, @@ -265,12 +265,12 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [2], removed: [2] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('Should select the row with mouse click ', () => { expect(grid.selectRowOnClick).toBe(true); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(2); const mockEvent = new MouseEvent('click'); @@ -280,8 +280,8 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); expect(grid.selectedRows).toEqual([2]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); - expect(grid.rowSelected.emit).toHaveBeenCalledWith({ + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({ added: [2], cancel: false, event: mockEvent, @@ -295,7 +295,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); // Click on a different row secondRow.nativeElement.dispatchEvent(mockEvent); @@ -305,8 +305,8 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); expect(grid.selectedRows).toEqual([3]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); - expect(grid.rowSelected.emit).toHaveBeenCalledWith({ + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({ added: [3], cancel: false, event: mockEvent, @@ -323,7 +323,7 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.selectRowOnClick).toBe(false); grid.hideRowSelectors = false; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(2); @@ -332,7 +332,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); expect(grid.selectedRows).toEqual([2]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); // Click on the second row UIInteractions.simulateClickEvent(secondRow.nativeElement); @@ -342,18 +342,18 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); }); it('Should select multiple rows with clicking and holding Ctrl', () => { expect(grid.selectRowOnClick).toBe(true); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(2); const secondRow = grid.gridAPI.get_row_by_index(0); UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.verifyRowSelected(firstRow); // Click again on this row holding Ctrl @@ -361,7 +361,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); // Click on a different row UIInteractions.simulateClickEvent(secondRow.nativeElement, false, true); @@ -370,12 +370,12 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); }); it('Should NOT select rows with clicking and holding Ctrl when selectRowOnClick has false value', () => { grid.selectRowOnClick = false; grid.hideRowSelectors = false; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(2); const secondRow = grid.gridAPI.get_row_by_index(0); const thirdRow = grid.gridAPI.get_row_by_index(4); @@ -384,7 +384,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); // Click on the second row checkbox GridSelectionFunctions.clickRowCheckbox(secondRow); @@ -392,7 +392,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); // Click + Ctrl on the third row UIInteractions.simulateClickEvent(thirdRow.nativeElement); @@ -401,13 +401,13 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyRowSelected(thirdRow, false); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); }); it('Should select multiple rows with clicking Space on a cell', (async () => { grid.tbody.nativeElement.focus(); fix.detectChanges(); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); let cell = grid.gridAPI.get_cell_by_index(0, 'ProductName'); @@ -419,7 +419,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyCellSelected(cell); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); @@ -438,7 +438,7 @@ describe('IgxGrid - Row Selection #grid', () => { await wait(DEBOUNCETIME); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); @@ -447,14 +447,14 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); await wait(DEBOUNCETIME); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(3); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); })); it('Should select multiple rows with Shift + Click', () => { expect(grid.selectRowOnClick).toBe(true); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(4); const mockEvent = new MouseEvent('click', { shiftKey: true }); @@ -469,8 +469,8 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.selectedRows).toEqual([2, 3, 4, 5]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); - expect(grid.rowSelected.emit).toHaveBeenCalledWith({ + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({ added: [3, 4, 5], cancel: false, event: mockEvent, @@ -487,7 +487,7 @@ describe('IgxGrid - Row Selection #grid', () => { it('Should NOT select multiple rows with Shift + Click when selectRowOnClick has false value', () => { grid.selectRowOnClick = false; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); // Shift + Click const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(4); @@ -503,7 +503,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); GridSelectionFunctions.verifyRowSelected(secondRow, false); for (let index = 1; index < 4; index++) { const row = grid.gridAPI.get_row_by_index(index); @@ -594,9 +594,9 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); }); - it('Should be able to cancel rowSelected event', () => { + it('Should be able to cancel rowSelectionChanging event', () => { const firstRow = grid.gridAPI.get_row_by_index(0); - grid.rowSelected.subscribe((e: IRowSelectionEventArgs) => { + grid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => { e.cancel = true; }); @@ -648,11 +648,11 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(grid.gridAPI.get_row_by_index(2)); }); - it('Should be able to programmatically overwrite the selection using rowSelected event', () => { + it('Should be able to programmatically overwrite the selection using rowSelectionChanging event', () => { const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); const thirdRow = grid.gridAPI.get_row_by_index(2); - grid.rowSelected.subscribe((e: IRowSelectionEventArgs) => { + grid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => { if (e.added.length > 0 && (e.added[0]) % 2 === 0) { e.newSelection = e.oldSelection || []; } @@ -775,14 +775,14 @@ describe('IgxGrid - Row Selection #grid', () => { })); it('Header checkbox should NOT select/deselect all rows when selectionMode is single', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected([]); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); @@ -790,7 +790,7 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('Should have checkbox on each row and do not have header checkbox', () => { @@ -806,12 +806,12 @@ describe('IgxGrid - Row Selection #grid', () => { it('Should be able to select only one row when click on a checkbox', () => { const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: [1], cancel: false, @@ -820,7 +820,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); @@ -833,7 +833,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); expect(grid.selectedRows).toEqual([2]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { added: [2], cancel: false, @@ -842,14 +842,14 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [1], removed: [1] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('Should NOT select a row on click when selectRowOnClick has false value', () => { grid.selectRowOnClick = false; grid.tbody.nativeElement.focus(); fix.detectChanges(); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(0); const cell = grid.gridAPI.get_cell_by_index(0, 0); UIInteractions.simulateClickEvent(cell.nativeElement); @@ -857,17 +857,17 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('Should not select multiple rows with clicking and holding Ctrl', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(2); const secondRow = grid.gridAPI.get_row_by_index(0); UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); expect(grid.selectedRows).toEqual([3]); GridSelectionFunctions.verifyRowSelected(firstRow); @@ -878,18 +878,18 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); expect(grid.selectedRows).toEqual([1]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); }); it('Should not select a row with clicking and holding Ctrl when selectRowOnClick has false value', () => { grid.selectRowOnClick = false; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(2); const secondRow = grid.gridAPI.get_row_by_index(0); UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); @@ -900,13 +900,13 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('Should not select multiple rows with clicking Space on a cell', (async () => { grid.tbody.nativeElement.focus(); fix.detectChanges(); - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); let cell = grid.gridAPI.get_cell_by_index(0, 'ProductName'); @@ -918,7 +918,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyCellSelected(cell); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); @@ -933,7 +933,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); await wait(DEBOUNCETIME); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); expect(grid.selectedRows).toEqual([2]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); @@ -943,14 +943,14 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); await wait(DEBOUNCETIME); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(3); expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); })); it('Should not select multiple rows with Shift + Click', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(4); const mockEvent = new MouseEvent('click', { shiftKey: true }); @@ -966,8 +966,8 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.selectedRows).toEqual([5]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); - expect(grid.rowSelected.emit).toHaveBeenCalledWith({ + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({ added: [5], cancel: false, event: mockEvent, @@ -984,7 +984,7 @@ describe('IgxGrid - Row Selection #grid', () => { }); it('Should not select row with Shift + Click when selectRowOnClick has false value ', () => { grid.selectRowOnClick = false; - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); // Shift + Click const firstRow = grid.gridAPI.get_row_by_index(1); @@ -1001,7 +1001,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); GridSelectionFunctions.verifyRowSelected(secondRow, false); for (let index = 1; index < 4; index++) { const row = grid.gridAPI.get_row_by_index(index); @@ -1053,7 +1053,7 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.selectedRows).toEqual([1, 3, 5, 2, 4]); }); - it('Should be able to cancel rowSelected event', () => { + it('Should be able to cancel rowSelectionChanging event', () => { const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); @@ -1064,7 +1064,7 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.selectedRows).toEqual([1]); // Cancel the event - grid.rowSelected.subscribe((e: IRowSelectionEventArgs) => { + grid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => { e.cancel = true; }); @@ -1158,7 +1158,7 @@ describe('IgxGrid - Row Selection #grid', () => { })); it('Should be able to programmatically select all rows and keep the header checkbox intact, #1298', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); grid.selectAllRows(); grid.cdr.detectChanges(); fix.detectChanges(); @@ -1178,11 +1178,11 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray(), false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('Should be able to select/deselect rows programmatically', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(0); const secondRow = grid.gridAPI.get_row_by_index(1); const thirdRow = grid.gridAPI.get_row_by_index(2); @@ -1233,7 +1233,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowsArraySelected([secondRow, thirdRow, forthRow], false); GridSelectionFunctions.verifyRowSelected(firstRow); expect(grid.selectedRows).toEqual([1]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); grid.deselectRows([1]); fix.detectChanges(); @@ -1241,7 +1241,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); GridSelectionFunctions.verifyRowsArraySelected([firstRow, secondRow, thirdRow, forthRow], false); expect(grid.selectedRows).toEqual([]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('Should be able to correctly select all rows programmatically', () => { @@ -1292,7 +1292,7 @@ describe('IgxGrid - Row Selection #grid', () => { })); it('Verify event parameters', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const firstRow = grid.gridAPI.get_row_by_index(1); const secondRow = grid.gridAPI.get_row_by_index(4); @@ -1301,7 +1301,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); expect(grid.selectedRows).toEqual([gridData[1]]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: [gridData[1]], cancel: false, @@ -1310,13 +1310,13 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); UIInteractions.simulateClickEvent(secondRow.nativeElement, true); fix.detectChanges(); expect(grid.selectedRows).toEqual([gridData[1], gridData[2], gridData[3], gridData[4]]); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { added: [gridData[2], gridData[3], gridData[4]], cancel: false, @@ -1325,7 +1325,7 @@ describe('IgxGrid - Row Selection #grid', () => { oldSelection: [gridData[1]], removed: [] }; - expect(grid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('Should persist through scrolling vertical', (async () => { @@ -1690,24 +1690,24 @@ describe('IgxGrid - Row Selection #grid', () => { }); it('Filtering: Should properly check the header checkbox state when filtering, #2469', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); grid.filter('ProductID', 10, IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), true); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); expect(grid.selectedRows).toEqual([]); grid.clearFilter('ProductID'); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.filter('ProductID', 0, IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), true); @@ -1728,11 +1728,11 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); expect(grid.selectedRows.length).toBe(19); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); }); it('Filtering: Should select correct rows when filter is applied', () => { - spyOn(grid.rowSelected, 'emit').and.callThrough(); + spyOn(grid.rowSelectionChanging, 'emit').and.callThrough(); const secondRow = grid.gridAPI.get_row_by_index(1); GridSelectionFunctions.clickRowCheckbox(secondRow); @@ -1740,19 +1740,19 @@ describe('IgxGrid - Row Selection #grid', () => { expect(secondRow.selected).toBeTruthy(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); grid.filter('ProductName', 'Ca', IgxStringFilteringOperand.instance().condition('contains'), true); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); grid.clearFilter('ProductName'); fix.detectChanges(); @@ -1766,12 +1766,12 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(3); grid.clearFilter('ProductName'); fix.detectChanges(); @@ -1781,19 +1781,19 @@ describe('IgxGrid - Row Selection #grid', () => { expect(grid.gridAPI.get_row_by_index(1).selected).toBeTruthy(); expect(grid.gridAPI.get_row_by_index(2).selected).toBeFalsy(); expect(grid.gridAPI.get_row_by_index(6).selected).toBeFalsy(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(3); GridSelectionFunctions.clickRowCheckbox(grid.gridAPI.get_row_by_index(2)); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(4); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(4); grid.filter('ProductName', 'Ca', IgxStringFilteringOperand.instance().condition('contains'), true); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(4); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(4); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); @@ -1802,14 +1802,14 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(6); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(6); grid.clearFilter('ProductName'); fix.detectChanges(); expect(grid.gridAPI.get_row_by_index(2).selected).toBeFalsy(); expect(grid.gridAPI.get_row_by_index(1).selected).toBeTruthy(); - expect(grid.rowSelected.emit).toHaveBeenCalledTimes(6); + expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(6); }); it('Should select only filtered records', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index e93b7b0ee5f..6bc3db79e3f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1173,7 +1173,7 @@ describe('IgxGrid - GroupBy #grid', () => { tick(); fix.detectChanges(); - const selectionSpy = spyOn(grid.rowSelected, 'emit'); + const selectionSpy = spyOn(grid.rowSelectionChanging, 'emit'); GridFunctions.simulateGridContentKeydown(fix, 'Space'); fix.detectChanges(); @@ -1263,7 +1263,7 @@ describe('IgxGrid - GroupBy #grid', () => { tick(); fix.detectChanges(); - const selectionSpy = spyOn(grid.rowSelected, 'emit'); + const selectionSpy = spyOn(grid.rowSelectionChanging, 'emit'); GridFunctions.simulateGridContentKeydown(fix, 'Space'); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts index f05c0c97bf6..1b2cd961f99 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts @@ -70,7 +70,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { * * ```typescript * handleRowSelection(event) { - * // the grid on which the rowSelected event was triggered + * // the grid on which the rowSelectionChanging event was triggered * const grid = event.row.grid; * } * ``` @@ -78,7 +78,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { * ```html * + * (rowSelectionChanging)="handleRowSelection($event)"> * * ``` */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts index f4850fc776e..4abc8522f45 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts @@ -627,14 +627,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { } }); - it('should have fire event rowSelected', () => { + it('should have fire event rowSelectionChanging', () => { hierarchicalGrid.expandChildren = true; fix.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; const secondChildGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[1]; - const parentSpy = spyOn(hierarchicalGrid.rowSelected, 'emit').and.callThrough(); - const childSpy = spyOn(childGrid.rowSelected, 'emit').and.callThrough(); - const secondChildSpy = spyOn(secondChildGrid.rowSelected, 'emit').and.callThrough(); + const parentSpy = spyOn(hierarchicalGrid.rowSelectionChanging, 'emit').and.callThrough(); + const childSpy = spyOn(childGrid.rowSelectionChanging, 'emit').and.callThrough(); + const secondChildSpy = spyOn(secondChildGrid.rowSelectionChanging, 'emit').and.callThrough(); const mockEvent = new MouseEvent('click'); // Click on a row in child grid diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts index 525ff749bd1..58ca8555ccb 100644 --- a/projects/igniteui-angular/src/lib/grids/row.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts @@ -336,7 +336,7 @@ export class IgxRowDirective implemen * * ```typescript * handleRowSelection(event) { - * // the grid on which the rowSelected event was triggered + * // the grid on which the rowSelectionChanging event was triggered * const grid = event.row.grid; * } * ``` @@ -344,7 +344,7 @@ export class IgxRowDirective implemen * ```html * + * (rowSelectionChanging)="handleRowSelection($event)"> * * ``` */ diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index 98f96ad4e08..6b0334bcf69 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts @@ -578,7 +578,7 @@ export class IgxGridSelectionService { oldSelection: currSelection, newSelection, added, removed, event, cancel: false }; - this.grid.rowSelected.emit(args); + this.grid.rowSelectionChanging.emit(args); if (args.cancel) { return; } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts index 6699b029e77..400b476c512 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts @@ -124,7 +124,7 @@ export class IgxTreeGridSelectionService extends IgxGridSelectionService { // retrieve rows/parents/children which has been added/removed from the selection this.handleAddedAndRemovedArgs(args); - this.grid.rowSelected.emit(args); + this.grid.rowSelectionChanging.emit(args); if (args.cancel) { return; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 5473eec5c3b..9572b04e1c8 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -331,7 +331,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { }); it('Header checkbox should NOT select/deselect all rows when selectionMode is single', () => { - spyOn(treeGrid.rowSelected, 'emit').and.callThrough(); + spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough(); treeGrid.rowSelection = GridSelectionMode.single; fix.detectChanges(); @@ -341,7 +341,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); TreeGridFunctions.verifyDataRowsSelection(fix, [], false); expect(treeGrid.selectedRows).toEqual([]); - expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); TreeGridFunctions.clickHeaderRowSelectionCheckbox(fix); fix.detectChanges(); @@ -349,7 +349,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); TreeGridFunctions.verifyDataRowsSelection(fix, [], false); expect(treeGrid.selectedRows).toEqual([]); - expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('should be able to select row of any level', () => { @@ -1602,13 +1602,13 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 6, true, true); })); - it(`Setting true to the cancel property of the rowSelected event should not modify the selected rows collection`, () => { + it(`Setting true to the cancel property of the rowSelectionChanging event should not modify the selected rows collection`, () => { - treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => { + treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => { e.cancel = true; }); - spyOn(treeGrid.rowSelected, 'emit').and.callThrough(); + spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough(); treeGrid.selectionService.selectRowsWithNoEvent([317]); fix.detectChanges(); @@ -1625,7 +1625,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { cancel: true }; - expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); fix.detectChanges(); expect(getVisibleSelectedRows(fix).length).toBe(4); @@ -1685,11 +1685,11 @@ describe('IgxTreeGrid - Selection #tGrid', () => { }); it('selectRowById event SHOULD be emitted correctly with valid arguments.', () => { - spyOn(treeGrid.rowSelected, 'emit').and.callThrough(); + spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough(); treeGrid.selectionService.selectRowsWithNoEvent([317]); fix.detectChanges(); - expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0); expect(getVisibleSelectedRows(fix).length).toBe(4); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true); @@ -1709,7 +1709,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { cancel: false }; - expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args); treeGrid.cdr.detectChanges(); @@ -1725,10 +1725,10 @@ describe('IgxTreeGrid - Selection #tGrid', () => { }); it('After changing the newSelection arguments of onSelectedRowChange, the arguments SHOULD be correct.', () => { - treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => { + treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => { e.newSelection = [847, 663]; }); - spyOn(treeGrid.rowSelected, 'emit').and.callThrough(); + spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough(); treeGrid.selectionService.selectRowsWithNoEvent([317], true); fix.detectChanges(); @@ -1744,7 +1744,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { cancel: false }; - expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(selectionArgs); + expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(selectionArgs); treeGrid.cdr.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts index d4558fe8496..8043d5266f5 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts @@ -41,9 +41,9 @@ export interface IEditDone { editDone(event): void; } -/* Add to template: ` (rowSelected)="rowSelectionChange($event)"` */ +/* Add to template: ` (rowSelectionChanging)="rowSelectionChange($event)"` */ export interface IGridRowSelectionChange { - rowSelected(event): void; + rowSelectionChanging(event): void; } /* Add to template: ` (columnResized)="columnResized($event)"` */ diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 9d8e441a11f..349d7316606 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -237,13 +237,13 @@ export class RowSelectionWithoutPrimaryKeyComponent extends BasicGridComponent { @Component({ template: GridTemplateStrings.declareGrid( ` rowSelection = "multiple"`, - EventSubscriptions.rowSelected, + EventSubscriptions.rowSelectionChanging, ColumnDefinitions.productBasic) }) export class SelectionCancellableComponent extends BasicGridComponent { public data = SampleTestData.foodProductData(); - public rowSelected(evt) { + public rowSelectionChanging(evt) { if (evt.added.length > 0 && (evt.added[0].ProductID) % 2 === 0) { evt.newSelection = evt.oldSelection || []; } diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts index a0253b287fc..8cf9d6687ee 100644 --- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts @@ -524,7 +524,7 @@ export class EventSubscriptions { public static onEditDone = ` (cellEdit)="editDone($event)"`; - public static rowSelected = ` (rowSelected)="rowSelected($event)"`; + public static rowSelectionChanging = ` (rowSelectionChanging)="rowSelectionChanging($event)"`; public static columnResized = ` (columnResized)="columnResized($event)"`; diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index 7812a692ad8..1d0fecaf3ea 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -69,7 +69,7 @@

Selection Performance

+ height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelectionChanging)="rowSelectionChanged($event)"> diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html index 9124e5f21a4..c592adc14df 100644 --- a/src/app/grid-selection/grid-selection.sample.html +++ b/src/app/grid-selection/grid-selection.sample.html @@ -17,7 +17,7 @@
+ [width]="'800px'" [height]="'600px'" (rowSelectionChanging)="log($event)"> diff --git a/src/app/grid-updates-test/grid-updates.component.html b/src/app/grid-updates-test/grid-updates.component.html index 6bf5f0ffb1b..0ebfed7848a 100644 --- a/src/app/grid-updates-test/grid-updates.component.html +++ b/src/app/grid-updates-test/grid-updates.component.html @@ -2,13 +2,13 @@ Sample with Grids
- @@ -53,7 +53,7 @@ - +