Merge pull request #5303 from IgniteUI/mkirova/fix-5039-master

fix(igxGrid): Make sure getSelectedData returns correct selected cell…

Author: rkaraivanov

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -4788,28 +4788,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     }
 
     extractDataFromSelection(source: any[]): any[] {
-        let column: IgxColumnComponent;
+        let columnsArray: IgxColumnComponent[];
         let record = {};
         const selectedData = [];
 
         const selectionMap = Array.from(this.selectionService.selection)
             .filter((tuple) => tuple[0] < source.length);
 
-        const visibleColumns = this.visibleColumns
-            .filter(col => !col.columnGroup)
-            .sort((a, b) => a.visibleIndex - b.visibleIndex);
-
 
         for (const [row, set] of selectionMap) {
             if (!source[row]) {
                 continue;
             }
             const temp = Array.from(set);
             for (const each of temp) {
-                column = visibleColumns[each];
-                if (column) {
-                    record[column.field] = source[row][column.field];
-                }
+                columnsArray = this.getSelectableColumnsAt(each);
+                columnsArray.forEach((col) => {
+                    if (col) {
+                        record[col.field] = source[row][col.field];
+                    }
+                });
             }
             if (Object.keys(record).length) {
                 selectedData.push(record);
@@ -4819,6 +4817,21 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return selectedData;
     }
 
+    protected getSelectableColumnsAt(index) {
+        if (this.hasColumnLayouts) {
+            const visibleLayoutColumns = this.visibleColumns
+            .filter(col => col.columnLayout)
+            .sort((a, b) => a.visibleIndex - b.visibleIndex);
+            const colLayout = visibleLayoutColumns[index];
+            return colLayout ? colLayout.children.toArray() : [];
+        } else {
+            const visibleColumns = this.visibleColumns
+            .filter(col => !col.columnGroup)
+            .sort((a, b) => a.visibleIndex - b.visibleIndex);
+            return [ visibleColumns[index] ];
+        }
+    }
+
     getSelectedData() {
         const source = this.verticalScrollContainer.igxForOf;
 

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -1110,6 +1110,42 @@ describe('IgxGrid - multi-row-layout Integration - ', () => {
             expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns).toEqual('200px 200px 650px 50px 100px 200px');
         });
     });
+
+    describe('Selection ', () => {
+        beforeEach(async(() => {
+            fixture = TestBed.createComponent(ColumnLayoutGroupingTestComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            colGroups = fixture.componentInstance.colGroups;
+        }));
+
+        it('should return correct selected data via getSelectedData API.', () => {
+            const selectedData1 = [{
+                ID: 'ALFKI',
+                CompanyName: 'Alfreds Futterkiste',
+                ContactName: 'Maria Anders',
+                ContactTitle: 'Sales Representative'
+            }];
+            const selectedData2 = [{
+                PostalCode: '05021',
+                City: 'México D.F.',
+                Country: 'Mexico',
+                Address: 'Avda. de la Constitución 2222'
+            }];
+            let cell = grid.getCellByColumn(0, 'CompanyName');
+            UIInteractions.clickElement(cell);
+            fixture.detectChanges();
+
+            expect(grid.getSelectedData()).toEqual(selectedData1);
+
+            cell = grid.getCellByColumn(1, 'City');
+            UIInteractions.clickElement(cell);
+            fixture.detectChanges();
+
+            expect(grid.getSelectedData()).toEqual(selectedData2);
+        });
+    });
+
 });
 
 @Component({