Skip to content

Commit bcc5ae0

Browse files
zdrawkuzdrawku
authored
Merge pull request #5672 from IgniteUI/mkirova/fix-5621
Adding templates for grid expansion indicator icons. Changing default icons.
2 parents 31e3b0c + ae2278a commit bcc5ae0

22 files changed

+518
-39
lines changed

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ import { FilterMode, GridKeydownTargetType, GridSelectionMode, GridSummaryPositi
9494
import { IgxColumnResizingService } from './grid-column-resizing.service';
9595
import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-row-selectors.module';
9696
import { DeprecateProperty } from '../core/deprecateDecorators';
97+
import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
98+
IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
9799

98100
const MINIMUM_COLUMN_WIDTH = 136;
99101
const FILTER_ROW_HEIGHT = 50;
@@ -236,6 +238,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
236238
private overlayIDs = [];
237239

238240
private _hostWidth;
241+
242+
243+
244+
245+
246+
/**
247+
* @hidden
248+
*/
249+
@ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true })
250+
protected defaultExpandedTemplate: TemplateRef<any>;
251+
252+
/**
253+
* @hidden
254+
*/
255+
@ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true })
256+
protected defaultCollapsedTemplate: TemplateRef<any>;
257+
258+
239259
/**
240260
* An accessor that sets the resource strings.
241261
* By default it uses EN resources.
@@ -1872,6 +1892,31 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
18721892
@ContentChild(IgxRowEditActionsDirective, { read: TemplateRef, static: false })
18731893
public rowEditActions: TemplateRef<any>;
18741894

1895+
1896+
/**
1897+
* The custom template, if any, that should be used when rendering a row expand indicator.
1898+
*/
1899+
@ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef, static: false })
1900+
public rowExpandedIndicatorTemplate: TemplateRef<any> = null;
1901+
1902+
/**
1903+
* The custom template, if any, that should be used when rendering a row collapse indicator.
1904+
*/
1905+
@ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef, static: false })
1906+
public rowCollapsedIndicatorTemplate: TemplateRef<any> = null;
1907+
1908+
/**
1909+
* The custom template, if any, that should be used when rendering a header expand indicator.
1910+
*/
1911+
@ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef, static: false })
1912+
public headerExpandIndicatorTemplate: TemplateRef<any> = null;
1913+
1914+
/**
1915+
* The custom template, if any, that should be used when rendering a header collapse indicator.
1916+
*/
1917+
@ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef, static: false })
1918+
public headerCollapseIndicatorTemplate: TemplateRef<any> = null;
1919+
18751920
/**
18761921
* @hidden
18771922
*/

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,14 @@
3737
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
3838
[igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
3939
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
40+
4041
<ng-container *ngIf="groupingExpressions.length > 0">
4142
<div class="igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"
4243
[ngClass]="{
4344
'igx-grid__header-indentation--no-border': isRowSelectable || rowDraggable
44-
}" #headerGroupContainer>
45-
<igx-icon *ngIf="groupsExpanded" role="button" class="igx-grid__group-expand-btn"
46-
(click)="toggleAllGroupRows()" [ngClass]="{
47-
'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
48-
}">unfold_less</igx-icon>
49-
<igx-icon *ngIf="!groupsExpanded" role="button" class="igx-grid__group-expand-btn"
50-
(click)="toggleAllGroupRows()" [ngClass]="{
51-
'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
52-
}">unfold_more</igx-icon>
45+
}" #headerGroupContainer (click)="toggleAllGroupRows()">
46+
47+
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
5348
</div>
5449
</ng-container>
5550
<ng-container *ngIf="rowDraggable">
@@ -204,6 +199,20 @@
204199
<span class="igx-drop-area__text">{{dropAreaMessage}}</span>
205200
</ng-template>
206201

202+
<ng-template #defaultExpandedTemplate>
203+
<igx-icon role="button" class="igx-grid__group-expand-btn"
204+
[ngClass]="{
205+
'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
206+
}">unfold_less</igx-icon>
207+
</ng-template>
208+
209+
<ng-template #defaultCollapsedTemplate>
210+
<igx-icon role="button" class="igx-grid__group-expand-btn"
211+
[ngClass]="{
212+
'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
213+
}">unfold_more</igx-icon>
214+
</ng-template>
215+
207216
<div *ngIf="rowEditable" igxToggle>
208217
<div [className]="bannerClass">
209218
<ng-container

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -903,6 +903,16 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
903903
const column = this.getColumnByName(expression.fieldName);
904904
return (column && column.header) || expression.fieldName;
905905
}
906+
/**
907+
* @hidden
908+
*/
909+
public get iconTemplate() {
910+
if (this.groupsExpanded) {
911+
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
912+
} else {
913+
return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
914+
}
915+
}
906916

