fix(grid): update response from emitRowSelectionEvent to have whole record (#12400)

* fix(grid): update response from emitRowSelectionEvent to have whole record

* feat(*): initial implementation of the rowSelection event unification #12371

* fix(grid): fix the issues with selection of multiple rows#12371

* fix(grid):  apply selection correctly when filtering is applied #12371

* fix(grid): add owner to the rowSelectionChanges event args #12502

* feat(treeGrid): tree grid should also emit row data instead row IDs #12371

* feat(Grid): delect row without event when is deleted #12371

* chore(*): fix issue with TGrid selection params

* chore(*): use correct method

* fix(PGrid): update the selection service to work properly for the pGrid #12371

* chore(*): some minor code implovements and clean up

* chore(*): update changelog - unification of the rowSelectionChanging event args

* chore(*): address the review comments

* feat(grid): add comments to code around the blocking scenario

* chore(*): remove import that is not used

* fix(*): emit partial rowData when grid is working with remote data

* chore(*): update the change log with remote row selection

* fix(grid): create new partial data object  on erach iteration

* fix(grid): take care if primaryKey si set

* chore(grid): remove debugging lines

* chore(*): type the emitted object

* chore(*): dont import from public api

* chore(*): add test and enhance the logic for rowSelection in tGrid without PK

* chore(*): fix test due to whitespace mismatch

* chore(*): give the mathod 'getPivotRows' more meaningful name

---------

Co-authored-by: Hristo <[email protected]>
Co-authored-by: Desislava Dincheva <[email protected]>
Co-authored-by: ddincheva <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -3,14 +3,17 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 15.1.0
-
 ### General
  - `IgxPivotGrid`
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
  - `IgxGrid`
     - **Breaking Change** The `onGroupingDone` output has been renamed to `groupingDone` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
  - `DisplayDensity`
-    - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components expolsing this event are affected. Automatic migrations are available and will be applied on `ng update`.
+    - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on `ng update`.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - `rowSelectionChanging` event arguments are changed. Now the `oldSelection`, `newSelection`, `added` and `removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted.
+    When the grid is working with remote data and a primary key has been set- for the selected rows that are not currently part of the grid view, will be emitted a partial row data object.
+    - **Behavioral Change** - When selected row is deleted from the grid component `rowSelectionChanging` event will no longer be emitted.
  - `IgxCarousel`
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
@@ -24,7 +27,7 @@ All notable changes for each version of this project will be documented in this
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
 - `IgxSimpleCombo`
-    - **Behavioral Change** 
+    - **Behavioral Change**
     - When the user clicks on the combo's input, the dropdown opens up.
     - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 
@@ -109,7 +112,7 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - The filtering logic inside the grid's Advanced Filtering  is now extracted as a separate  `IgxQueryBuilder` component. The Query Builder allows you to build complex queries by specifying AND/OR operators, conditions and values using the UI. It outputs an object describing the structure of the query. Use the `locale` property to modify the locale settings. The default value is resolved to the global Angular application locale. The `resourceStrings` allows changing the displayed strings.
-    
+
     - Code example below:
 
     ```html
@@ -145,7 +148,7 @@ All notable changes for each version of this project will be documented in this
     <ng-template igxPivotValueChip let-value>
             {{ value.member }}
     </ng-template>
-    ``` 
+    ```
     - Add support for usage with igxGridState to persist state of the pivotConfiguration with an additional `pivotConfiguration` option:
 
     ```html
@@ -161,7 +164,7 @@ All notable changes for each version of this project will be documented in this
     ```
 
     One known issue of the igxGridState directive is that it cannot store functions as the state is stored as string.
-    As a result any custom functions set to `memberFunction`, `aggregator`, `formatter`, `styles` etc. will not be stored. Restoring any of these can be achieved with code on application level. 
+    As a result any custom functions set to `memberFunction`, `aggregator`, `formatter`, `styles` etc. will not be stored. Restoring any of these can be achieved with code on application level.
     Hence we have also exposed 2 new events:
         - `dimensionInit` - emits when a dimension from the configuration is being initialized.
         - `valueInit` - emits when a value from the configuration is being initialized.
@@ -221,7 +224,7 @@ All notable changes for each version of this project will be documented in this
     <column width='auto' ...>
     ```
     - Added support for restoring filtering expressions with custom filtering operands for the `IgxGridStateDirective`.
-    
+
 
 - Added the `IgcFormControl` directive that, when imported with its `IgcFormsModule`, is designed to seamlessly attach to form components from the Ignite UI for WebComponents package and allows using them in Angular templates and reactive forms with support for `ngModel` and `formControlName` directives. Currently the only Web Component with support through the directive is `igc-rating`.
 
@@ -236,7 +239,7 @@ All notable changes for each version of this project will be documented in this
 
 ## 14.0.0
 
-- Added additional theme properties for the `IgxCalendar` so that it's easier to style the `:hover` and `:focus` states inside the selected date or range of dates. 
+- Added additional theme properties for the `IgxCalendar` so that it's easier to style the `:hover` and `:focus` states inside the selected date or range of dates.
 - `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
 - `IgxCombo` and  `IgxSimpleComboComponent`
     - The combobox `role`, `aria-haspopup`, `aria-expanded`, `aria-controls` and `aria-labelledby` attributes have been moved from combo wrapper to the combo input. Additionally the  `IgxSimpleComboComponent` input is marked with `aria-readonly="false"` and `aria-autocomplete="list"` attributes. The `aria-labelled` attribute is applied to the combo dropdown as well and can be set by the `ariaLabelledBy` property, the combo label or placeholder. The serach input within the combo dropdown is now marked as `role="searchbox"`, `aria-label="search"` and `aria-autocomplete="list"`. The dropdown item container has `aria-activedescendant` attribute to identify the currently active element of the item list. The `IgxCombo` container is also marked as `aria-multiselectable="true"`. The dropdown header items role has been changed to `group`.

projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts

@@ -199,7 +199,7 @@ describe(`DateTimeUtil Unit tests`, () => {
         expect(result).toEqual('MM/dd/yyyy');
 
         result = DateTimeUtil.getDefaultInputFormat('bg-BG');
-        expect(result).toEqual('dd.MM.yyyy г.');
+        expect(result.replace(/\s/g, '')).toEqual('dd.MM.yyyyг.');
 
         expect(() => {
             result = DateTimeUtil.getDefaultInputFormat(null);

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -355,7 +355,7 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         this.deleteRowFromData(rowId, index);
 
         if (grid.selectionService.isRowSelected(rowId)) {
-            grid.selectionService.deselectRow(rowId);
+            grid.selectionService.deselectRowsWithNoEvent([rowId]);
         } else {
             grid.selectionService.clearHeaderCBState();
         }

projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

@@ -49,6 +49,7 @@ describe('IgxGrid - Row Selection #grid', () => {
     describe('Base tests', () => {
         let fix: ComponentFixture<RowSelectionComponent>;
         let grid: IgxGridComponent;
+        const gridData = SampleTestData.foodProductDataExtended();
 
         beforeEach(() => {
             fix = TestBed.createComponent(RowSelectionComponent);
@@ -134,14 +135,16 @@ 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];
+            const allRows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
+            const allRowsArray = [gridData[0], gridData[1], gridData[2], gridData[3], gridData[4], gridData[5], gridData[6], gridData[7], gridData[8], gridData[9],
+            gridData[10], gridData[11], gridData[12], gridData[13], gridData[14], gridData[15], gridData[16], gridData[17], gridData[18]];
             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.selectedRows).toEqual(allRows);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
                 added: allRowsArray,
@@ -150,7 +153,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: allRowsArray,
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: true
+                allRowsSelected: true,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -168,7 +172,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 removed: allRowsArray,
                 event: jasmine.anything() as any,
                 cancel: false,
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -213,13 +218,14 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
-                added: [1],
+                added: [gridData[0]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1],
+                newSelection: [gridData[0]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -237,13 +243,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([1, 2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             args = {
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1, 2],
-                oldSelection: [1],
+                newSelection: [gridData[0], gridData[1]],
+                oldSelection: [gridData[0]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -259,10 +266,11 @@ describe('IgxGrid - Row Selection #grid', () => {
                 added: [],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [2],
-                oldSelection: [1, 2],
-                removed: [1],
-                allRowsSelected: false
+                newSelection: [gridData[1]],
+                oldSelection: [gridData[0], gridData[1]],
+                removed: [gridData[0]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -278,9 +286,10 @@ describe('IgxGrid - Row Selection #grid', () => {
                 cancel: false,
                 event: jasmine.anything() as any,
                 newSelection: [],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -299,13 +308,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [2],
+                newSelection: [gridData[1]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             });
 
             // Click again on same row
@@ -325,13 +335,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([3]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [3],
+                added: [gridData[2]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [3],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                newSelection: [gridData[2]],
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             });
         });
         it('Should select the row only on checkbox click when selectRowOnClick has value false', () => {
@@ -521,13 +532,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2, 3, 4, 5]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [3, 4, 5],
+                added: [gridData[2], gridData[3], gridData[4]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [2, 3, 4, 5],
-                oldSelection: [2],
+                newSelection: [gridData[1], gridData[2], gridData[3], gridData[4]],
+                oldSelection: [gridData[1]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             });
 
             for (let index = 1; index < 5; index++) {
@@ -704,7 +716,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             const secondRow = grid.gridAPI.get_row_by_index(1);
             const thirdRow = grid.gridAPI.get_row_by_index(2);
             grid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
-                if (e.added.length > 0 && (e.added[0]) % 2 === 0) {
+                if (e.added.length > 0 && (e.added[0].ProductID) % 2 === 0) {
                     e.newSelection = e.oldSelection || [];
                 }
             });
@@ -819,6 +831,7 @@ describe('IgxGrid - Row Selection #grid', () => {
     describe('RowSelection single', () => {
         let fix: ComponentFixture<SingleRowSelectionComponent>;
         let grid: IgxGridComponent;
+        const gridData = SampleTestData.foodProductDataExtended();
 
         beforeEach(() => {
             fix = TestBed.createComponent(SingleRowSelectionComponent);
@@ -865,13 +878,14 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
-                added: [1],
+                added: [gridData[0]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1],
+                newSelection: [gridData[0]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -888,13 +902,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             args = {
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [2],
-                oldSelection: [1],
-                removed: [1],
-                allRowsSelected: false
+                newSelection: [gridData[1]],
+                oldSelection: [gridData[0]],
+                removed: [gridData[0]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -1041,13 +1056,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([5]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [5],
+                added: [gridData[4]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [5],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                newSelection: [gridData[4]],
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             });
 
             GridSelectionFunctions.verifyRowSelected(secondRow);
@@ -1383,7 +1399,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: [gridData[1]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -1399,7 +1416,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: [gridData[1], gridData[2], gridData[3], gridData[4]],
                 oldSelection: [gridData[1]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });