Merge pull request #3117 from IgniteUI/rkolev/toolbar-template-7.0.x

Add custom content outlet for IgxGridToolbar - 7.0.x
IgniteUI · Dec 6, 2018 · fefe9cb · fefe9cb
2 parents 8141f23 + 1ed3b01
commit fefe9cb
Show file tree

Hide file tree

Showing 15 changed files with 327 additions and 78 deletions.
diff --git a/...igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss b/...igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss
@@ -15,6 +15,10 @@
         @extend %igx-grid-toolbar__title !optional;
     }
 
+    @include e(custom-content){
+        @extend %igx-grid-toolbar__custom-content !optional;
+    }
+
     @include e(actions){
         @extend %igx-grid-toolbar__actions !optional;
     }

diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -277,6 +277,11 @@
         @include ellipsis();
     }
 
+    %igx-grid-toolbar__custom-content {
+        display: flex;
+        flex-flow: row wrap;
+    }
+
     %igx-grid-toolbar__actions {
         display: flex;
         align-items: center;

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -62,6 +62,7 @@ import { IgxGridRowComponent } from './grid';
 import { IgxFilteringService } from './filtering/grid-filtering.service';
 import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
 import { IgxGridHeaderGroupComponent } from './grid-header-group.component';
+import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component';
 import { IGridResourceStrings } from '../core/i18n/grid-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 
@@ -1311,6 +1312,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ViewChild('scrollContainer', { read: IgxGridForOfDirective })
     public parentVirtDir: IgxGridForOfDirective<any>;
 
+    /**
+     * Returns the template which will be used by the toolbar to show custom content.
+     * ```typescript
+     * let customContentTemplate = this.grid.toolbarCustomContentTemplate;
+     * ```
+     * @memberof IgxGridBaseComponent
+     */
+    @ContentChild(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective })
+    public toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective;
+
     /**
      * @hidden
      */
@@ -1696,15 +1707,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ViewChild('toolbar', { read: ElementRef })
     private toolbarHtml: ElementRef = null;
 
-    public get shouldShowToolbar(): boolean {
-        return this.showToolbar &&
-            (this.columnHiding ||
-                this.columnPinning ||
-                this.exportExcel ||
-                this.exportCsv ||
-                (this.toolbarTitle && this.toolbarTitle !== null && this.toolbarTitle !== ''));
-    }
-
     /**
      * Returns whether the `IgxGridComponent`'s toolbar is shown or hidden.
      * ```typescript

diff --git a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts
@@ -57,6 +57,7 @@ import {
 import { IgxGridNavigationService } from './grid-navigation.service';
 import { IgxGridHeaderGroupComponent } from './grid-header-group.component';
 import { IgxColumnResizingService } from './grid-column-resizing.service';
+import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component';
 
 @NgModule({
     declarations: [
@@ -66,6 +67,7 @@ import { IgxColumnResizingService } from './grid-column-resizing.service';
         IgxGridHeaderComponent,
         IgxGridSummaryComponent,
         IgxGridToolbarComponent,
+        IgxGridToolbarCustomContentDirective,
         IgxCellFooterTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellEditorTemplateDirective,
@@ -97,6 +99,7 @@ import { IgxColumnResizingService } from './grid-column-resizing.service';
         IgxGridHeaderComponent,
         IgxGridSummaryComponent,
         IgxGridToolbarComponent,
+        IgxGridToolbarCustomContentDirective,
         IgxCellFooterTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellEditorTemplateDirective,

diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html
@@ -2,6 +2,11 @@
     {{ getTitle() }}
 </span>
 
+<div class="igx-grid-toolbar__custom-content" *ngIf="customContentTemplate != null">
+    <ng-container *ngTemplateOutlet="customContentTemplate; context: context">
+    </ng-container>
+</div>
+
 <div class="igx-grid-toolbar__actions">
     <div *ngIf="grid.columnHiding">
         <button igxButton="flat" #columnHidingButton name="btnColumnHiding" igxButton igxRipple

diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts
@@ -1,11 +1,13 @@
 import {
     ChangeDetectorRef,
     Component,
+    Directive,
     HostBinding,
     Input,
     Optional,
     ViewChild,
-    Inject
+    Inject,
+    TemplateRef
 } from '@angular/core';
 
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
@@ -350,4 +352,40 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
         this._overlaySettings.outlet = this.grid.outletDirective;
         this.columnPinningDropdown.toggle(this._overlaySettings);
     }
+
+    /**
+     * Returns the `context` object which represents the `template context` binding into the
+     * `toolbar custom container` by providing references to the parent IgxGird and the toolbar itself.
+     * ```typescript
+     * let context =  this.igxGrid.toolbar.context;
+     * ```
+     */
+    public get context(): any {
+        return {
+            // $implicit: this
+            grid: this.grid,
+            toolbar: this
+        };
+    }
+
+    /** @hidden */
+    public get customContentTemplate(): TemplateRef<any> {
+        if (this.grid != null && this.grid.toolbarCustomContentTemplate != null) {
+            return this.grid.toolbarCustomContentTemplate.template;
+        } else {
+            return null;
+        }
+    }
+}
+
+/**
+ * The IgxGridToolbarCustomContentDirective directive is used to mark an 'ng-template' (with
+ * the 'igxToolbarCustomContent' selector) defined in the IgxGrid which is used to provide
+ * custom content for cener part of the IgxGridToolbar.
+ */
+@Directive({
+    selector: '[igxToolbarCustomContent]'
+})
+export class IgxGridToolbarCustomContentDirective {
+    constructor(public template: TemplateRef<any>) { }
 }