907917
/**
908918
* @hidden

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,43 @@ export class IgxGroupByRowTemplateDirective {
1717

1818
}
1919

20+
/**
21+
* @hidden
22+
*/
23+
@Directive({
24+
selector: '[igxRowExpandedIndicator]'
25+
})
26+
export class IgxRowExpandedIndicatorDirective {
27+
}
28+
29+
/**
30+
* @hidden
31+
*/
32+
@Directive({
33+
selector: '[igxRowCollapsedIndicator]'
34+
})
35+
export class IgxRowCollapsedIndicatorDirective {
36+
}
37+
38+
39+
/**
40+
* @hidden
41+
*/
42+
@Directive({
43+
selector: '[igxHeaderExpandedIndicator]'
44+
})
45+
export class IgxHeaderExpandIndicatorDirective {
46+
}
47+
48+
/**
49+
* @hidden
50+
*/
51+
@Directive({
52+
selector: '[igxHeaderCollapsedIndicator]'
53+
})
54+
export class IgxHeaderCollapseIndicatorDirective {
55+
}
56+
2057
/**
2158
* @hidden
2259
*/

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -519,7 +519,7 @@ describe('IgxGrid - GroupBy #grid', () => {
519519
expect(currExpr.groupedColumns[0].field).toEqual('Downloads');
520520
}));
521521

