fix(hgrid): Block child expansion based on hasChildrenKey prop #6816

Author: dkamburov

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

@@ -3007,13 +3007,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     public set expansionStates(value) {
+        value = this.filterExpansionStates(value);
         this._expansionStates = new Map<any, boolean>(value);
         this.expansionStatesChange.emit(this._expansionStates);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
         }
     }
 
+    protected filterExpansionStates(value) {
+        return value;
+    }
+
    /**
      * Expands all rows.
      * @example

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

@@ -414,6 +414,19 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
+    protected filterExpansionStates(expStates: Map<any, boolean>) {
+        const results = new Map<any, boolean>(expStates);
+        if (this.hasChildrenKey) {
+            expStates.forEach((value, item) => {
+                const rec = this.primaryKey ? this.data.find(x => x[this.primaryKey] === item) : item;
+                if (!rec[this.hasChildrenKey]) {
+                    results.delete(item);
+                }
+            });
+        }
+        return results;
+    }
+
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         this.updateColumnList();
         const cols = change.filter(c => c.gridAPI.grid === this);

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

@@ -416,6 +416,43 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
 
         expect(childGrid.calcWidth - 370 ).toBeLessThan(3);
     });
+
+    it('should not expand children when hasChildrenKey is false for the row', () => {
+        hierarchicalGrid.hasChildrenKey = 'hasChild';
+        fixture.componentInstance.data = [
+            {ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1)},
+            {ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1)}
+        ];
+        fixture.detectChanges();
+        const row1 = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        const rowElems = fixture.debugElement.queryAll(By.directive(IgxHierarchicalRowComponent));
+        expect(rowElems[0].query(By.css('igx-icon')).nativeElement.innerText).toEqual('');
+        const row2 = hierarchicalGrid.getRowByIndex(1) as IgxHierarchicalRowComponent;
+        expect(rowElems[1].query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right');
+        hierarchicalGrid.expandRow(row1.rowData);
+        hierarchicalGrid.expandRow(row2.rowData);
+        expect(row1.expanded).toBe(false);
+        expect(row2.expanded).toBe(true);
+    });
+
+    it('should not expand children when hasChildrenKey is false for the row and there is primaryKey', () => {
+        hierarchicalGrid.hasChildrenKey = 'hasChild';
+        hierarchicalGrid.primaryKey = 'ID';
+        fixture.componentInstance.data = [
+            {ID: 1, ProductName: 'Product: A1', hasChild: false, childData: fixture.componentInstance.generateDataUneven(1, 1)},
+            {ID: 2, ProductName: 'Product: A2', hasChild: true, childData: fixture.componentInstance.generateDataUneven(1, 1)}
+        ];
+        fixture.detectChanges();
+        const row1 = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        const rowElems = fixture.debugElement.queryAll(By.directive(IgxHierarchicalRowComponent));
+        expect(rowElems[0].query(By.css('igx-icon')).nativeElement.innerText).toEqual('');
+        const row2 = hierarchicalGrid.getRowByIndex(1) as IgxHierarchicalRowComponent;
+        expect(rowElems[1].query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right');
+        hierarchicalGrid.expandRow(1);
+        hierarchicalGrid.expandRow(2);
+        expect(row1.expanded).toBe(false);
+        expect(row2.expanded).toBe(true);
+    });
 });
 
 describe('IgxHierarchicalGrid Row Islands #hGrid', () => {