Adding templates for grid expansion indicator icons. Changing default icons.

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

@@ -94,6 +94,8 @@ import { FilterMode, GridKeydownTargetType, GridSelectionMode, GridSummaryPositi
 import { IgxColumnResizingService } from './grid-column-resizing.service';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-row-selectors.module';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
+     IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -236,6 +238,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private overlayIDs = [];
 
     private _hostWidth;
+
+
+
+
+
+    /**
+    * @hidden
+    */
+   @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true })
+   protected defaultExpandedTemplate: TemplateRef<any>;
+
+/**
+   * @hidden
+   */
+   @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true })
+   protected defaultCollapsedTemplate: TemplateRef<any>;
+
+
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -1872,6 +1892,31 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChild(IgxRowEditActionsDirective, { read: TemplateRef, static: false })
     public rowEditActions: TemplateRef<any>;
 
+
+    /**
+    * The custom template, if any, that should be used when rendering a row expand indicator.
+    */
+   @ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef, static: false })
+   public rowExpandedIndicatorTemplate: TemplateRef<any> = null;
+
+   /**
+   * The custom template, if any, that should be used when rendering a row collapse indicator.
+   */
+   @ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef, static: false })
+   public rowCollapsedIndicatorTemplate: TemplateRef<any> = null;
+
+    /**
+    * The custom template, if any, that should be used when rendering a header expand indicator.
+    */
+   @ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef, static: false })
+   public headerExpandIndicatorTemplate: TemplateRef<any> = null;
+
+   /**
+   * The custom template, if any, that should be used when rendering a header collapse indicator.
+   */
+   @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef, static: false })
+   public headerCollapseIndicatorTemplate: TemplateRef<any> = null;
+
     /**
      * @hidden
      */

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

@@ -37,19 +37,14 @@
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
                 [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
                 class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+
             <ng-container *ngIf="groupingExpressions.length > 0">
                 <div class="igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"
                     [ngClass]="{
                     'igx-grid__header-indentation--no-border': isRowSelectable || rowDraggable
-                }" #headerGroupContainer>
-                    <igx-icon *ngIf="groupsExpanded" role="button" class="igx-grid__group-expand-btn"
-                        (click)="toggleAllGroupRows()" [ngClass]="{
-                        'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
-                    }">unfold_less</igx-icon>
-                    <igx-icon *ngIf="!groupsExpanded" role="button" class="igx-grid__group-expand-btn"
-                        (click)="toggleAllGroupRows()" [ngClass]="{
-                        'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
-                    }">unfold_more</igx-icon>
+                }" #headerGroupContainer  (click)="toggleAllGroupRows()">
+
+                <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
                 </div>
             </ng-container>
             <ng-container *ngIf="rowDraggable">
@@ -204,6 +199,20 @@
     <span class="igx-drop-area__text">{{dropAreaMessage}}</span>
 </ng-template>
 
+<ng-template #defaultExpandedTemplate>
+    <igx-icon role="button" class="igx-grid__group-expand-btn"
+   [ngClass]="{
+    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
+}">unfold_less</igx-icon>
+</ng-template>
+
+ <ng-template #defaultCollapsedTemplate>
+    <igx-icon role="button" class="igx-grid__group-expand-btn"
+    [ngClass]="{
+    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
+}">unfold_more</igx-icon>
+</ng-template>
+
 <div *ngIf="rowEditable" igxToggle>
     <div [className]="bannerClass">
         <ng-container

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

@@ -903,6 +903,16 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
         const column = this.getColumnByName(expression.fieldName);
         return (column && column.header) || expression.fieldName;
     }