522-
it('should allow setting custom template for group row content.', fakeAsync(() => {
522+
it('should allow setting custom template for group row content and expand/collapse icons.', fakeAsync(() => {
523523
const fix = TestBed.createComponent(CustomTemplateGridComponent);
524524
const grid = fix.componentInstance.instance;
525525
fix.detectChanges();
@@ -535,7 +535,19 @@ describe('IgxGrid - GroupBy #grid', () => {
535535
const expectedText = 'Total items with value:' + grVal +
536536
' are ' + grRow.groupRow.records.length;
537537
expect(elem.innerText.trim(['\n', '\r', ' '])).toEqual(expectedText);
538+
const expander = grRow.nativeElement.querySelector('.igx-grid__grouping-indicator');
539+
expect(expander.innerText).toBe('EXPANDED');
538540
}
541+
542+
groupRows[0].toggle();
543+
const expndr = groupRows[0].nativeElement.querySelector('.igx-grid__grouping-indicator');
544+
expect(expndr.innerText).toBe('COLLAPSED');
545+
546+
expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED');
547+
grid.toggleAllGroupRows();
548+
fix.detectChanges();
549+
expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED');
550+
539551
}));
540552

541553
it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => {
@@ -2670,6 +2682,19 @@ export class GroupableGridComponent extends DataParent {
26702682
<ng-template igxGroupByRow let-groupRow>
26712683
<span>Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}</span>
26722684
</ng-template>
2685+
<ng-template igxRowExpandedIndicator let-groupRow>
2686+
<span>EXPANDED</span>
2687+
</ng-template>
2688+
<ng-template igxRowCollapsedIndicator let-groupRow>
2689+
<span>COLLAPSED</span>
2690+
</ng-template>
2691+
2692+
<ng-template igxHeaderExpandedIndicator>
2693+
<span>EXPANDED</span>
2694+
</ng-template>
2695+
<ng-template igxHeaderCollapsedIndicator>
2696+
<span>COLLAPSED</span>
2697+
</ng-template>
26732698
</igx-grid>
26742699
`
26752700
})

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import { NgModule } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
44
import {
55
IgxGroupAreaDropDirective,
6-
IgxGroupByRowTemplateDirective
6+
IgxGroupByRowTemplateDirective,
7+
IgxRowExpandedIndicatorDirective,
8+
IgxRowCollapsedIndicatorDirective,
9+
IgxHeaderExpandIndicatorDirective,
10+
IgxHeaderCollapseIndicatorDirective
711
} from './grid.directives';
812
import { IgxGridComponent } from './grid.component';
913
import {
@@ -29,6 +33,10 @@ import { IgxSelectModule } from '../../select/index';
2933
IgxGridRowComponent,
3034
IgxGridGroupByRowComponent,
3135
IgxGroupByRowTemplateDirective,
36+
IgxRowExpandedIndicatorDirective,
37+
IgxRowCollapsedIndicatorDirective,
38+
IgxHeaderExpandIndicatorDirective,
39+
IgxHeaderCollapseIndicatorDirective,
3240
IgxGroupAreaDropDirective,
3341
IgxGridGroupingPipe,
3442
IgxGridPagingPipe,
@@ -41,6 +49,10 @@ import { IgxSelectModule } from '../../select/index';
4149
IgxGridGroupByRowComponent,
4250
IgxGridRowComponent,
4351
IgxGroupByRowTemplateDirective,
52+
IgxRowExpandedIndicatorDirective,
53+
IgxRowCollapsedIndicatorDirective,
54+
IgxHeaderExpandIndicatorDirective,
55+
IgxHeaderCollapseIndicatorDirective,
4456
IgxGroupAreaDropDirective,
4557
IgxGridCommonModule,
4658
IgxGridGroupingPipe,

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
<ng-container #defaultGroupRow>
22
<div (click)="toggle()" class="igx-grid__grouping-indicator">
3-
<igx-icon *ngIf="!expanded" fontSet="material">expand_more</igx-icon>
4-
<igx-icon *ngIf="expanded" fontSet="material">expand_less</igx-icon>
3+
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }">
4+
</ng-container>
55
</div>
66

77
<div class="igx-grid__group-content" #groupContent>
88
<ng-container *ngTemplateOutlet="grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }">
99
</ng-container>
1010
</div>
1111

12+
<ng-template #defaultGroupByExpandedTemplate>
13+
<igx-icon fontSet="material">expand_more</igx-icon>
14+
</ng-template>
15+
16+
<ng-template #defaultGroupByCollapsedTemplate>
17+
<igx-icon fontSet="material">chevron_right</igx-icon>
18+
</ng-template>
19+
20+
1221
<ng-template #defaultGroupByTemplate>
1322
<div class="igx-group-label">
1423
<igx-icon fontSet="material" class="igx-group-label__icon">group_work</igx-icon>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
HostListener,
88
Input,
99
ViewChild,
10+
TemplateRef,
1011
} from '@angular/core';
1112
import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
1213
import { DataType } from '../../data-operations/data-util';
@@ -38,6 +39,18 @@ export class IgxGridGroupByRowComponent {
3839
*/
3940
protected paddingIndentationCssClass = 'igx-grid__group-row--padding-level';
4041

42+
/**
43+
* @hidden
44+
*/
45+
@ViewChild('defaultGroupByExpandedTemplate', { read: TemplateRef, static: true })
46+
protected defaultGroupByExpandedTemplate: TemplateRef<any>;
47+
48+
/**
49+
* @hidden
50+
*/
51+
@ViewChild('defaultGroupByCollapsedTemplate', { read: TemplateRef, static: true })
52+
protected defaultGroupByCollapsedTemplate: TemplateRef<any>;
53+
4154
/**
4255
* @hidden
4356
*/
@@ -177,6 +190,14 @@ export class IgxGridGroupByRowComponent {
177190
}
178191
}
179192

193+
public get iconTemplate() {
194+
if (this.expanded) {
195+
return this.grid.rowExpandedIndicatorTemplate || this.defaultGroupByExpandedTemplate;
196+
} else {
197+
return this.grid.rowCollapsedIndicatorTemplate || this.defaultGroupByCollapsedTemplate;
198+
}
199+
}
200+
180201
protected get selectionNode(): ISelectionNode {
181202
return {
182203
row: this.index,

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
4747
@Input()
4848
public expandChildren: boolean;
4949

50+
@Input()
51+
public hasChildrenKey: string;
52+
53+
@Input()
54+
public showExpandAll = false;
55+
5056
/**
5157
* @hidden
5258
*/

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
1212
[igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
1313
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
14-
<div #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
14+
<div #headerHierarchyExpander (click)="toggleAll()" [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
1515
'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
1616
'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
1717
'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
1818
}">
19-
<igx-icon role="button" fontSet="material"
20-
[isActive]='hierarchicalState.length > 0 && hasExpandableChildren' (click)="collapseAllRows()">unfold_less</igx-icon>
19+
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
2120
</div>
2221
<ng-container *ngIf="rowDraggable">
2322
<div class="igx-grid__drag-indicator" [ngClass]="{
@@ -174,6 +173,13 @@
174173
</div>
175174
</ng-template>
176175

176+
<ng-template #defaultCollapsedTemplate>
177+
<igx-icon role="button" fontSet="material">unfold_more</igx-icon>
178+
</ng-template>
179+
180+
<ng-template #defaultExpandedTemplate>
181+
<igx-icon role="button" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' [isActive]='true' fontSet="material">unfold_less</igx-icon>
182+
</ng-template>
177183

178184
<div *ngIf="rowEditable" igxToggle>
179185
<div [className]="bannerClass">
@@ -211,7 +217,7 @@
211217
</ng-template>
212218

213219
<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
214-
<igx-checkbox
220+
<igx-checkbox
215221
[readonly]="true"
216222
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
217223
disableRipple="true"

0 commit comments

Comments
 (0)