Merge pull request #5226 from IgniteUI/mkirova/fix-5102

fix(igxHierarchicalGrid): Hierarchical Grid should update its childre…

Author: mpavlinov

projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.html

@@ -1,3 +1,3 @@
 <div class="igx-grid__hierarchical-indent" [ngClass]="{'igx-grid__hierarchical-indent--scroll': parentHasScroll}">
-    <igx-hierarchical-grid #hgrid></igx-hierarchical-grid>
+    <igx-hierarchical-grid #hgrid [data]='rowData.childGridsData[layout.key]'></igx-hierarchical-grid>
 </div>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts

@@ -141,9 +141,6 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      * @hidden
      */
     ngOnInit() {
-        // setting child data only once on init
-        // due to context change issues when moving cached views containing hierarchical child grids
-        this.hGrid.data = this.rowData.childGridsData[this.layout.key];
         this.layout.onLayoutChange.subscribe((ch) => {
             this._handleLayoutChanges(ch);
         });

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

@@ -269,6 +269,53 @@ describe('Basic IgxHierarchicalGrid', () => {
         expect(childGrid.displayDensity).toBe(DisplayDensity.compact);
     }));
 
+    it('should update child grid data when root grid data is changed.', () => {
+        const newData1 = [
+            {
+                ID: 0, ChildLevels: 0,  ProductName: 'Product: A', childData: [ {   ID: 1, ProductName: 'Product: Child A' } ]
+            },
+            {
+                ID: 1, ChildLevels: 0,  ProductName: 'Product: A1', childData: [ {   ID: 2, ProductName: 'Product: Child A' } ]
+            },
+            {
+                ID: 2, ChildLevels: 0,  ProductName: 'Product: A2', childData: [ {   ID: 3, ProductName: 'Product: Child A' } ]
+            }
+        ];
+        fixture.componentInstance.data = newData1;
+        fixture.detectChanges();
+        let row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+        let childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+        let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+        expect(childGrid.data).toBe(newData1[0].childData);
+
+        const newData2 = [
+            {
+                ID: 0, ChildLevels: 0,  ProductName: 'Product: A', childData: [ {   ID: 10, ProductName: 'Product: New Child A' } ]
+            },
+            {
+                ID: 1, ChildLevels: 0,  ProductName: 'Product: A1', childData: [ {   ID: 20, ProductName: 'Product: New Child A' } ]
+            },
+            {
+                ID: 2, ChildLevels: 0,  ProductName: 'Product: A2', childData: [ {   ID: 30, ProductName: 'Product: New Child A' } ]
+            }
+        ];
+        fixture.componentInstance.data = newData2;
+        fixture.detectChanges();
+
+        row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.clickElement(row.expander);
+        fixture.detectChanges();
+
+        childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+        childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+        expect(childGrid.data).toBe(newData2[0].childData);
+
+    });
+
     it('when child width is in percents its width should be update if parent width changes while parent row is collapsed. ', async () => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.clickElement(row.expander);