Skip to content

Commit e0c7cce

Browse files
ChronosSFChronosSF
committed
chore(hgrid): addressing hgrid outlet concern
1 parent 2321427 commit e0c7cce

File tree

2 files changed

+68
-50
lines changed

2 files changed

+68
-50
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,13 @@ export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
209209
}
210210
return this.hgridAPI.getChildGrid(path);
211211
}
212+
213+
/**
214+
* @hidden @internal
215+
*/
216+
public get outletDirective() {
217+
return this.rootGrid._outletDirective;
218+
}
212219
}
213220

214221
function flatten(arr: any[]) {

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

+61-50
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<div class="hgrid-sample">
22
<h4 class="sample-title">Sample One</h4>
33
<div class="density-chooser" style="margin-bottom: 16px">
4-
<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
4+
<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"
5+
style="display: block; width: 500px"></igx-buttongroup>
56
</div>
67
<button igxButton="raised" (click)="getState()">Get state</button>
78
<igx-hierarchical-grid #grid1 [data]="localData" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid"
8-
[displayDensity]="density" [rowSelection]="selectionMode" [autoGenerate]="false" [allowFiltering]='true' [paging]="true" [rowDraggable]="true"
9-
[height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
9+
[displayDensity]="density" [rowSelection]="selectionMode" [autoGenerate]="false" [allowFiltering]='true'
10+
[paging]="true" [rowDraggable]="true" [height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded"
11+
#hGrid>
1012
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
1113
<igx-column-group header="Information">
1214
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
@@ -24,47 +26,50 @@ <h4 class="sample-title">Sample One</h4>
2426
<ng-template igxRowCollapsedIndicator>
2527
<igx-icon role="button" fontSet="material">add</igx-icon>
2628
</ng-template>
27-
<igx-row-island [rowDraggable]="true" [height]='"1200px"' [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelection]='selectionMode' [expandChildren]="firstLevelExpanded" #layout1 >
28-
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
29-
<igx-column-group header="Information2">
30-
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
31-
<igx-column field="ProductName" [resizable]="true" [groupable]='true'></igx-column>
29+
<igx-row-island [rowDraggable]="true" [height]='"1200px"' [showExpandAll]='true' [key]="'childData'"
30+
[autoGenerate]="false" [allowFiltering]='false' [rowSelection]='selectionMode'
31+
[expandChildren]="firstLevelExpanded" #layout1>
32+
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
33+
<igx-column-group header="Information2">
34+
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
35+
<igx-column field="ProductName" [resizable]="true" [groupable]='true'></igx-column>
36+
</igx-column-group>
37+
<ng-template let-data igxRowDragGhost>
38+
<div class="dragGhost">
39+
<igx-icon fontSet="material"></igx-icon>
40+
Moving child {{data.ProductName}}!
41+
</div>
42+
</ng-template>
43+
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode'
44+
[allowFiltering]='true'>
45+
<igx-column field="ID" [hasSummary]='true'></igx-column>
46+
<igx-column-group header="Information3">
47+
<igx-column [resizable]="true" field="ChildLevels"></igx-column>
48+
<igx-column field="ProductName"></igx-column>
3249
</igx-column-group>
33-
<ng-template let-data igxRowDragGhost>
34-
<div class="dragGhost">
35-
<igx-icon fontSet="material"></igx-icon>
36-
Moving child {{data.ProductName}}!
37-
</div>
38-
</ng-template>
39-
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [allowFiltering]='true' >
50+
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode'>
4051
<igx-column field="ID" [hasSummary]='true'></igx-column>
41-
<igx-column-group header="Information3">
42-
<igx-column [resizable]="true" field="ChildLevels"></igx-column>
52+
<igx-column-group header="Information4">
53+
<igx-column field="ChildLevels"></igx-column>
4354
<igx-column field="ProductName"></igx-column>
4455
</igx-column-group>
45-
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode'>
46-
<igx-column field="ID" [hasSummary]='true'></igx-column>
47-
<igx-column-group header="Information4">
48-
<igx-column field="ChildLevels"></igx-column>
49-
<igx-column field="ProductName"></igx-column>
50-
</igx-column-group>
51-
</igx-row-island>
52-
<igx-row-island [key]="'childData2'" [autoGenerate]="false" [rowSelection]='selectionMode' >
53-
<igx-column field="ChildLevels" [groupable]='true' [hasSummary]='true'></igx-column>
54-
<igx-column field="ProductName" [groupable]='true' [hasSummary]='true'></igx-column>
56+
</igx-row-island>
57+
<igx-row-island [key]="'childData2'" [autoGenerate]="false" [rowSelection]='selectionMode'>
58+
<igx-column field="ChildLevels" [groupable]='true' [hasSummary]='true'></igx-column>
59+
<igx-column field="ProductName" [groupable]='true' [hasSummary]='true'></igx-column>
5560
</igx-row-island>
5661

5762
</igx-row-island>
5863
</igx-row-island>
59-
<!-- <igx-row-island [key]="'childData2'" [autoGenerate]="false" [rowSelection]='selectionMode' >
64+
<!-- <igx-row-island [key]="'childData2'" [autoGenerate]="false" [rowSelection]='selectionMode' >
6065
<igx-column field="ChildLevels" [groupable]='true'></igx-column>
6166
<igx-column field="ProductName" [groupable]='true'></igx-column>
6267
</igx-row-island> -->
6368
<ng-template let-data igxRowDragGhost>
6469
<div class="dragGhost">
65-
<igx-icon fontSet="material"></igx-icon>
66-
Moving parent {{data.ProductName}}!
67-
</div>
70+
<igx-icon fontSet="material"></igx-icon>
71+
Moving parent {{data.ProductName}}!
72+
</div>
6873
</ng-template>
6974
</igx-hierarchical-grid>
7075

@@ -77,9 +82,12 @@ <h4 class="sample-title">Sample two</h4>
7782
<button igxButton="raised" (click)='toggleRootLevel()'>Toggle root level</button>
7883
<button igxButton="raised" (click)='toggleFirstIsland()'>Toggle level 1</button>
7984
</div>
80-
<igx-hierarchical-grid [showExpandAll]='true' [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
81-
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [allowFiltering]='true' >
82-
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [allowFiltering]='true'></igx-row-island>
85+
<igx-hierarchical-grid [showExpandAll]='true' [data]="localData" [autoGenerate]="true" [height]="'600px'"
86+
[width]="'800px'" #hGrid2>
87+
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode'
88+
[allowFiltering]='true'>
89+
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode'
90+
[allowFiltering]='true'></igx-row-island>
8391
</igx-row-island>
8492
<igx-row-island [key]="'childData2'" [autoGenerate]="true" [allowFiltering]='true'></igx-row-island>
8593
</igx-hierarchical-grid>
@@ -91,19 +99,21 @@ <h4 class="sample-title">Sample three</h4>
9199
</div>
92100
<igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
93101

94-
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [allowFiltering]='true' >
102+
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode'
103+
[allowFiltering]='true'>
95104
<div *ngIf='riToggle'>
96-
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [allowFiltering]='true'></igx-row-island>
105+
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode'
106+
[allowFiltering]='true'></igx-row-island>
97107
</div>
98-
</igx-row-island>
108+
</igx-row-island>
99109

100110

101111

102112
<div *ngIf='!riToggle'>
103-
<igx-row-island [key]="'childData2'" [autoGenerate]="false">
104-
<igx-column field="ChildLevels" [groupable]='true'></igx-column>
105-
<igx-column field="ProductName" [groupable]='true'></igx-column>
106-
</igx-row-island>
113+
<igx-row-island [key]="'childData2'" [autoGenerate]="false">
114+
<igx-column field="ChildLevels" [groupable]='true'></igx-column>
115+
<igx-column field="ProductName" [groupable]='true'></igx-column>
116+
</igx-row-island>
107117
</div>
108118
</igx-hierarchical-grid>
109119

@@ -113,15 +123,16 @@ <h4 class="sample-title">Sample 4</h4>
113123
<button igxButton="raised" (click)='changeData()'>Change data runtime</button>
114124
</div>
115125
<igx-hierarchical-grid [data]="localData1" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
116-
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
117-
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
118-
<igx-column field="ProductName" hasSummary='true'></igx-column>
119-
<igx-column *ngFor="let c of columns" [field]="c"></igx-column>
120-
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [allowFiltering]='true'>
121-
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
122-
<igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
123-
</igx-row-island>
126+
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
127+
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
128+
<igx-column field="ProductName" hasSummary='true'></igx-column>
129+
<igx-column *ngFor="let c of columns" [field]="c"></igx-column>
130+
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode'
131+
[allowFiltering]='true'>
132+
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
133+
<igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
134+
</igx-row-island>
124135
</igx-hierarchical-grid>
125136

126137

127-
</div>
138+
</div>

0 commit comments

Comments
 (0)