feat(tree-grid): adding option to expand/collapse #2530

Author: DiyanDimitrov

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-cell.component.ts

@@ -11,20 +11,38 @@ import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 })
 export class IgxTreeGridCellComponent extends IgxGridCellComponent {
     public get indentation() {
-        const flatRowComponent = <IgxTreeGridRowComponent>this.row;
-        return flatRowComponent.flatRow.indentationLevel;
+        return this.row.flatRow.indentationLevel;
     }
 
     public get hasChildren() {
-        const flatRowComponent = <IgxTreeGridRowComponent>this.row;
-        return flatRowComponent.flatRow.hasChildren;
+        return this.row.flatRow.hasChildren;
     }
 
     @HostBinding('attr.aria-expanded')
     get expanded(): boolean {
-        return true;
+        const states = (<IgxTreeGridComponent>this.grid).expandedStates;
+        const rowID = this.row.rowID;
+        const expanded = states.get(rowID);
+
+        if (expanded !== undefined) {
+            return expanded;
+        } else {
+            return this.getDefaultExpandedState();
+        }
+    }
+
+    private getDefaultExpandedState(): boolean {
+        const indentationLevel = this.indentation;
+        const expandedLevels = (<IgxTreeGridComponent>this.grid).expandedLevels;
+
+        return expandedLevels < 0 || (expandedLevels >= 0 && indentationLevel < expandedLevels);
     }
 
     public toggle() {
+        const states = (<IgxTreeGridComponent>this.grid).expandedStates;
+        const rowID = this.row.rowID;
+        states.set(rowID, !this.expanded);
+
+        (<IgxTreeGridComponent>this.grid).expandedStates = states;
     }
 }

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid.component.html

@@ -43,7 +43,8 @@
 <div class="igx-grid__tbody" role="rowgroup" [style.height.px]='calcHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
     <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-left"></span>
     <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-    <ng-template igxFor let-rowData [igxForOf]="data | treeGridHierarchizing:childDataKey:id:pipeTrigger | treeGridFlattening:id:pipeTrigger"
+    <ng-template igxFor let-rowData [igxForOf]="data | treeGridHierarchizing:childDataKey:id:pipeTrigger |
+        treeGridFlattening:id:expandedLevels:expandedStates:pipeTrigger"
     let-rowIndex="index" [igxForScrollOrientation]="'vertical'"
     [igxForContainerSize]='calcHeight' [igxForItemSize]="rowHeight" #verticalScrollContainer (onChunkPreload)="dataLoading($event)">
         <ng-template #record_template>

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid.component.ts

@@ -81,6 +81,29 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
     @Input()
     public childDataKey;
 
+    /**
+     * An @Input property that sets the child data key of the `IgxTreeGridComponent`.
+     * ```html
+     * <igx-tree-grid #grid [data]="localData" [showToolbar]="true" [childDataKey]="employees" [autoGenerate]="true"></iigx-tree-grid>
+     * ```
+	 * @memberof IgxTreeGridRowComponent
+     */
+    @Input()
+    public expandedLevels = -1;
+
+    private _expandedStates:  Map<any, boolean> = new Map<any, boolean>();
+
+    @Input()
+    public get expandedStates() {
+        return this._expandedStates;
+    }
+
+    public set expandedStates(value) {
+        this._expandedStates = this.cloneMap(value);
+
+        this.cdr.detectChanges();
+    }
+
     private gridAPI: IgxTreeGridAPIService;
 
     constructor(
@@ -95,7 +118,20 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
         this.gridAPI = <IgxTreeGridAPIService>gridAPI;
     }
 
-     /**
+
+    private cloneMap(mapIn: Map<any, boolean>):  Map<any, boolean> {
+        const mapCloned: Map<any, boolean> = new Map<any, boolean>();
+
+        mapIn.forEach((value: boolean, key: any, mapObj: Map<any, boolean>) => {
+
+          mapCloned.set(key, value);
+        });
+
+        return mapCloned;
+    }
+
+
+    /**
     * @hidden
     */
     public getContext(rowData): any {

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid.pipes.ts

@@ -74,20 +74,20 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform {
         this.gridAPI = <IgxTreeGridAPIService>gridAPI;
     }
 
-    public transform(collection: IHierarchizedResult,
-        id: string, pipeTrigger: number): any[] {
+    public transform(collection: IHierarchizedResult, id: string,
+        expandedLevels: number, expandedStates: Map<any, boolean>, pipeTrigger: number): any[] {
 
         const grid: IgxTreeGridComponent = this.gridAPI.get(id);
-
+        const primaryKey = grid.primaryKey;
         const data: IFlattenedRecord[] = [];
 
-        this.getFlatDataRecusrive(collection.data, data, 0);
+        this.getFlatDataRecusrive(collection.data, data, expandedLevels, expandedStates, primaryKey, 0);
 
         return data;
     }
 
-    private getFlatDataRecusrive(collection: IHierarchicalRecord[], data: IFlattenedRecord[] = [], indentationLevel: number) {
-
+    private getFlatDataRecusrive(collection: IHierarchicalRecord[], data: IFlattenedRecord[] = [],
+        expandedLevels: number, expandedStates: Map<any, boolean>, primaryKey: any, indentationLevel: number) {
         if (!collection || !collection.length) {
             return;
         }
@@ -100,7 +100,18 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform {
                 hasChildren: hirarchicalRecord.children && hirarchicalRecord.children.length > 0
             };
             data.push(flatRecord);
-            this.getFlatDataRecusrive(hirarchicalRecord.children, data, indentationLevel + 1);
+
+            const rowID = primaryKey ? flatRecord.data[primaryKey] : flatRecord.data;
+
+            let isExpanded = expandedStates.get(rowID);
+            if (isExpanded === undefined) {
+                isExpanded = expandedLevels < 0 || (expandedLevels >= 0 && indentationLevel < expandedLevels);
+            }
+
+            if (isExpanded) {
+                this.getFlatDataRecusrive(hirarchicalRecord.children, data, expandedLevels,
+                    expandedStates, primaryKey, indentationLevel + 1);
+            }
         }
     }
 }

Diff for: src/app/tree-grid/tree-grid.sample.html

@@ -6,7 +6,7 @@
 
     <div class="sample-content">
         <div class="sample-column">
-            <igx-tree-grid #grid1 [data]="data" childDataKey="ChildCompanies" [rowSelectable]="true" [paging]="false" [width]="'900px'" [height]="'500px'">
+            <igx-tree-grid #grid1 [data]="data" childDataKey="ChildCompanies" expandedLevels="1" [rowSelectable]="true" [paging]="false" [width]="'900px'" [height]="'500px'">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"