Skip to content

Commit 85fb35e

Browse files
PlamenaMitevaPlamenaMiteva
authored
feat: create dropdown hierarchical selection samples (#3207)
1 parent f366b75 commit 85fb35e

10 files changed

Lines changed: 316 additions & 3 deletions

‎src/app/data-entries/data-entries-routes-data.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const dataEntriesRoutesData = {
3333
"dropdown-sample-3": { displayName: "Dropdown Headers", parentName: "Dropdown" },
3434
"dropdown-sample-5": { displayName: "Dropdown Groups", parentName: "Dropdown" },
3535
"dropdown-styling": { displayName: "Dropdown Styling", parentName: "Dropdown" },
36+
"dropdown-tree-hierarchical-selection": { displayName: "Dropdown Tree Hierarchical Selection", parentName: "Dropdown" },
37+
"dropdown-tree-grid-hierarchical-selection": { displayName: "Dropdown Tree Grid Hierarchical Selection", parentName: "Dropdown" },
3638
"dropdown-sample-4": { displayName: "Input Dropdown Selection", parentName: "Dropdown" },
3739
"input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
3840
"input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },

‎src/app/data-entries/data-entries-routing.module.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import { DropDownSample3Component } from './dropdown/dropdown-sample-3/dropdown-
3434
import { DropDownSample4Component } from './dropdown/dropdown-sample-4/dropdown-sample-4.component';
3535
import { DropDownSample5Component } from './dropdown/dropdown-sample-5/dropdown-sample-5.component';
3636
import { DropDownStylingComponent } from './dropdown/dropdown-styling/dropdown-styling.component';
37+
import { DropdownTreeHierarchicalSelectionComponent } from './dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component';
38+
import { DropdownTreeGridHierarchicalSelectionComponent } from './dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component';
3739
import { InputGroupSample1Component } from './input-group/input-group-sample-1/input-group-sample-1.component';
3840
import { InputGroupSample2Component } from './input-group/input-group-sample-2/input-group-sample-2.component';
3941
import { InputGroupSample3Component } from './input-group/input-group-sample-3/input-group-sample-3.component';
@@ -211,6 +213,16 @@ export const dataEntriesRoutes: Routes = [
211213
data: dataEntriesRoutesData['dropdown-styling'],
212214
path: 'dropdown-styling'
213215
},
216+
{
217+
component: DropdownTreeHierarchicalSelectionComponent,
218+
data: dataEntriesRoutesData['dropdown-tree-hierarchical-selection'],
219+
path: 'dropdown-tree-hierarchical-selection'
220+
},
221+
{
222+
component: DropdownTreeGridHierarchicalSelectionComponent,
223+
data: dataEntriesRoutesData['dropdown-tree-grid-hierarchical-selection'],
224+
path: 'dropdown-tree-grid-hierarchical-selection'
225+
},
214226
{
215227
component: DropDownSample4Component,
216228
data: dataEntriesRoutesData['dropdown-sample-4'],

‎src/app/data-entries/data-entries.module.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { NgModule } from '@angular/core';
44
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
55
import {
66
IgcFormsModule,
7-
IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxComboModule,
7+
IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
88
IgxDatePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
99
IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
10-
IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
10+
IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
1111
} from 'igniteui-angular';
1212
import { AutocompleteBasicComponent, AutocompletePipeStartsWith } from './autocomplete/autocomplete/autocomplete.component';
1313
import { MovieComponent } from './autocomplete/movie/movie.component';
@@ -43,6 +43,8 @@ import { DropDownSample3Component } from './dropdown/dropdown-sample-3/dropdown-
4343
import { DropDownSample4Component } from './dropdown/dropdown-sample-4/dropdown-sample-4.component';
4444
import { DropDownSample5Component } from './dropdown/dropdown-sample-5/dropdown-sample-5.component';
4545
import { DropDownStylingComponent } from './dropdown/dropdown-styling/dropdown-styling.component';
46+
import { DropdownTreeHierarchicalSelectionComponent } from './dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component';
47+
import { DropdownTreeGridHierarchicalSelectionComponent } from './dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component';
4648
import { InputGroupSample1Component } from './input-group/input-group-sample-1/input-group-sample-1.component';
4749
import { InputGroupSample2Component } from './input-group/input-group-sample-2/input-group-sample-2.component';
4850
import { InputGroupSample3Component } from './input-group/input-group-sample-3/input-group-sample-3.component';
@@ -100,6 +102,8 @@ import { RatingInFormComponent } from './rating/rating-form/rating-form.componen
100102
DropDownSample4Component,
101103
DropDownSample5Component,
102104
DropDownStylingComponent,
105+
DropdownTreeHierarchicalSelectionComponent,
106+
DropdownTreeGridHierarchicalSelectionComponent,
103107
InputGroupSample1Component,
104108
InputGroupSample2Component,
105109
InputGroupSample3Component,
@@ -161,7 +165,10 @@ import { RatingInFormComponent } from './rating/rating-form/rating-form.componen
161165
IgxFocusModule,
162166
IgxCardModule,
163167
IgxDividerModule,
164-
IgcFormsModule
168+
IgcFormsModule,
169+
IgxChipsModule,
170+
IgxTreeModule,
171+
IgxTreeGridModule
165172
]
166173
})
167174
export class DataEntriesModule { }

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="container">
2+
<div class="chip-container">
3+
<igx-chips-area>
4+
<igx-chip *ngFor="let row of selectedRows" [id]="row.ID" [removable]="true" (remove)="chipRemoved($event)">{{row.Name}}</igx-chip>
5+
</igx-chips-area>
6+
</div>
7+
<button igxButton="icon" [igxToggleAction]="employeesDropDown" [igxDropDownItemNavigation]="employeesDropDown" [igxToggleOutlet]="outlet">
8+
<igx-icon fontSet="material">expand_more</igx-icon>
9+
</button>
10+
</div>
11+
12+
<igx-drop-down #employeesDropDown [width]="'300px'" (closing)="handleClosing($event)">
13+
<igx-tree-grid #treeGrid igxPreventDocumentScroll [data]="employees" childDataKey="Employees" primaryKey="ID"
14+
width="100%" height="400px" [autoGenerate]="false" [expansionDepth]="1" [rowSelection]="'multiple'"
15+
(rowSelectionChanging)="onRowSelectionChanging($event, treeGrid)">
16+
<igx-column field="Name" dataType="string"></igx-column>
17+
</igx-tree-grid>
18+
</igx-drop-down>
19+
20+
<div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.chip-container{
2+
width : 400px;
3+
height: 150px;
4+
resize: both;
5+
overflow: auto;
6+
border: 1px solid #ccc;
7+
background-color: #FFFBFA;
8+
}