+    /**
+     * @hidden
+     */
+    public get iconTemplate() {
+        if (this.groupsExpanded) {
+            return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
+        } else {
+            return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
+        }
+    }
 
     /**
      * @hidden

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

@@ -17,6 +17,43 @@ export class IgxGroupByRowTemplateDirective {
 
 }
 
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxRowExpandedIndicator]'
+})
+export class IgxRowExpandedIndicatorDirective {
+}
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxRowCollapsedIndicator]'
+})
+export class IgxRowCollapsedIndicatorDirective {
+}
+
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxHeaderExpandedIndicator]'
+})
+export class IgxHeaderExpandIndicatorDirective {
+}
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxHeaderCollapsedIndicator]'
+})
+export class IgxHeaderCollapseIndicatorDirective {
+}
+
 /**
  * @hidden
  */

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

@@ -519,7 +519,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             expect(currExpr.groupedColumns[0].field).toEqual('Downloads');
         }));
 
-    it('should allow setting custom template for group row content.', fakeAsync(() => {
+    it('should allow setting custom template for group row content and expand/collapse icons.', fakeAsync(() => {
         const fix = TestBed.createComponent(CustomTemplateGridComponent);
         const grid = fix.componentInstance.instance;
         fix.detectChanges();
@@ -535,7 +535,19 @@ describe('IgxGrid - GroupBy #grid', () => {
             const expectedText = 'Total items with value:' + grVal +
                 ' are ' + grRow.groupRow.records.length;
             expect(elem.innerText.trim(['\n', '\r', ' '])).toEqual(expectedText);
+            const expander = grRow.nativeElement.querySelector('.igx-grid__grouping-indicator');
+            expect(expander.innerText).toBe('EXPANDED');
         }
+
+        groupRows[0].toggle();
+        const expndr = groupRows[0].nativeElement.querySelector('.igx-grid__grouping-indicator');
+        expect(expndr.innerText).toBe('COLLAPSED');
+
+        expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED');
+        grid.toggleAllGroupRows();
+        fix.detectChanges();
+        expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED');
+
     }));
 
     it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => {
@@ -2670,6 +2682,19 @@ export class GroupableGridComponent extends DataParent {
             <ng-template igxGroupByRow let-groupRow>
                 <span>Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}</span>
             </ng-template>
+            <ng-template igxRowExpandedIndicator let-groupRow>
+                <span>EXPANDED</span>
+            </ng-template>
+            <ng-template igxRowCollapsedIndicator let-groupRow>
+                <span>COLLAPSED</span>
+            </ng-template>
+
+            <ng-template igxHeaderExpandedIndicator>
+                <span>EXPANDED</span>
+            </ng-template>
+            <ng-template igxHeaderCollapsedIndicator>
+                <span>COLLAPSED</span>
+            </ng-template>
         </igx-grid>
     `
 })

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

@@ -3,7 +3,11 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
     IgxGroupAreaDropDirective,
-    IgxGroupByRowTemplateDirective
+    IgxGroupByRowTemplateDirective,
+    IgxRowExpandedIndicatorDirective,
+    IgxRowCollapsedIndicatorDirective,
+    IgxHeaderExpandIndicatorDirective,
+    IgxHeaderCollapseIndicatorDirective
 } from './grid.directives';
 import { IgxGridComponent } from './grid.component';
 import {
@@ -29,6 +33,10 @@ import { IgxSelectModule } from '../../select/index';
     IgxGridRowComponent,
     IgxGridGroupByRowComponent,
     IgxGroupByRowTemplateDirective,
+    IgxRowExpandedIndicatorDirective,
+    IgxRowCollapsedIndicatorDirective,
+    IgxHeaderExpandIndicatorDirective,
+    IgxHeaderCollapseIndicatorDirective,
     IgxGroupAreaDropDirective,
     IgxGridGroupingPipe,
     IgxGridPagingPipe,
@@ -41,6 +49,10 @@ import { IgxSelectModule } from '../../select/index';
     IgxGridGroupByRowComponent,
     IgxGridRowComponent,
     IgxGroupByRowTemplateDirective,
+    IgxRowExpandedIndicatorDirective,
+    IgxRowCollapsedIndicatorDirective,
+    IgxHeaderExpandIndicatorDirective,
+    IgxHeaderCollapseIndicatorDirective,
     IgxGroupAreaDropDirective,
     IgxGridCommonModule,
     IgxGridGroupingPipe,

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

@@ -1,14 +1,23 @@
 <ng-container #defaultGroupRow>
     <div (click)="toggle()" class="igx-grid__grouping-indicator">
-        <igx-icon *ngIf="!expanded" fontSet="material">expand_more</igx-icon>
-        <igx-icon *ngIf="expanded" fontSet="material">expand_less</igx-icon>
+            <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }">
+            </ng-container>
     </div>
 
     <div class="igx-grid__group-content" #groupContent>
         <ng-container *ngTemplateOutlet="grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }">
         </ng-container>
     </div>
 
+    <ng-template #defaultGroupByExpandedTemplate>
+        <igx-icon fontSet="material">expand_more</igx-icon>
+    </ng-template>
+
+    <ng-template #defaultGroupByCollapsedTemplate>
+        <igx-icon fontSet="material">chevron_right</igx-icon>
+    </ng-template>
+
+
     <ng-template #defaultGroupByTemplate>
         <div class="igx-group-label">
             <igx-icon fontSet="material" class="igx-group-label__icon">group_work</igx-icon>

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

@@ -7,6 +7,7 @@ import {
     HostListener,
     Input,
     ViewChild,
+    TemplateRef,
 } from '@angular/core';
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
 import { DataType } from '../../data-operations/data-util';
@@ -38,6 +39,18 @@ export class IgxGridGroupByRowComponent {
      */
     protected paddingIndentationCssClass = 'igx-grid__group-row--padding-level';
 
+    /**
+    * @hidden
+    */
+    @ViewChild('defaultGroupByExpandedTemplate', { read: TemplateRef, static: true })
+    protected defaultGroupByExpandedTemplate: TemplateRef<any>;
+
+    /**
+    * @hidden
+    */
+    @ViewChild('defaultGroupByCollapsedTemplate', { read: TemplateRef, static: true })
+    protected defaultGroupByCollapsedTemplate: TemplateRef<any>;
+
     /**
      * @hidden
      */
@@ -177,6 +190,14 @@ export class IgxGridGroupByRowComponent {
         }
     }
 
+    public get iconTemplate() {
+        if (this.expanded) {
+            return this.grid.rowExpandedIndicatorTemplate || this.defaultGroupByExpandedTemplate;
+        } else {
+            return this.grid.rowCollapsedIndicatorTemplate || this.defaultGroupByCollapsedTemplate;
+        }
+    }
+
     protected get selectionNode(): ISelectionNode {
         return {
             row: this.index,

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

@@ -47,6 +47,12 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
     @Input()
     public expandChildren: boolean;
 
+    @Input()
+    public hasChildrenKey: string;
+
+    @Input()
+    public showExpandAll = false;
+
     /**
      * @hidden
      */

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

@@ -11,13 +11,12 @@
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
                 [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
                 class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-                <div #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
+                <div #headerHierarchyExpander (click)="toggleAll()" [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
                     'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
                     'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
                     'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
                 }">
-                <igx-icon role="button" fontSet="material"
-                    [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' (click)="collapseAllRows()">unfold_less</igx-icon>
+                <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
             </div>
             <ng-container *ngIf="rowDraggable">
                 <div class="igx-grid__drag-indicator" [ngClass]="{
@@ -174,6 +173,13 @@
     </div>
 </ng-template>
 
+<ng-template #defaultCollapsedTemplate>
+    <igx-icon role="button" fontSet="material">unfold_more</igx-icon>
+</ng-template>
+
+<ng-template #defaultExpandedTemplate>
+    <igx-icon role="button" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' [isActive]='true' fontSet="material">unfold_less</igx-icon>
+</ng-template>
 
 <div *ngIf="rowEditable" igxToggle>
     <div [className]="bannerClass">
@@ -211,7 +217,7 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <igx-checkbox 
+    <igx-checkbox
         [readonly]="true"
         [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
         disableRipple="true"