feat(grid-toolbar): Hierarchical grid implementation

Closes #8055

Author: rkaraivanov

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

@@ -4735,11 +4735,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.toolbar.first) {
             toolbarHeight = this.getComputedHeight(this.toolbar.first.nativeElement);
         }
-        // if (this.showToolbar && this.toolbarHtml != null) {
-        //     const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
-        //     toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
-        //     height : 0;
-        // }
         return toolbarHeight;
     }
 

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

@@ -1,5 +1,5 @@
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { TestBed, fakeAsync, async, tick, ComponentFixture } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { first } from 'rxjs/operators';
@@ -9,7 +9,6 @@ import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './public_api';
 import { DisplayDensity } from '../../core/displayDensity';
-import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 
@@ -25,7 +24,7 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
     configureTestSuite();
     let grid: IgxGridComponent;
 
-    beforeAll(async(() => {
+    beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 GridToolbarTestPage1Component,

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

@@ -1,6 +1,5 @@
-<igx-grid-toolbar role="toolbar" [style.max-width.px]='outerWidth' [style.flex-basis.px]="outerWidth" *ngIf="showToolbar" [gridID]="id"
-    [displayDensity]="displayDensity" #toolbar>
-</igx-grid-toolbar>
+<ng-container *ngTemplateOutlet="toolbarTemplate; context: { $implicit: this }"></ng-container>
+
 
 <div class="igx-grid__thead">
     <div class="igx-grid__thead-wrapper"  tabindex="0" (focus)="navigation.focusFirstCell()" [attr.aria-activedescendant]="activeDescendant"

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

@@ -1,28 +1,28 @@
 import {
+    AfterContentInit,
+    AfterViewInit,
     ChangeDetectionStrategy,
     Component,
+    ContentChild,
+    ContentChildren,
+    DoCheck,
+    ElementRef,
+    forwardRef,
     HostBinding,
     Input,
-    forwardRef,
+    OnDestroy,
+    OnInit,
+    QueryList,
     TemplateRef,
     ViewChild,
-    ViewChildren,
-    QueryList,
-    ContentChildren,
-    ElementRef,
-    AfterViewInit,
-    AfterContentInit,
-    OnInit,
-    OnDestroy,
-    DoCheck
+    ViewChildren
 } from '@angular/core';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridBaseAPIService } from '../api.service';
 import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service';
 import { IgxRowIslandComponent } from './row-island.component';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
-import { DisplayDensity } from '../../core/displayDensity';
 import { IgxColumnComponent, } from '../columns/column.component';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
@@ -34,6 +34,7 @@ import { IgxTransactionService } from '../../services/public_api';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { GridType } from '../common/grid.interface';
 import { IgxRowIslandAPIService } from './row-island-api.service';
+import { IgxGridToolbarDirective, IgxGridToolbarTemplateContext } from '../toolbar/common';
 
 let NEXT_ID = 0;
 
@@ -220,6 +221,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     @ViewChild('headerHierarchyExpander', { read: ElementRef, static: true })
     protected headerHierarchyExpander: ElementRef;
 
+    @ContentChild(IgxGridToolbarDirective, { read: TemplateRef, static: true })
+    public toolbarTemplate: TemplateRef<IgxGridToolbarTemplateContext>;
     /**
      * @hidden
      */

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

@@ -1,26 +1,28 @@
 import {
     AfterContentInit,
+    AfterViewInit,
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
+    ComponentFactoryResolver,
+    ContentChild,
     ContentChildren,
-    Input,
-    QueryList,
-    OnInit,
-    Inject,
+    DoCheck,
     ElementRef,
-    ChangeDetectorRef,
-    ComponentFactoryResolver,
+    EventEmitter,
+    Inject,
+    Input,
+    IterableChangeRecord,
     IterableDiffers,
-    ViewContainerRef,
     NgZone,
-    AfterViewInit,
     OnChanges,
-    Output,
-    EventEmitter,
-    Optional,
     OnDestroy,
-    DoCheck,
-    IterableChangeRecord
+    OnInit,
+    Optional,
+    Output,
+    QueryList,
+    TemplateRef,
+    ViewContainerRef
 } from '@angular/core';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxGridTransaction, IgxGridBaseDirective } from '../grid-base.directive';
@@ -29,19 +31,18 @@ import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service';
 import { DOCUMENT } from '@angular/common';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IDisplayDensityOptions, DisplayDensityToken } from '../../core/displayDensity';
