Merge pull request #12202 from IgniteUI/mkirova/expose-excel-filtering-template

feat(igxGrid): Add excel style filter template and group row template inputs.

Author: dkamburov

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `igxGrid` - exposing new Input properties:
 
+    - `excelStyleHeaderIconTemplate` - Gets/Sets the excel style header icon.
+    - `groupRowTemplate` - Gets/Sets the template reference for the group row.
     - `headSelectorTemplate` - Gets/Sets the header row selector template.
     - `rowSelectorTemplate` - Gets/Sets the custom template used for row selectors.
     - `groupByRowSelectorTemplate` - Gets/Sets the custom template used for the group row selectors.

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

@@ -1472,7 +1472,32 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * The custom template, if any, that should be used when rendering a row expand indicator.
      */
     @ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef })
-    public excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    public excelStyleHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+
+    /**
+     * Gets the excel style header icon.
+    */
+    @Input()
+    public get excelStyleHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext> {
+        return this._excelStyleHeaderIconTemplate || this.excelStyleHeaderIconDirectiveTemplate;
+    }
+
+    /**
+     * Sets the excel style header icon.
+     *```html
+     *<ng-template #template igxExcelStyleHeaderIcon>
+     * <igx-icon>filter_alt</igx-icon>
+     *</ng-template>
+     * ```
+     *```typescript
+     * @ViewChild('template', {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.excelStyleHeaderIconTemplate = this.template;
+     * ```
+    */
+    public set excelStyleHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>) {
+        this._excelStyleHeaderIconTemplate = template;
+    }
 
 
     /**
@@ -3069,6 +3094,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _filteredSortedData = null;
 
     private _customDragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
+    private _excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
     private _rowSelectorTemplate: TemplateRef<IgxRowSelectorTemplateContext>;
     private _headSelectorTemplate: TemplateRef<IgxHeadSelectorTemplateContext>;
     private _rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>;

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

@@ -5852,6 +5852,16 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(icon).not.toBeNull();
             expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('filter_alt');
         }));
+
+        it('should allow setting excel style filter icon via Input.', () => {
+            grid.excelStyleHeaderIconTemplate = fix.componentInstance.customExcelHeaderIcon;
+            fix.detectChanges();
+            const header = GridFunctions.getColumnHeader('AnotherField', fix);
+            fix.detectChanges();
+            const icon = GridFunctions.getHeaderFilterIcon(header);
+            fix.detectChanges();
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('search');
+        });
     });
 
     describe('Load values on demand', () => {

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

@@ -656,6 +656,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * this.grid.groupRowTemplate = myRowTemplate;
      * ```
      */
+    @Input()
     public get groupRowTemplate(): TemplateRef<IgxGroupByRowTemplateContext> {
         return this._groupRowTemplate;
     }

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

@@ -591,6 +591,19 @@ describe('IgxGrid - GroupBy #grid', () => {
 
     }));
 
+    it('should allow setting custom template for group row via Input.', fakeAsync(() => {
+        const fix = TestBed.createComponent(CustomTemplateGridComponent);
+        const grid = fix.componentInstance.instance;
+        fix.detectChanges();
+        grid.groupRowTemplate = fix.componentInstance.customGroupBy;
+        fix.detectChanges();
+        grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false });
+        fix.detectChanges();
+        const grRow = grid.groupsRowList.toArray()[0];
+        const elem = grRow.groupContent.nativeElement;
+        expect(elem.innerText.trim()).toEqual('CUSTOM GROUP BY');
+    }));
+
     it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         const grid = fix.componentInstance.instance;
@@ -3637,6 +3650,11 @@ export class GroupableGridComponent extends DataParent {
                 <span>COLLAPSED</span>
             </ng-template>
         </igx-grid>
+        <ng-template #template igxGroupByRow let-groupRow>
+                <span>
+                    CUSTOM GROUP BY
+                </span>
+        </ng-template>
     `
 })
 export class CustomTemplateGridComponent extends DataParent {
@@ -3645,6 +3663,9 @@ export class CustomTemplateGridComponent extends DataParent {
 
     public width = '800px';
     public height = null;
+
+    @ViewChild('template', {read: TemplateRef })
+    public customGroupBy: TemplateRef<any>;
 }
 
 @Component({

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

@@ -1290,13 +1290,19 @@ export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridCompone
                 <igx-excel-style-search></igx-excel-style-search>
             </igx-excel-style-filter-operations>
         </igx-grid-excel-style-filtering>
-    </igx-grid>`
+    </igx-grid>
+    <ng-template #template igxExcelStyleHeaderIcon>
+            <igx-icon>search</igx-icon>
+    </ng-template>
+    `
 })
 export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
     public customFilter = CustomFilter.instance();
     public resizable = false;
     public filterable = true;
     public data = SampleTestData.excelFilteringData();
+    @ViewChild('template', {read: TemplateRef })
+    public customExcelHeaderIcon: TemplateRef<any>;
 }
 
 @Component({