Merge pull request #12278 from IgniteUI/dpetev/tree-grid-no-data

fix(grid,tree-grid): avoid errors on basic init without data set

Author: kdinev

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

@@ -2661,6 +2661,40 @@ describe('IgxGrid Component Tests #grid', () => {
             fix.detectChanges();
         });
     });
+
+    describe('Setting null data', () => {
+        beforeAll(waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridNoDataComponent,
+                    IgxGridTestComponent
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule
+                ]
+            })
+            .compileComponents();
+        }));
+
+        it('should not throw error when data is null', () => {
+            const fix = TestBed.createComponent(IgxGridNoDataComponent);
+            fix.componentInstance.grid.batchEditing = true;
+            expect(() => fix.detectChanges()).not.toThrow();
+        });
+
+        it('should not throw error when data is set to null', () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            fix.componentInstance.data = null;
+            expect(() => fix.detectChanges()).not.toThrow();
+        });
+
+        it('should not throw error when data is set to null and transactions are enabled', () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            fix.componentInstance.grid.batchEditing = true;
+            fix.componentInstance.data = null;
+            expect(() => fix.detectChanges()).not.toThrow();
+        });
+    });
 });
 
 @Component({
@@ -3258,3 +3292,16 @@ export class IgxGridPerformanceComponent implements AfterViewInit, OnInit {
         this.delta = new Date().getTime() - this.startTime;
     }
 }
+
+@Component({
+    template: `
+        <igx-grid>
+            <igx-column field="ID"></igx-column>
+            <igx-column field="Name" [hasSummary]="true"></igx-column>
+            <igx-paginator></igx-paginator>
+        </igx-grid>
+    `
+})
+export class IgxGridNoDataComponent {
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
+}

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

@@ -87,7 +87,7 @@ export class IgxGridPagingPipe implements PipeTransform {
             index: page,
             recordsPerPage: perPage
         };
-        const total = this.grid._totalRecords >= 0 ? this.grid._totalRecords : collection.data.length;
+        const total = this.grid._totalRecords >= 0 ? this.grid._totalRecords : collection.data?.length;
         DataUtil.correctPagingState(state, total);
 
         const result = {

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

@@ -23,9 +23,9 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
 
     public get_summary_data() {
         const grid = this.grid;
-        const data = grid.processedRootRecords.filter(row => row.isFilteredOutParent === undefined || row.isFilteredOutParent === false)
+        const data = grid.processedRootRecords?.filter(row => row.isFilteredOutParent === undefined || row.isFilteredOutParent === false)
             .map(rec => rec.data);
-        if (grid.transactions.enabled) {
+        if (data && grid.transactions.enabled) {
             const deletedRows = grid.transactions.getTransactionLog().filter(t => t.type === TransactionType.DELETE).map(t => t.id);
             deletedRows.forEach(rowID => {
                 const tempData = grid.primaryKey ? data.map(rec => rec[grid.primaryKey]) : data;

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

@@ -9,7 +9,8 @@ import {
     IgxTreeGridWrappedInContComponent,
     IgxTreeGridDefaultLoadingComponent,
     IgxTreeGridCellSelectionComponent,
-    IgxTreeGridSummariesTransactionsComponent
+    IgxTreeGridSummariesTransactionsComponent,
+    IgxTreeGridNoDataComponent
 } from '../../test-utils/tree-grid-components.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
 import { GridSelectionMode } from '../common/enums';
@@ -29,7 +30,8 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
                 IgxTreeGridWrappedInContComponent,
                 IgxTreeGridDefaultLoadingComponent,
                 IgxTreeGridCellSelectionComponent,
-                IgxTreeGridSummariesTransactionsComponent
+                IgxTreeGridSummariesTransactionsComponent,
+                IgxTreeGridNoDataComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -264,27 +266,21 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
 
     describe('Setting null data', () => {
         it('should not throw error when data is null', () => {
-            let errorMessage = '';
+            fix = TestBed.createComponent(IgxTreeGridNoDataComponent);
+            fix.componentInstance.treeGrid.batchEditing = true;
+            expect(() => fix.detectChanges()).not.toThrow();
+        });
+
+        it('should not throw error when data is set to null', () => {
             fix = TestBed.createComponent(IgxTreeGridCellSelectionComponent);
             fix.componentInstance.data = null;
-            try {
-                fix.detectChanges();
-            } catch (ex) {
-                errorMessage = ex.message;
-            }
-            expect(errorMessage).toBe('');
+            expect(() => fix.detectChanges()).not.toThrow();
         });
 
-        it('should not throw error when data is null and transactions are enabled', () => {
-            let errorMessage = '';
+        it('should not throw error when data is set to null and transactions are enabled', () => {
             fix = TestBed.createComponent(IgxTreeGridSummariesTransactionsComponent);
             fix.componentInstance.data = null;
-            try {
-                fix.detectChanges();
-            } catch (ex) {
-                errorMessage = ex.message;
-            }
-            expect(errorMessage).toBe('');
+            expect(() => fix.detectChanges()).not.toThrow();
         });
     });
 

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

@@ -23,6 +23,10 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
         const treeGridRecordsMap = new Map<any, ITreeGridRecord>();
         const flatData: any[] = [];
 
+        if (!collection || !collection.length) {
+            return collection;
+        }
+
         if (primaryKey && foreignKey) {
             hierarchicalRecords = this.hierarchizeFlatData(collection, primaryKey, foreignKey, treeGridRecordsMap, flatData);
         } else if (childDataKey) {

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

@@ -155,12 +155,12 @@ export class IgxTreeGridExpandingComponent {
 @Component({
     template: `
     <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" childDataKey="Employees" expansionDepth="2"
-        width="900px" height="500px" [perPage]="10">
+        width="900px" height="500px">
         <igx-column [field]="'ID'" dataType="number"></igx-column>
         <igx-column [field]="'Name'" dataType="string"></igx-column>
         <igx-column [field]="'HireDate'" dataType="date"></igx-column>
         <igx-column [field]="'Age'" dataType="number"></igx-column>
-        <igx-paginator></igx-paginator>
+        <igx-paginator [perPage]="10"></igx-paginator>
     </igx-tree-grid>
     `
 })
@@ -169,6 +169,22 @@ export class IgxTreeGridCellSelectionComponent {
     public data = SampleTestData.employeeTreeData();
 }
 
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid primaryKey="ID" childDataKey="Employees" expansionDepth="2"
+        width="900px" height="500px">
+        <igx-column [field]="'ID'" dataType="number"></igx-column>
+        <igx-column [field]="'Name'" dataType="string"></igx-column>
+        <igx-column [field]="'HireDate'" dataType="date" [hasSummary]="true"></igx-column>
+        <igx-column [field]="'Age'" dataType="number" [hasSummary]="true"></igx-column>
+        <igx-paginator [perPage]="10"></igx-paginator>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridNoDataComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+}
+
 // Test Component with 'string' dataType tree-column
 @Component({
     template: `