fix(tree-grid): Enable displaying flat data when foreignKey is not set - 15.0.x (#12435)

* fix(tree-grid): Enable displaying flat data when foreignKey is not set

* fix(tree-grid): remove fit from the unit test

* fix(tree-grid): add check whether primaryKey is set

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

Author: 3 people

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

@@ -10,7 +10,8 @@ import {
     IgxTreeGridDefaultLoadingComponent,
     IgxTreeGridCellSelectionComponent,
     IgxTreeGridSummariesTransactionsComponent,
-    IgxTreeGridNoDataComponent
+    IgxTreeGridNoDataComponent,
+    IgxTreeGridWithNoForeignKeyComponent
 } from '../../test-utils/tree-grid-components.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
 import { GridSelectionMode } from '../common/enums';
@@ -31,7 +32,8 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
                 IgxTreeGridDefaultLoadingComponent,
                 IgxTreeGridCellSelectionComponent,
                 IgxTreeGridSummariesTransactionsComponent,
-                IgxTreeGridNoDataComponent
+                IgxTreeGridNoDataComponent,
+                IgxTreeGridWithNoForeignKeyComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -143,6 +145,14 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
 
             expect(container.getAttribute('role')).toMatch('row');
         }));
+
+        it('should display flat data even if no foreignKey is set', () => {
+            fix = TestBed.createComponent(IgxTreeGridWithNoForeignKeyComponent);
+            grid = fix.componentInstance.treeGrid;
+            fix.detectChanges();
+
+            expect(grid.dataView.length).toBeGreaterThan(0);
+        });
     });
 
     describe('Auto-generated columns', () => {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts

@@ -27,11 +27,11 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
             return collection;
         }
 
-        if (primaryKey && foreignKey) {
-            hierarchicalRecords = this.hierarchizeFlatData(collection, primaryKey, foreignKey, treeGridRecordsMap, flatData);
-        } else if (childDataKey) {
+        if (childDataKey) {
             hierarchicalRecords = this.hierarchizeRecursive(collection, primaryKey, childDataKey, undefined,
                 flatData, 0, treeGridRecordsMap);
+        } else if (primaryKey) {
+            hierarchicalRecords = this.hierarchizeFlatData(collection, primaryKey, foreignKey, treeGridRecordsMap, flatData);
         }
 
         this.grid.flatData = this.grid.transactions.enabled ?
@@ -254,25 +254,24 @@ export class IgxTreeGridTransactionPipe implements PipeTransform {
                     return collection;
                 }
 
-                const foreignKey = this.grid.foreignKey;
                 const childDataKey = this.grid.childDataKey;
 
-                if (foreignKey) {
-                    const flatDataClone = cloneArray(collection);
-                    return DataUtil.mergeTransactions(
-                        flatDataClone,
-                        aggregatedChanges,
-                        this.grid.primaryKey,
-                        this.grid.dataCloneStrategy);
-                } else if (childDataKey) {
+                if (childDataKey) {
                     const hierarchicalDataClone = cloneHierarchicalArray(collection, childDataKey);
                     return DataUtil.mergeHierarchicalTransactions(
                         hierarchicalDataClone,
                         aggregatedChanges,
                         childDataKey,
                         this.grid.primaryKey,
                         this.grid.dataCloneStrategy
-                        );
+                    );
+                } else {
+                    const flatDataClone = cloneArray(collection);
+                    return DataUtil.mergeTransactions(
+                        flatDataClone,
+                        aggregatedChanges,
+                        this.grid.primaryKey,
+                        this.grid.dataCloneStrategy);
                 }
             }
         }

projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts

@@ -354,6 +354,23 @@ export class IgxTreeGridSummariesKeyScroliingComponent {
     public data = SampleTestData.employeeTreeDataPrimaryForeignKey();
 }
 
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" width="400px" height="800px">
+        <igx-column [field]="'ID'" width="150px" dataType="number"></igx-column>
+        <igx-column [field]="'ParentID'" width="150px" dataType="number"></igx-column>
+        <igx-column [field]="'Name'" width="150px" dataType="string"></igx-column>
+        <igx-column [field]="'HireDate'" width="150px" dataType="date"></igx-column>
+        <igx-column [field]="'Age'" width="150px" dataType="number"></igx-column>
+        <igx-column [field]="'OnPTO'" width="150px" dataType="boolean"></igx-column>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridWithNoForeignKeyComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+    public data = SampleTestData.employeeTreeDataPrimaryForeignKey();
+}
+
 @Component({
     template: `
     <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" expansionDepth="0"