Skip to content

Commit 0ced058

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
feat(HierarchicalGrid): Adding showExpandAll Input for HierarchicalGrid and RowIslands.
1 parent ca373b1 commit 0ced058

File tree

5 files changed

+34
-18
lines changed

5 files changed

+34
-18
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
4949
@Input()
5050
public hasChildrenKey: string;
5151

52+
@Input()
53+
public showExpandAll = false;
54+
5255
/**
5356
* @hidden
5457
*/

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
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
@@ -174,11 +174,11 @@
174174
</ng-template>
175175

176176
<ng-template #defaultCollapsedTemplate>
177-
<igx-icon role="button" [isActive]='false' fontSet="material">unfold_less</igx-icon>
177+
<igx-icon role="button" fontSet="material">unfold_more</igx-icon>
178178
</ng-template>
179179

180180
<ng-template #defaultExpandedTemplate>
181-
<igx-icon role="button" [isActive]='true' fontSet="material" (click)="collapseAll()">unfold_less</igx-icon>
181+
<igx-icon role="button" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' [isActive]='true' fontSet="material">unfold_less</igx-icon>
182182
</ng-template>
183183

184184
<div *ngIf="rowEditable" igxToggle>
@@ -217,7 +217,7 @@
217217
</ng-template>
218218

219219
<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
220-
<igx-checkbox
220+
<igx-checkbox
221221
[readonly]="true"
222222
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
223223
disableRipple="true"

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
393393
this.hasChildrenKey = this.parentIsland ?
394394
this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey :
395395
this.rootGrid.hasChildrenKey;
396+
this.showExpandAll = this.parentIsland ?
397+
this.parentIsland.showExpandAll : this.rootGrid.showExpandAll;
396398
}
397399

398400
private updateSizes() {
@@ -628,10 +630,10 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
628630
*/
629631
public get iconTemplate() {
630632
const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren;
631-
if (expanded) {
632-
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
633-
} else {
633+
if (!expanded && this.showExpandAll) {
634634
return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
635+
} else {
636+
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
635637
}
636638
}
637639

@@ -663,6 +665,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
663665
return height;
664666
}
665667

668+
/**
669+
* @hidden
670+
*/
671+
toggleAll() {
672+
const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren;
673+
if (!expanded && this.showExpandAll) {
674+
this.expandAll();
675+
} else {
676+
this.collapseAll();
677+
}
678+
}
666679

667680
/**
668681
* Collapses all rows of the current hierarchical grid.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1388,11 +1388,11 @@ public toggleChildRI = true;
13881388

13891389
@Component({
13901390
template: `
1391-
<igx-hierarchical-grid #grid1 [data]="data"
1391+
<igx-hierarchical-grid #grid1 [data]="data" [showExpandAll]='true'
13921392
[autoGenerate]="false" [height]="'400px'" [width]="width" #hierarchicalGrid>
13931393
<igx-column field="ID"></igx-column>
13941394
<igx-column field="ProductName"></igx-column>
1395-
<igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland>
1395+
<igx-row-island [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" #rowIsland>
13961396
<igx-column field="ID"></igx-column>
13971397
<igx-column field="ProductName"></igx-column>
13981398
<igx-row-island [key]="'childData'" [autoGenerate]="true" #rowIsland2 >

‎src/app/hierarchical-grid/hierarchical-grid.sample.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@ <h4 class="sample-title">Sample One</h4>
33
<div class="density-chooser" style="margin-bottom: 16px">
44
<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
55
</div>
6-
<igx-hierarchical-grid [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true' [paging]="true"
6+
<igx-hierarchical-grid [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true' [paging]="true"
77
[height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
88
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
99
<igx-column-group header="Information">
1010
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
1111
<igx-column field="ProductName" hasSummary='true'></igx-column>
1212
</igx-column-group>
13-
<ng-template igxHeaderCollapsedIndicator let-hgrid>
14-
<igx-icon role="button" fontSet="material" (click)="hgrid.expandAll()">add</igx-icon>
13+
<ng-template igxHeaderCollapsedIndicator>
14+
<igx-icon role="button" fontSet="material">add</igx-icon>
1515
</ng-template>
16-
<ng-template igxHeaderExpandedIndicator let-hgrid>
17-
<igx-icon role="button" fontSet="material" (click)="hgrid.collapseAll()">remove</igx-icon>
16+
<ng-template igxHeaderExpandedIndicator>
17+
<igx-icon role="button" fontSet="material">remove</igx-icon>
1818
</ng-template>
19-
<ng-template igxRowExpandedIndicator let-row>
19+
<ng-template igxRowExpandedIndicator>
2020
<igx-icon role="button" fontSet="material">remove</igx-icon>
2121
</ng-template>
22-
<ng-template igxRowCollapsedIndicator let-row>
22+
<ng-template igxRowCollapsedIndicator>
2323
<igx-icon role="button" fontSet="material">add</igx-icon>
2424
</ng-template>
25-
<igx-row-island [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
25+
<igx-row-island [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
2626
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
2727
<igx-column-group header="Information2">
2828
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
@@ -62,7 +62,7 @@ <h4 class="sample-title">Sample two</h4>
6262
<button igxButton="raised" (click)='toggleRootLevel()'>Toggle root level</button>
6363
<button igxButton="raised" (click)='toggleFirstIsland()'>Toggle level 1</button>
6464
</div>
65-
<igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
65+
<igx-hierarchical-grid [showExpandAll]='true' [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
6666
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true' >
6767
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true'></igx-row-island>
6868
</igx-row-island>

0 commit comments

Comments
 (0)