‎src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { IBaseChipEventArgs, IgxTreeGridComponent, IRowSelectionEventArgs } from 'igniteui-angular';
3+
import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/lib/core/utils';
4+
import { EMPLOYEE_DATA } from '../../../data/nested-employee-data';
5+
@Component({
6+
// tslint:disable-next-line:component-selector
7+
selector: 'app-dropdown-tree-grid-hierarchical-selection',
8+
styleUrls: ['./dropdown-tree-grid-hierarchical-selection.component.scss'],
9+
templateUrl: './dropdown-tree-grid-hierarchical-selection.component.html'
10+
})
11+
export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit {
12+
@ViewChild('treeGrid', { static: true })
13+
public igxTreeGrid: IgxTreeGridComponent;
14+
15+
public employees!: any[];
16+
public selectedRows!: any[];
17+
18+
public ngOnInit(): void {
19+
this.employees = EMPLOYEE_DATA;
20+
}
21+
22+
public onRowSelectionChanging(args: IRowSelectionEventArgs, grid: IgxTreeGridComponent) {
23+
this.selectedRows = [];
24+
args.newSelection.forEach((val) => this.selectedRows.push(grid.getRowData(val)));
25+
}
26+
27+
public chipRemoved(event: IBaseChipEventArgs) {
28+
this.selectedRows = this.selectedRows.filter((row) => {
29+
if (row.ID === event.owner.id){
30+
this.igxTreeGrid.deselectRows([row.ID]);
31+
}
32+
return row.ID !== event.owner.id;
33+
});
34+
}
35+
36+
public handleClosing(event: IBaseCancelableBrowserEventArgs) {
37+
event.cancel = event.event.composedPath().some(e => (e as HTMLElement).nodeName.toLowerCase() === 'igx-chip');
38+
}
39+
}

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="container">
2+
<div class="chip-container">
3+
<igx-chips-area>
4+
<igx-chip *ngFor="let node of selectedNodes" [id]="node.data.ID" [removable]="true" (remove)="chipRemoved($event)">{{node.data.Name}}</igx-chip>
5+
</igx-chips-area>
6+
</div>
7+
<button igxButton="icon" [igxToggleAction]="countriesDropDown" [igxDropDownItemNavigation]="countriesDropDown">
8+
<igx-icon fontSet="material">expand_more</igx-icon>
9+
</button>
10+
</div>
11+
12+
<igx-drop-down #countriesDropDown [height]="'500px'" [width]="'300px'" (closing)="handleClosing($event)">
13+
<igx-tree #igxTree selection="BiState" (nodeSelection)="onNodeSelection($event)">
14+
<igx-tree-node *ngFor="let country of countries" [data]="country" [expanded]="true">
15+
{{ country.Name }}
16+
<igx-tree-node *ngFor="let city of country.Cities" [data]="city">
17+
{{ city.Name }}
18+
</igx-tree-node>
19+
</igx-tree-node>
20+
</igx-tree>
21+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.chip-container{
2+
width : 400px;
3+
height: 150px;
4+
resize: both;
5+
overflow: auto;
6+
border: 1px solid #ccc;
7+
background-color: #FFFBFA;
8+
}

