diff --git a/CHANGELOG.md b/CHANGELOG.md index b92eb1fd94a..45ef16e532c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -73,7 +73,8 @@ 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 + - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function. + - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` 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 33a842432bb..66533b0031d 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 @@ -31,6 +31,16 @@ "IgxHierarchicalGridComponent", "IgxRowIslandComponent" ] + }, + { + "member": "columnSelected", + "replaceWith": "columnSelectionChanging", + "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 index 5f930796e75..2603dc4ff64 100644 --- a/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json +++ b/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json @@ -32,6 +32,38 @@ "selector": "igx-row-island", "type": "component" } + }, + { + "name": "columnSelected", + "replaceWith": "columnSelectionChanging", + "owner": { + "selector": "igx-grid", + "type": "component" + } + }, + { + "name": "columnSelected", + "replaceWith": "columnSelectionChanging", + "owner": { + "selector": "igx-tree-grid", + "type": "component" + } + }, + { + "name": "columnSelected", + "replaceWith": "columnSelectionChanging", + "owner": { + "selector": "igx-hierarchical-grid", + "type": "component" + } + }, + { + "name": "columnSelected", + "replaceWith": "columnSelectionChanging", + "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 b0b1b67b5d3..ab2dae66d67 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -229,7 +229,7 @@ A list of the events emitted by the **igx-grid**: |`columnMovingStart`|Emitted when a column moving starts. Returns the moved column object.| |`selected`|Emitted when a cell is selected. Returns the cell object.| |`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| +|`columnSelectionChanging`|Emitted when a column selection is changing. 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.| |`filteringDone`|Emitted when filtering is performed through the UI. Returns the filtering expressions tree of the column for which the filtering was performed.| diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts index c9bc5e1a205..b7007db10b6 100644 --- a/projects/igniteui-angular/src/lib/grids/common/events.ts +++ b/projects/igniteui-angular/src/lib/grids/common/events.ts @@ -91,11 +91,11 @@ export interface IRowSelectionEventArgs extends CancelableEventArgs, IBaseEventA } export interface IColumnSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { - oldSelection: string[]; + readonly oldSelection: string[]; newSelection: string[]; - added: string[]; - removed: string[]; - event?: Event; + readonly added: string[]; + readonly removed: string[]; + readonly event?: Event; } export interface ISearchInfo { 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 a21a3fe3436..8305ade7c13 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -476,11 +476,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @Output() - public columnSelected = new EventEmitter(); + public columnSelectionChanging = new EventEmitter(); /** * Emitted before `IgxColumnComponent` is pinned. diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts index 94e183cc37b..c8b8ba35c52 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts @@ -58,7 +58,7 @@ describe('IgxGrid - Column Selection #grid', () => { })); it('setting selected and selectable properties ', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); grid.columnList.forEach(column => { expect(column.selectable).toBeTruthy(); expect(column.selected).toBeFalsy(); @@ -81,17 +81,17 @@ describe('IgxGrid - Column Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyColumnAndCellsSelected(col, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('selecting a column with mouse click', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); colProductName.selectable = false; fix.detectChanges(); GridFunctions.clickColumnHeaderUI('ProductID', fix); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IColumnSelectionEventArgs = { oldSelection: [], newSelection: ['ProductID'], @@ -100,17 +100,17 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridFunctions.clickColumnHeaderUI('ProductName', fix); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductName, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); GridFunctions.clickColumnHeaderUI('InStock', fix); GridSelectionFunctions.verifyColumnAndCellsSelected(colInStock); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { oldSelection: ['ProductID'], newSelection: ['InStock'], @@ -119,11 +119,11 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridFunctions.clickColumnHeaderUI('InStock', fix); GridSelectionFunctions.verifyColumnAndCellsSelected(colInStock, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); args = { oldSelection: ['InStock'], newSelection: [], @@ -132,7 +132,7 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('verify selectable class is applied when hover a column', () => { @@ -180,11 +180,11 @@ describe('IgxGrid - Column Selection #grid', () => { }); }); - it('verify canceling event columnSelected', () => { + it('verify canceling event columnSelectionChanging', () => { GridFunctions.clickColumnHeaderUI('ProductID', fix); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID); - grid.columnSelected.subscribe((e: IColumnSelectionEventArgs) => { + grid.columnSelectionChanging.subscribe((e: IColumnSelectionEventArgs) => { e.cancel = true; }); @@ -212,7 +212,7 @@ describe('IgxGrid - Column Selection #grid', () => { }); it('verify method selectColumns', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); const colUnits = grid.getColumnByName('UnitsInStock'); const colOrderDate = grid.getColumnByName('OrderDate'); // select columns with array of fields @@ -249,11 +249,11 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colProductID); GridSelectionFunctions.verifyColumnsSelected([colOrderDate, colInStock, colProductName], false); expect(grid.selectedColumns()).toEqual([colProductID]); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('verify method deselectColumns', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); grid.columns.forEach(col => col.selected = true); const colUnits = grid.getColumnByName('UnitsInStock'); @@ -284,7 +284,7 @@ describe('IgxGrid - Column Selection #grid', () => { }); it('verify methods selectAllColumns and deselectAllColumns', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); // select all columns grid.selectAllColumns(); fix.detectChanges(); @@ -311,7 +311,7 @@ describe('IgxGrid - Column Selection #grid', () => { expect(c.selected).toEqual(true); }); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('verify method getSelectedColumnsData', () => { @@ -362,7 +362,7 @@ describe('IgxGrid - Column Selection #grid', () => { })); it('selecting a column with ctrl + mouse click', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); colProductName.selectable = false; fix.detectChanges(); @@ -370,7 +370,7 @@ describe('IgxGrid - Column Selection #grid', () => { grid.cdr.detectChanges(); GridSelectionFunctions.verifyColumnSelected(colProductID); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IColumnSelectionEventArgs = { oldSelection: [], newSelection: ['ProductID'], @@ -379,14 +379,14 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colInStock, true); grid.cdr.detectChanges(); GridSelectionFunctions.verifyColumnSelected(colProductID); GridSelectionFunctions.verifyColumnSelected(colInStock); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { oldSelection: ['ProductID'], newSelection: ['ProductID', 'InStock'], @@ -395,11 +395,11 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colProductName, true); grid.cdr.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); const colOrderDate = grid.getColumnByName('OrderDate'); GridSelectionFunctions.clickOnColumnToSelect(colOrderDate, true); @@ -408,7 +408,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colProductID); GridSelectionFunctions.verifyColumnSelected(colInStock); GridSelectionFunctions.verifyColumnSelected(colOrderDate); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); args = { oldSelection: ['ProductID', 'InStock'], newSelection: ['ProductID', 'InStock', 'OrderDate'], @@ -417,7 +417,7 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colInStock, true); grid.cdr.detectChanges(); @@ -425,7 +425,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colProductID); GridSelectionFunctions.verifyColumnSelected(colOrderDate); GridSelectionFunctions.verifyColumnSelected(colInStock, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(4); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(4); args = { oldSelection: ['ProductID', 'InStock', 'OrderDate'], newSelection: ['ProductID', 'OrderDate'], @@ -434,14 +434,14 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colOrderDate); grid.cdr.detectChanges(); GridSelectionFunctions.verifyColumnSelected(colProductID, false); GridSelectionFunctions.verifyColumnSelected(colOrderDate); GridSelectionFunctions.verifyColumnSelected(colInStock, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(5); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(5); args = { oldSelection: ['ProductID', 'OrderDate'], newSelection: ['OrderDate'], @@ -450,11 +450,11 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('selecting a column with shift + mouse click', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); const colUnits = grid.getColumnByName('UnitsInStock'); const colOrderDate = grid.getColumnByName('OrderDate'); colUnits.selected = true; @@ -466,7 +466,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colUnits); GridSelectionFunctions.verifyColumnSelected(colInStock); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); let args: IColumnSelectionEventArgs = { oldSelection: ['UnitsInStock'], newSelection: ['UnitsInStock', 'InStock'], @@ -475,7 +475,7 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colOrderDate, false, true); grid.cdr.detectChanges(); @@ -483,7 +483,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colOrderDate); GridSelectionFunctions.verifyColumnSelected(colInStock); GridSelectionFunctions.verifyColumnSelected(colUnits); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); args = { oldSelection: ['UnitsInStock', 'InStock'], newSelection: ['UnitsInStock', 'InStock', 'OrderDate'], @@ -492,7 +492,7 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); GridSelectionFunctions.clickOnColumnToSelect(colProductID, false, true); grid.cdr.detectChanges(); @@ -502,7 +502,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnSelected(colProductID); GridSelectionFunctions.verifyColumnSelected(colInStock); GridSelectionFunctions.verifyColumnSelected(colUnits); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); args = { oldSelection: ['UnitsInStock', 'InStock', 'OrderDate'], newSelection: ['UnitsInStock', 'InStock', 'ProductID'], @@ -511,7 +511,7 @@ describe('IgxGrid - Column Selection #grid', () => { event: jasmine.anything() as any, cancel: false }; - expect(grid.columnSelected.emit).toHaveBeenCalledWith(args); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledWith(args); }); it('Verify changing selection to none', () => { @@ -637,7 +637,7 @@ describe('IgxGrid - Column Selection #grid', () => { const companyName = grid.getColumnByName('CompanyName'); const contactName = grid.getColumnByName('ContactName'); const contactTitle = grid.getColumnByName('ContactTitle'); - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); // verify setting selected true on a column group genInf.selected = true; @@ -661,7 +661,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnsSelected([companyName, contactName, contactTitle]); GridSelectionFunctions.verifyColumnGroupSelected(fix, personDetails); GridSelectionFunctions.verifyColumnGroupSelected(fix, genInf); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('setting selected on a column group with no selectable children', () => { @@ -673,7 +673,7 @@ describe('IgxGrid - Column Selection #grid', () => { const postalCode = grid.getColumnByName('PostalCode'); const city = grid.getColumnByName('City'); const address = grid.getColumnByName('Address'); - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); // verify setting selected true on a column group countryInf.selected = true; @@ -692,7 +692,7 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnGroupSelected(fix, countryInf, false); GridSelectionFunctions.verifyColumnGroupSelected(fix, regInf, false); GridSelectionFunctions.verifyColumnGroupSelected(fix, cityInf, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('setting selectable false to group children', () => { @@ -701,7 +701,7 @@ describe('IgxGrid - Column Selection #grid', () => { const companyName = grid.getColumnByName('CompanyName'); const contactName = grid.getColumnByName('ContactName'); const contactTitle = grid.getColumnByName('ContactTitle'); - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); // verify setting selected true on a column group contactName.selectable = false; @@ -717,7 +717,7 @@ describe('IgxGrid - Column Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyColumnGroupSelected(fix, personDetails, false); GridSelectionFunctions.verifyColumnGroupSelected(fix, genInf, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(0); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(0); }); it('verify that when hover group all its selectable children have correct classes', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index ecc082b1041..f0550a7eebb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -5612,7 +5612,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { grid.columnSelection = GridSelectionMode.multiple; fix.detectChanges(); - spyOn(grid.columnSelected, 'emit'); + spyOn(grid.columnSelectionChanging, 'emit'); const column = grid.getColumnByName('Downloads'); fix.componentInstance.esf.column = column; fix.detectChanges(); @@ -5620,13 +5620,13 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.verifyColumnAndCellsSelected(column, true); GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); GridSelectionFunctions.verifyColumnAndCellsSelected(column, false); // Test in single selection mode @@ -5642,7 +5642,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); GridSelectionFunctions.verifyColumnAndCellsSelected(column, true); GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false); @@ -6116,7 +6116,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { grid.columnSelection = GridSelectionMode.multiple; fix.detectChanges(); - spyOn(grid.columnSelected, 'emit'); + spyOn(grid.columnSelectionChanging, 'emit'); const column = grid.getColumnByName('Downloads'); fix.componentInstance.esf.column = column; fix.detectChanges(); @@ -6124,13 +6124,13 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(1); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(1); GridSelectionFunctions.verifyColumnAndCellsSelected(column, true); GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(2); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(2); GridSelectionFunctions.verifyColumnAndCellsSelected(column, false); // Test in single selection mode @@ -6146,7 +6146,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix); fix.detectChanges(); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); GridSelectionFunctions.verifyColumnAndCellsSelected(column, true); GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts index 952fd98cd8c..ce2bd0a7132 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts @@ -549,7 +549,7 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { }); it('Column selection: Should be able to select columns when columnSelection is single', () => { - spyOn(grid.columnSelected, 'emit').and.callThrough(); + spyOn(grid.columnSelectionChanging, 'emit').and.callThrough(); const columnID = grid.getColumnByName('ID'); const columnParentID = grid.getColumnByName('ParentID'); const columnName = grid.getColumnByName('Name'); @@ -592,7 +592,7 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyColumnAndCellsSelected(columnName, false); - expect(grid.columnSelected.emit).toHaveBeenCalledTimes(3); + expect(grid.columnSelectionChanging.emit).toHaveBeenCalledTimes(3); }); it('Group by: Should be able group columns with keyboard', () => { 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 6b0334bcf69..dec9582fdd0 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts @@ -730,7 +730,7 @@ export class IgxGridSelectionService { oldSelection: currSelection, newSelection, added, removed, event, cancel: false }; - this.grid.columnSelected.emit(args); + this.grid.columnSelectionChanging.emit(args); if (args.cancel) { return; } diff --git a/src/app/grid-column-selection/grid-column-selection.sample.html b/src/app/grid-column-selection/grid-column-selection.sample.html index cc5098a4d12..cbbfb66cf3c 100644 --- a/src/app/grid-column-selection/grid-column-selection.sample.html +++ b/src/app/grid-column-selection/grid-column-selection.sample.html @@ -16,7 +16,7 @@ + [height]="'800px'" (columnSelectionChanging)="onColumnSelection($event)"> diff --git a/src/app/grid-events/grid-events.component.html b/src/app/grid-events/grid-events.component.html index c29879cbcd9..1c504b6e39b 100644 --- a/src/app/grid-events/grid-events.component.html +++ b/src/app/grid-events/grid-events.component.html @@ -3,7 +3,7 @@ cancel filtering cancel pinning cancel resizing - cancel columnSelected + cancel columnSelectionChanging cancel hiding @@ -38,7 +38,7 @@ (columnVisibilityChanging)="columnVisibilityChanging($event)" (columnVisibilityChanged)="columnVisibilityChanged($event)" (columnResized)="columnResized($event)" - (columnSelected)="columnSelected($event)"> + (columnSelectionChanging)="columnSelectionChanging($event)"> diff --git a/src/app/grid-events/grid-events.component.ts b/src/app/grid-events/grid-events.component.ts index 25d6d352b9f..76f306aaec9 100644 --- a/src/app/grid-events/grid-events.component.ts +++ b/src/app/grid-events/grid-events.component.ts @@ -25,7 +25,7 @@ export class GridEventsComponent { public $paging = false; public $pinning = false; public $resizing = false; - public $columnSelected = false; + public $columnSelectionChanging = false; public $hiding = false; public $moving = false; public localData: any[]; @@ -100,9 +100,9 @@ export class GridEventsComponent { this.logAnEvent(`=> columnResized`); } - public columnSelected(event: IColumnSelectionEventArgs) { - event.cancel = this.$columnSelected; - this.logAnEvent('=> columnSelected', event.cancel); + public columnSelectionChanging(event: IColumnSelectionEventArgs) { + event.cancel = this.$columnSelectionChanging; + this.logAnEvent('=> columnSelectionChanging', event.cancel); } public clearLog() {