Add Excel style filtering header icon template

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 11.0.0
+
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added a new directive for re-templating the Excel style filtering header icon - `IgxExcelStyleHeaderIconDirective`.
+
 ## 10.2.0
 
 ### General

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -37,17 +37,18 @@
     }
 
     %grid-excel-icon {
+        display: flex;
         cursor: pointer;
 
-        &.igx-icon {
+        igx-icon {
             width: rem(15px);
             height: rem(15px);
             font-size: rem(15px);
         }
     }
 
     %grid-excel-icon--filtered {
-        &.igx-icon {
+        igx-icon {
             color: if(
                 $variant == 'indigo-design',
                 igx-color($palette, 'warn', 500),

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

@@ -101,7 +101,7 @@ import { IgxColumnResizingService } from './resizing/resizing.service';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import {
     IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
-    IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective
+    IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective
 } from './grid/grid.directives';
 import {
     GridKeydownTargetType,
@@ -229,6 +229,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true })
     protected defaultCollapsedTemplate: TemplateRef<any>;
 
+     /**
+      * @hidden @internal
+      */
+    @ViewChild('defaultESFHeaderIcon', { read: TemplateRef, static: true })
+    protected defaultESFHeaderIconTemplate: TemplateRef<any>;
+
     /**
      * Gets/Sets the resource strings.
      * @remarks
@@ -1994,6 +2000,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef })
     public headerCollapseIndicatorTemplate: TemplateRef<any> = null;
 
+    /**
+     * The custom template, if any, that should be used when rendering a row expand indicator.
+     */
+    @ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef })
+    public excelStyleHeaderIconTemplate: TemplateRef<any> = null;
+
     /**
      * @hidden
      * @internal

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

@@ -5112,6 +5112,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
             expect(listItems[1].innerText).not.toBe('(Blanks)');
         }));
+
+        it('Should use custom excel style filter icon instead of default one.', fakeAsync(() => {
+            const header = GridFunctions.getColumnHeader('AnotherField', fix);
+            fix.detectChanges();
+            const icon = GridFunctions.getHeaderFilterIcon(header);
+            fix.detectChanges();
+            expect(icon).not.toBeNull();
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('filter_alt');
+        }));
     });
 
     describe('Load values on demand', () => {

projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts

@@ -63,6 +63,15 @@ export class IgxHeaderExpandIndicatorDirective {
 export class IgxHeaderCollapseIndicatorDirective {
 }
 
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxExcelStyleHeaderIcon]'
+})
+export class IgxExcelStyleHeaderIconDirective {
+}
+
 /**
  * @hidden
  */

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

@@ -3,6 +3,7 @@ import {
     IgxGroupAreaDropDirective,
     IgxGroupByRowTemplateDirective,
     IgxRowExpandedIndicatorDirective,
+    IgxExcelStyleHeaderIconDirective,
     IgxRowCollapsedIndicatorDirective,
     IgxHeaderExpandIndicatorDirective,
     IgxHeaderCollapseIndicatorDirective,
@@ -32,6 +33,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGroupByRowTemplateDirective,
     IgxGridDetailTemplateDirective,
     IgxRowExpandedIndicatorDirective,
+    IgxExcelStyleHeaderIconDirective,
     IgxRowCollapsedIndicatorDirective,
     IgxHeaderExpandIndicatorDirective,
     IgxHeaderCollapseIndicatorDirective,
@@ -52,6 +54,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGroupByRowTemplateDirective,
     IgxGridDetailTemplateDirective,
     IgxRowExpandedIndicatorDirective,
+    IgxExcelStyleHeaderIconDirective,
     IgxRowCollapsedIndicatorDirective,
     IgxHeaderExpandIndicatorDirective,
     IgxHeaderCollapseIndicatorDirective,

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

@@ -2,6 +2,10 @@
     <span [title]="columnTitle">{{ column.header || column.field }}</span>
 </ng-template>
 
+<ng-template #defaultESFHeaderIconTemplate>
+    <igx-icon>more_vert</igx-icon>
+</ng-template>
+
 <span class="igx-grid__th-title">
     <ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
     </ng-container>
@@ -16,8 +20,13 @@
         {{sortingIcon}}
     </igx-icon>
 
-    <igx-icon [ngClass]="filterIconClassName" [attr.draggable]="false" (click)="onFilteringIconClick($event)"
-        *ngIf="grid.allowFiltering == true && column.filterable && grid.filterMode == 'excelStyleFilter'">
-        more_vert
-    </igx-icon>
+    <div *ngIf="grid.allowFiltering == true && column.filterable && grid.filterMode == 'excelStyleFilter'"
+         (click)="onFilteringIconClick($event)"
+         (pointerdown)="$event.stopPropagation()"
+         [ngClass]="filterIconClassName">
+
+        <ng-container *ngTemplateOutlet="esfIconTemplate; context: { $implicit:  this }">
+        </ng-container>
+    </div>
+
 </div>

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

@@ -8,7 +8,9 @@ import {
     HostListener,
     Input,
     NgZone,
-    OnDestroy
+    OnDestroy,
+    TemplateRef,
+    ViewChild
 } from '@angular/core';
 import { DataType } from '../../data-operations/data-util';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
@@ -34,6 +36,12 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     private _destroy$ = new Subject<boolean>();
 
+    /**
+     * @hidden
+     */
+   @ViewChild('defaultESFHeaderIconTemplate', { read: TemplateRef, static: true })
+   protected defaultESFHeaderIconTemplate: TemplateRef<any>;
+
     @Input()
     public column: IgxColumnComponent;
 
@@ -83,6 +91,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         return null;
     }
 
+    /**
+     * @hidden
+     */
+    public get esfIconTemplate() {
+        return this.grid.excelStyleHeaderIconTemplate || this.defaultESFHeaderIconTemplate;
+    }
+
     get ascending() {
         return this.sortDirection === SortingDirection.Asc;
     }

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

@@ -350,6 +350,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         this.rowCollapsedIndicatorTemplate   = this.rootGrid.rowCollapsedIndicatorTemplate;
         this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate;
         this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate;
+        this.excelStyleHeaderIconTemplate = this.rootGrid.excelStyleHeaderIconTemplate;
         this.hasChildrenKey = this.parentIsland ?
          this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey :
          this.rootGrid.hasChildrenKey;

projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts

@@ -67,6 +67,7 @@ const GRID_FOOTER_CLASS = '.igx-grid__tfoot';
 const GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
 const DISPLAY_CONTAINER = 'igx-display-container';
 const SORT_ICON_CLASS = '.sort-icon';
+const FILTER_ICON_CLASS = '.igx-excel-filter__icon';
 const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
 const HOVERED_COLUMN_CLASS = 'igx-grid__th--selectable';
 const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
@@ -1871,6 +1872,10 @@ export class GridFunctions {
         return header.query(By.css(SORT_ICON_CLASS));
     }
 
+    public static getHeaderFilterIcon(header: DebugElement): DebugElement {
+        return header.query(By.css(FILTER_ICON_CLASS));
+    }
+
     public static clickHeaderSortIcon(header: DebugElement) {
         const sortIcon = header.query(By.css(SORT_ICON_CLASS));
         sortIcon.triggerEventHandler('click', new Event('click'));

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1232,6 +1232,10 @@ export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridCompone
             dataType="string" [filters]="customFilter" [sortable]="'true'" [movable]="'true'">
         </igx-column>
 
+        <ng-template igxExcelStyleHeaderIcon>
+            <igx-icon>filter_alt</igx-icon>
+        </ng-template>
+
         <igx-grid-excel-style-filtering [minHeight]="'0px'" [maxHeight]="'500px'">
             <igx-excel-style-column-operations>
                 <igx-excel-style-moving></igx-excel-style-moving>

src/app/grid-filtering/grid-filtering.sample.html

@@ -89,6 +89,10 @@ <h3>ESF Templates</h3>
                                                     [dataType]="c.type">
                 </igx-column>
 
+                <ng-template igxExcelStyleHeaderIcon>
+                    <igx-icon>filter_alt</igx-icon>
+                </ng-template>
+
                 <igx-grid-excel-style-filtering [minHeight]="'700px'" [maxHeight]="'none'">
                     <div igxExcelStyleColumnOperations>COLUMN OPERATIONS
                         <igx-excel-style-header></igx-excel-style-header>