‎src/app/data-entries/dropdown/dropdown-tree-hierarchical-selection/dropdown-tree-hierarchical-selection.component.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { IBaseChipEventArgs, IgxChipComponent, IgxTreeComponent, ITreeNodeSelectionEvent } from 'igniteui-angular';
3+
import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/lib/core/utils';
4+
import { COUNTRIES } from '../../../data/countries';
5+
@Component({
6+
// tslint:disable-next-line:component-selector
7+
selector: 'app-dropdown-tree-hierarchical-selection',
8+
styleUrls: ['./dropdown-tree-hierarchical-selection.component.scss'],
9+
templateUrl: './dropdown-tree-hierarchical-selection.component.html'
10+
})
11+
export class DropdownTreeHierarchicalSelectionComponent implements OnInit {
12+
@ViewChild('igxTree', { static: true })
13+
public igxTree: IgxTreeComponent;
14+
15+
public countries!: any[];
16+
public selectedNodes!: any[];
17+
18+
public ngOnInit(): void {
19+
this.countries = COUNTRIES;
20+
}
21+
22+
public onNodeSelection(args: ITreeNodeSelectionEvent) {
23+
this.selectedNodes = args.newSelection;
24+
}
25+
26+
public chipRemoved(event: IBaseChipEventArgs) {
27+
this.selectedNodes = this.selectedNodes.filter((node) => {
28+
if (node.data.ID === event.owner.id){
29+
this.igxTree.deselectAll([node]);
30+
}
31+
return node.data.ID !== event.owner.id;
32+
});
33+
}
34+
35+
public handleClosing(event: IBaseCancelableBrowserEventArgs) {
36+
event.cancel = event.event.composedPath().some(e => (e as HTMLElement).nodeName.toLowerCase() === 'igx-chip');
37+
}
38+
}

‎src/app/data/countries.ts‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* eslint-disable @typescript-eslint/naming-convention */
2+
export const COUNTRIES: any[] = [
3+
{
4+
ID: 1,
5+
Name: 'UK',
6+
Cities: [
7+
{
8+
ID: 11,
9+
Name: 'London',
10+
Population: 8294058
11+
},
12+
{
13+
ID: 12,
14+
Name: 'Liverpool',
15+
Population: 830112
16+
},
17+
{
18+
ID: 13,
19+
Name: 'Manchester',
20+
Population: 1741961
21+
},
22+
{
23+
ID: 14,
24+
Name: 'Birmingham',
25+
Population: 2293099
26+
},
27+
{
28+
ID: 15,
29+
Name: 'Leeds',
30+
Population: 750700
31+
},
32+
{
33+
ID: 16,
34+
Name: 'Sheffield',
35+
Population: 551800
36+
}
37+
]
38+
},
39+
{
40+
ID: 2,
41+
Name: 'France',
42+
Cities: [
43+
{
44+
ID: 21,
45+
Name: 'Paris',
46+
Population: 2181371
47+
},
48+
{
49+
ID: 22,
50+
Name: 'Marseille',
51+
Population: 839043
52+
},
53+
{
54+
ID: 23,
55+
Name: 'Lyon',
56+
Population: 472305
57+
},
58+
{
59+
ID: 24,
60+
Name: 'Toulouse',
61+
Population: 437715
62+
}
63+
]
64+
},
65+
{
66+
ID: 3,
67+
Name: 'Germany',
68+
Cities: [
69+
{
70+
ID: 31,
71+
Name: 'Berlin',
72+
Population: 3292365
73+
},
74+
{
75+
ID: 32,
76+
Name: 'Hamburg',
77+
Population: 1706696
78+
},
79+
{
80+
ID: 33,
81+
Name: 'Munich',
82+
Population: 1348335
83+
},
84+
{
85+
ID: 34,
86+
Name: 'Cologne',
87+
Population: 1005775
88+
},
89+
{
90+
ID: 35,
91+
Name: 'Stuttgart',
92+
Population: 585890
93+
}
94+
]
95+
},
96+
{
97+
ID: 4,
98+
Name: 'Italy',
99+
Cities: [
100+
{
101+
ID: 41,
102+
Name: 'Rome',
103+
Population: 2761632
104+
},
105+
{
106+
ID: 42,
107+
Name: 'Milan',
108+
Population: 1371498
109+
},
110+
{
111+
ID: 43,
112+
Name: 'Naples',
113+
Population: 914758
114+
},
115+
{
116+
ID: 44,
117+
Name: 'Turin',
118+
Population: 848885
119+
},
120+
{
121+
ID: 45,
122+
Name: 'Venice',
123+
Population: 254661
124+
},
125+
{
126+
ID: 46,
127+
Name: 'Florence',
128+
Population: 367150
129+
}
130+
]
131+
},
132+
{
133+
ID: 5,
134+
Name: 'Spain',
135+
Cities: [
136+
{
137+
ID: 51,
138+
Name: 'Madrid',
139+
Population: 6155116
140+
},
141+
{
142+
ID: 52,
143+
Name: 'Barcelona',
144+
Population: 5179243
145+
},
146+
{
147+
ID: 53,
148+
Name: 'Valencia',
149+
Population: 1645342
150+
},
151+
{
152+
ID: 54,
153+
Name: 'Seville',
154+
Population: 1305342
155+
}
156+
]
157+
}
158+
];

0 commit comments

Comments
 (0)