Merge pull request #6525 from IgniteUI/mkirova/refactoring-expansion-states-2

MDV, TreeGrid, Hierarchical Grid expand/collapse state refactoring

Author: ChronosSF

CHANGELOG.md

@@ -17,6 +17,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - Hierarchical grid children no longer use the same `IgxTransactionService` instance and transaction handling should be modified to address each grid's transactions separately.
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
+    - **Breaking Change** - The following input and output have been deprecated for the `igxHierarchicalGrid` and will be removed in future versions:
+        - `hierarchicalState` -> `expansionStates` should be used instead.
+        - `hierarchicalStateChange` -> `expansionStatesChange` should be used instead.
+
     - `igxGridState` directive added to make it easy for developers to save and restore the grid state. The directive exposes the `getState` and `setState` methods to save/restore the state and an `options` input property to exclude features.
 - `IgxCarousel`:
     - **Breaking Changes** -The carousel slides are no longer array, they are changed to QueryList.
@@ -41,6 +45,8 @@ All notable changes for each version of this project will be documented in this
     - `collapsibleIndicatorTemplate` property is introduced to IgxColumnGroupComponent, which allows you to set a custom template for the expand collapse indicator;
     - `igxCollapsibleIndicator` directive has been introduced, which allows you to set a custom template for the expand collapse indicator;
     - `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
+    - `expandRow(rowID)`/`collapseRow(rowID)`/`toggleRow(rowID)` API methods are added for the `igxHierarchicalGrid`. They allow expanding/collapsing a row by its id.
+    - `onRowToggle` event is added for the `igxHierarchicalGrid`. It is emitted when the expanded state of a row is changed.
     - `IgxOverlayService`:
         - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
     - `IgxToggleDirective`:

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

@@ -13,6 +13,7 @@ import { Transaction, TransactionType, State } from '../services/transaction/tra
 import { IgxCell, IgxRow } from './selection/selection.service';
 import { GridType } from './common/grid.interface';
 import { ColumnType } from './common/column.interface';
+import { IRowToggleEventArgs } from './common/events';
 /**
  *@hidden
  */
@@ -538,4 +539,53 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
     public atInexistingPage(): boolean {
         return this.grid.totalPages - 1 > this.grid.page;
     }
+
+    public get_row_expansion_state(record: any): boolean {
+        const grid = this.grid;
+        const states = grid.expansionStates;
+        const rowID = grid.primaryKey ? record[grid.primaryKey] : record;
+        const expanded = states.get(rowID);
+
+        if (expanded !== undefined) {
+            return expanded;
+        } else {
+            return grid.getDefaultExpandState(record);
+        }
+    }
+
+    public set_row_expansion_state(rowID: any, expanded: boolean, event?: Event) {
+        const grid = this.grid;
+        const expandedStates = grid.expansionStates;
+
+        if (!this.allow_expansion_state_change(rowID, expanded)) {
+            return;
+        }
+
+        const args: IRowToggleEventArgs = {
+            rowID: rowID,
+            expanded: expanded,
+            event: event,
+            cancel: false
+        };
+
+        grid.onRowToggle.emit(args);
+
+        if (args.cancel) {
+            return;
+        }
+        expandedStates.set(rowID, expanded);
+        grid.expansionStates = expandedStates;
+        if (grid.rowEditable) {
+            grid.endEdit(true);
+        }
+    }
+
+    public get_rec_by_id(rowID) {
+        return  this.grid.primaryKey ? this.getRowData(rowID) : rowID;
+    }
+
+    public allow_expansion_state_change(rowID, expanded) {
+        return this.grid.expansionStates.get(rowID) !== expanded;
+    }
+
 }

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -856,24 +856,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     protected handleAlt(key: string, event: KeyboardEvent) {
-        if (this.row.nativeElement.tagName.toLowerCase() === 'igx-tree-grid-row' && this.isToggleKey(key)) {
+        if (this.isToggleKey(key)) {
             const collapse = (this.row as any).expanded && ROW_COLLAPSE_KEYS.has(key);
             const expand = !(this.row as any).expanded && ROW_EXPAND_KEYS.has(key);
-            if (collapse) {
-                (this.gridAPI as any).trigger_row_expansion_toggle(this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
-            } else if (expand) {
-                (this.gridAPI as any).trigger_row_expansion_toggle(this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
-            }
-        } else if ((this.grid as IgxGridComponent).hasDetails && this.isToggleKey(key)) {
-            const collapse = (this.row as any).expanded && ROW_COLLAPSE_KEYS.has(key);
-            const expand = !(this.row as any).expanded && ROW_EXPAND_KEYS.has(key);
-            const expandedStates = this.grid.expansionStates;
             if (expand) {
-                expandedStates.set(this.row.rowID, true);
+                this.gridAPI.set_row_expansion_state(this.row.rowID, true, event);
             } else if (collapse) {
-                expandedStates.set(this.row.rowID, false);
+                this.gridAPI.set_row_expansion_state(this.row.rowID, false, event);
             }
-            this.grid.expansionStates = expandedStates;
             this.grid.notifyChanges();
         }
     }

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -111,3 +111,10 @@ export interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventA
     dragDirective: IgxDragDirective;
     dragData: IgxRowDirective<IgxGridBaseDirective & IGridDataBindable>;
 }
+
+export interface IRowToggleEventArgs extends IBaseEventArgs {
+    rowID: any;
+    expanded: boolean;
+    event?: Event;
+    cancel: boolean;
+}

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

@@ -121,7 +121,8 @@ import {
     IGridClipboardEvent,
     IGridToolbarExportEventArgs,
     ISearchInfo,
-    ICellPosition
+    ICellPosition,
+    IRowToggleEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import { GridType } from './common/grid.interface';
@@ -1670,6 +1671,34 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     onGridCopy = new EventEmitter<IGridClipboardEvent>();
 
+    /**
+     *@hidden
+     */
+    @Output()
+    public expansionStatesChange = new EventEmitter<Map<any, boolean>>();
+
+    /**
+     * Emitted when the expanded state of a row gets changed.
+     * ```typescript
+     * rowToggle(event: IRowToggleEventArgs){
+     *  // the id of the row
+     *  const rowID = event.rowID;
+     *  // the new expansion state
+     *  const newExpandedState = event.expanded;
+     *  // the original event that triggered onRowToggle
+     *  const originalEvent = event.event;
+     *  // whether the event should be cancelled
+     *  event.cancel = true;
+     * }
+     * ```
+     * ```html
+     * <igx-grid [data]="employeeData" (onRowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
+     * ```
+	 * @memberof IgxGridBaseDirective
+     */
+    @Output()
+    public onRowToggle = new EventEmitter<IRowToggleEventArgs>();
+
     /**
      * @hidden
      */
@@ -2825,7 +2854,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private _horizontalForOfs: Array<IgxGridForOfDirective<any>> = [];
     private _multiRowLayoutRowSize = 1;
     protected _loadingId;
-
+    protected _expansionStates: Map<any, boolean> = new Map<any, boolean>();
+    protected _defaultExpandState = false;
     // Caches
     private _totalWidth = NaN;
     private _pinnedVisible = [];
@@ -3332,6 +3362,112 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.onColumnVisibilityChanged.emit(args);
     }
 
+    /**
+     * Returns a list of key-value pairs [row ID, expansion state]. Includes only states that differ from the default one.
+     * ```typescript
+     * const expansionStates = this.grid.expansionStates;
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    @Input()
+    public get expansionStates() {
+        return this._expansionStates;
+    }
+
+     /**
+     * Sets a list of key-value pairs [row ID, expansion state].
+     * ```typescript
+     * const states = new Map<any, boolean>();
+     * states.set(1, true);
+     * this.grid.expansionStates = states;
+     * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
+     * <ng-template igxGridDetail let-dataItem>
+     * <div *ngIf="dataItem.Category">
+     *  <header>{{dataItem.Category?.CategoryName}}</header>
+     * <span>{{dataItem.Category?.Description}}</span>
+     * </div>
+     * </ng-template>
+     * </igx-grid>
+     * ```
+	 * @memberof IgxGridBaseDirective
+     */
+    public set expansionStates(value) {
+        this._expansionStates = new Map<any, boolean>(value);
+        this.expansionStatesChange.emit(this._expansionStates);
+        if (this.gridAPI.grid) {
+            this.cdr.detectChanges();
+            this._focusActiveCell();
+        }
+    }
+
+   /**
+     * Expands all rows.
+     * ```typescript
+     * this.grid.expandAll();
+     * ```
+	 * @memberof IgxGridBaseDirective
+    */
+    public expandAll() {
+        this._defaultExpandState = true;
+        this.expansionStates = new Map<any, boolean>();
+    }
+
+   /**
+     * Collapses all rows.
+     * ```typescript
+     * this.grid.collapseAll();
+     * ```
+	 * @memberof IgxGridBaseDirective
+    */
+    public collapseAll() {
+        this._defaultExpandState = false;
+        this.expansionStates = new Map<any, boolean>();
+    }
+
+    /**
+     * Expands the row by its id. ID is either the primaryKey value or the data record instance.
+     * ```typescript
+     * this.grid.expandRow(rowID);
+     * ```
+	 * @memberof IgxGridBaseDirective
+     */
+    public expandRow(rowID: any) {
+        this.gridAPI.set_row_expansion_state(rowID, true);
+    }
+
+    /**
+     * Collapses the row by its id. ID is either the primaryKey value or the data record instance.
+     * ```typescript
+     * this.grid.collapseRow(rowID);
+     * ```
+	 * @memberof IgxGridBaseDirective
+    */
+    public collapseRow(rowID: any) {
+        this.gridAPI.set_row_expansion_state(rowID, false);
+    }
+
+
+    /**
+     * Toggles the row by its id. ID is either the primaryKey value or the data record instance.
+     * ```typescript
+     * this.grid.toggleRow(rowID);
+     * ```
+	 * @memberof IgxGridBaseDirective
+    */
+    public toggleRow(rowID: any) {
+        const rec = this.gridAPI.get_rec_by_id(rowID);
+        const state = this.gridAPI.get_row_expansion_state(rec);
+        this.gridAPI.set_row_expansion_state(rowID, !state);
+    }
+
+    public getDefaultExpandState(rec: any) {
+        return this._defaultExpandState;
+    }
+
     /**
      * Returns the native element of the `IgxGridComponent`.
      * ```typescript

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

@@ -59,13 +59,8 @@ export class IgxGridExpandableCellComponent extends IgxGridCellComponent impleme
      */
     public toggle(event: Event) {
         event.stopPropagation();
-        const expandedStates = this.grid.expansionStates;
-        expandedStates.set(this.row.rowID, !this.row.expanded);
-        this.grid.expansionStates = expandedStates;
-
-        if (this.grid.rowEditable) {
-            this.grid.endEdit(true);
-        }
+        const expansionState = this.gridAPI.get_row_expansion_state(this.row.rowData);
+        this.gridAPI.set_row_expansion_state(this.row.rowID, !expansionState, event);
     }
 
     /**

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

@@ -55,8 +55,6 @@ export class IgxGridRowComponent extends IgxRowDirective<IgxGridComponent> {
     }
 
     get expanded() {
-        const pk = this.grid.primaryKey;
-        const rowID = pk ? this.rowData[pk] : this.rowData;
-        return this.grid.expansionStates.get(rowID);
+        return this.gridAPI.get_row_expansion_state(this.rowData);
     }
 }