-import { TransactionService, Transaction, State } from '../../services/public_api';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
-
 import { IgxOverlayService } from '../../services/public_api';
 import { takeUntil } from 'rxjs/operators';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IgxRowIslandAPIService } from './row-island-api.service';
 import { IBaseEventArgs } from '../../core/utils';
 import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { GridType } from '../common/grid.interface';
+import { IgxGridToolbarDirective, IgxGridToolbarTemplateContext } from '../toolbar/common';
 export interface IGridCreatedEventArgs extends IBaseEventArgs {
     owner: IgxRowIslandComponent;
     parentID: any;
@@ -53,10 +54,10 @@ export interface IGridCreatedEventArgs extends IBaseEventArgs {
     selector: 'igx-row-island',
     template: ``,
     providers: [IgxRowIslandAPIService,
-                IgxGridSelectionService]
+        IgxGridSelectionService]
 })
 export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
-            implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy, DoCheck {
+    implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy, DoCheck {
     /**
      * Sets the key of the row island by which child data would be taken from the row data if such is provided.
      * ```html
@@ -84,7 +85,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
      */
     @Input()
     set expandChildren(value: boolean) {
-        this._defaultExpandState  = value;
+        this._defaultExpandState = value;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
             if (document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
@@ -120,6 +121,9 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
     @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent, descendants: false })
     public childColumns = new QueryList<IgxColumnComponent>();
 
+    @ContentChild(IgxGridToolbarDirective, { read: TemplateRef })
+    public islandToolbarTemplate: TemplateRef<IgxGridToolbarTemplateContext>;
+
     /**
      * @hidden
      */
@@ -160,14 +164,14 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
      */
     get id() {
         const pId = this.parentId ? this.parentId.substring(this.parentId.indexOf(this.layout_id) + this.layout_id.length) + '-' : '';
-        return this.layout_id + pId +  this.key;
+        return this.layout_id + pId + this.key;
     }
 
     /**
      * @hidden
      */
     get parentId() {
-       return this.parentIsland ? this.parentIsland.id : null;
+        return this.parentIsland ? this.parentIsland.id : null;
     }
 
     /**
@@ -259,16 +263,20 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
      * @hidden
      */
     ngAfterContentInit() {
+        // TODO: Discuss should it always take the parent toolbar if present
+        this.onGridCreated.pipe(takeUntil(this.destroy$)).subscribe(e => {
+            e.grid.toolbarTemplate = this.islandToolbarTemplate || e.grid.parent.toolbarTemplate;
+        });
         this.updateChildren();
         this.children.notifyOnChanges();
         this.children.changes.pipe(takeUntil(this.destroy$))
-        .subscribe((change) => {
-            this.updateChildren();
-            // update existing grids since their child ri have been changed.
-            this.getGridsForIsland(this.key).forEach(grid => {
-                (grid as any).onRowIslandChange(this.children);
+            .subscribe((change) => {
+                this.updateChildren();
+                // update existing grids since their child ri have been changed.
+                this.getGridsForIsland(this.key).forEach(grid => {
+                    (grid as any).onRowIslandChange(this.children);
+                });
             });
-        });
         const nestedColumns = this.children.map((layout) => layout.columnList.toArray());
         const colsArray = [].concat.apply([], nestedColumns);
         const topCols = this.columnList.filter((item) => {
@@ -279,19 +287,19 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             Promise.resolve().then(() => {
                 this.updateColumnList();
             });
-         });
+        });
 
-         // handle column changes so that they are passed to child grid instances when onColumnChange is emitted.
-         this.ri_columnListDiffer.diff(this.childColumns);
-         this.childColumns.toArray().forEach(x => x.onColumnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
-         this.childColumns.changes.pipe(takeUntil(this.destroy$)).subscribe((change: QueryList<IgxColumnComponent> ) => {
+        // handle column changes so that they are passed to child grid instances when onColumnChange is emitted.
+        this.ri_columnListDiffer.diff(this.childColumns);
+        this.childColumns.toArray().forEach(x => x.onColumnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
+        this.childColumns.changes.pipe(takeUntil(this.destroy$)).subscribe((change: QueryList<IgxColumnComponent>) => {
             const diff = this.ri_columnListDiffer.diff(change);
             if (diff) {
                 diff.forEachAddedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
                     record.item.onColumnChange.pipe(takeUntil(record.item.destroy$)).subscribe(() => this.updateColumnList());
                 });
             }
-         });
+        });
     }
 
     protected updateChildren() {
@@ -358,12 +366,12 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
     /**
      * @hidden
      */
-    reflow() {}
+    reflow() { }
 
     /**
      * @hidden
      */
-    calculateGridHeight() {}
+    calculateGridHeight() { }
 
     protected updateColumnList() {
         const nestedColumns = this.children.map((layout) => layout.columnList.toArray());

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

@@ -1,6 +1,7 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
+import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
 import { GridType } from '../common/grid.interface';
 import { IgxToggleDirective } from '../../directives/toggle/toggle.directive';
 import {
@@ -52,6 +53,15 @@ export class IgxGridToolbarTitleDirective { }
 @Directive({ selector: '[igxGridToolbarActions],igx-grid-toolbar-actions' })
 export class IgxGridToolbarActionsDirective { }
 
+export interface IgxGridToolbarTemplateContext {
+    $implicit: IgxHierarchicalGridComponent;
+}
+
+@Directive({ selector: '[igxGridToolbar]'})
+export class IgxGridToolbarDirective {
+    constructor(public template: TemplateRef<IgxGridToolbarTemplateContext>) {}
+}
+
 /**
  * Base class for the pinning/hiding column actions.
  *

projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts

@@ -12,6 +12,7 @@ import {
     IgxCSVTextDirective,
     IgxExcelTextDirective,
     IgxGridToolbarActionsDirective,
+    IgxGridToolbarDirective,
     IgxGridToolbarTitleDirective
 } from './common';
 
@@ -27,7 +28,8 @@ import {
         IgxGridToolbarExporterComponent,
         IgxGridToolbarHidingComponent,
         IgxGridToolbarPinningComponent,
-        IgxGridToolbarTitleDirective
+        IgxGridToolbarTitleDirective,
+        IgxGridToolbarDirective
     ],
     imports: [
         IgxColumnActionsModule,
@@ -44,7 +46,8 @@ import {
         IgxGridToolbarExporterComponent,
         IgxGridToolbarHidingComponent,
         IgxGridToolbarPinningComponent,
-        IgxGridToolbarTitleDirective
+        IgxGridToolbarTitleDirective,
+        IgxGridToolbarDirective
     ]
 })
 export class IgxGridToolbarModule {}

src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html

@@ -1,13 +1,23 @@
-<button (click)='setterBindingChange()'>Set rowSelection via binding</button>
-<button (click)='setterChange()'>Set rowSelection via setter on 1st row island</button>
+<!-- <button (click)='setterBindingChange()'>Set rowSelection via binding</button>
+<button (click)='setterChange()'>Set rowSelection via setter on 1st row island</button> -->
 <igx-hierarchical-grid #grid1 displayDensity="cosy" [data]="remoteData" [isLoading]="true" [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'800px'" [width]="'100%'" #hGrid [emptyGridMessage]="''">
+    <igx-grid-toolbar *igxGridToolbar>
+        <igx-grid-toolbar-title>Parent Toolbar</igx-grid-toolbar-title>
+        <igx-grid-toolbar-actions></igx-grid-toolbar-actions>
+    </igx-grid-toolbar>
     <igx-column field="CustomerID"></igx-column>
     <igx-column field="CompanyName"></igx-column>
     <igx-column field="ContactName"></igx-column>
     <igx-column field="ContactTitle"></igx-column>
     <igx-column field="Country"></igx-column>
     <igx-column field="Phone"></igx-column>
     <igx-row-island #rowIsland1 [key]="'Orders'" [isLoading]="true" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (onGridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
+        <igx-grid-toolbar *igxGridToolbar="let grid">
+            <igx-grid-toolbar-title>Child Toolbar - Level {{ grid.parentIsland.level }}</igx-grid-toolbar-title>
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
         <igx-column field="OrderID"></igx-column>
         <igx-column field="OrderDate"></igx-column>
         <igx-column field="ShipCountry"></igx-column>