Display empty grid message when the data is set and then cleared - master (#12746)

* fix(Tree Grid): Display empty grid message when the data is set and then cleared

* refactor(Tree Grid): Modifying the value of flatData and adding tests

* fix(Tree Grid): Updating excelStyleFiltering values when there is no data

* chore(Tree Grid): Adding tests for ESF message when there is no data

Author: IvanKitanov17

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

@@ -699,6 +699,60 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
             const emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
             expect(emptyTextEl.innerText).toEqual('No matches');
         }));
+
+        it('Should display message when there is no data', fakeAsync(() => {
+            let data = tGrid.data;
+            tGrid.data = [];
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            tick();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            let emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
+            expect(emptyTextEl.innerText).toEqual('No matches');
+
+            tGrid.data = data;
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            tick();
+
+            searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
+            expect(emptyTextEl).toBeFalsy();
+
+        }));
+
+        it('Should display message when the last row is deleted', fakeAsync(() => {
+            tGrid.data = [];
+            tGrid.primaryKey = 'ID';
+            const row = {
+                ID: 0,
+                Name: 'John Winchester',
+                HireDate: new Date(2008, 3, 20),
+                Age: 55,
+                OnPTO: false,
+                Employees: []
+            };
+            tGrid.addRow(row);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            tick();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            let emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
+            expect(emptyTextEl).toBeFalsy();
+
+            tGrid.deleteRowById(0);
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            fix.detectChanges();
+            tick();
+
+            searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
+            expect(emptyTextEl.innerText).toEqual('No matches');
+        }));
     });
 
     describe('Tree grid ESF templates', () => {

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

@@ -294,4 +294,48 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
         });
     });
 
+    describe('Displaying empty grid message', () => {
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTreeGridWrappedInContComponent);
+            grid = fix.componentInstance.treeGrid;
+            fix.detectChanges();
+        }));
+
+        it('should display empty grid message when there is no data', () => {
+            const data: any[] = grid.data;
+            grid.data = [];
+            fix.detectChanges();
+            let emptyGridMessage = fix.debugElement.query(By.css('.igx-grid__tbody-message'));
+            expect(emptyGridMessage).toBeTruthy();
+            expect(emptyGridMessage.nativeElement.innerText).toBe('Grid has no data.');
+
+            grid.data = data;
+            fix.detectChanges();
+            emptyGridMessage = fix.debugElement.query(By.css('.igx-grid__tbody-message'));
+            expect(emptyGridMessage).toBeFalsy();
+        });
+
+        it('should display empty grid message when last row is deleted', () => {
+            grid.data = [];
+            grid.addRow({
+                ID: 0,
+                Name: 'John Winchester',
+                HireDate: new Date(2008, 3, 20),
+                Age: 55,
+                OnPTO: false,
+                Employees: []
+            });
+
+            fix.detectChanges();
+            let emptyGridMessage = fix.debugElement.query(By.css('.igx-grid__tbody-message'));
+            expect(emptyGridMessage).toBeFalsy();
+
+            grid.deleteRowById(0);
+            fix.detectChanges();
+            emptyGridMessage = fix.debugElement.query(By.css('.igx-grid__tbody-message'));
+            expect(emptyGridMessage).toBeTruthy();
+            expect(emptyGridMessage.nativeElement.innerText).toBe('Grid has no data.');
+        });
+    });
+
 });

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

@@ -24,6 +24,9 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
         const flatData: any[] = [];
 
         if (!collection || !collection.length) {
+            this.grid.flatData = collection;
+            this.grid.records = treeGridRecordsMap;
+            this.grid.rootRecords = collection;
             return collection;
         }