Skip to content

Commit 2b9fccb

Browse files
Svetloslav15Svetloslav15
committed
Merge branch 'snovoselski/add-sample-for-stateParsed-example-for-grid-vnext' of https://github.com/IgniteUI/igniteui-angular-samples into snovoselski/add-sample-for-stateParsed-example-for-grid-vnext
2 parents f1aa0b9 + 330e43a commit 2b9fccb

13 files changed

Lines changed: 346 additions & 7 deletions

‎live-editing/configs/DropDownConfigGenerator.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { HttpClientModule } from '@angular/common/http';
33
import {
44
IgxButtonModule,
5+
IgxChipsModule,
56
IgxDropDownModule,
67
IgxDividerModule,
78
IgxForOfModule,
@@ -13,7 +14,9 @@ import {
1314
IgxPrefixModule,
1415
IgxSuffixModule,
1516
IgxToastModule,
16-
IgxToggleModule
17+
IgxToggleModule,
18+
IgxTreeModule,
19+
IgxTreeGridModule
1720
} from 'igniteui-angular';
1821
import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
1922
export class DropDownConfigGenerator implements IConfigGenerator {
@@ -122,6 +125,29 @@ export class DropDownConfigGenerator implements IConfigGenerator {
122125
})
123126
}));
124127

128+
configs.push(new Config({
129+
component: 'DropdownTreeHierarchicalSelectionComponent',
130+
appModuleConfig: new AppModuleConfig({
131+
imports: ['IgxDropDownModule', 'DropdownTreeHierarchicalSelectionComponent',
132+
'IgxButtonModule', 'IgxToggleModule', 'IgxTreeModule', 'IgxChipsModule'],
133+
ngDeclarations: ['DropdownTreeHierarchicalSelectionComponent'],
134+
ngImports: ['IgxDropDownModule', 'IgxButtonModule', 'IgxToggleModule', 'IgxTreeModule', 'IgxChipsModule']
135+
}),
136+
shortenComponentPathBy: '/data-entries/dropdown/'
137+
}));
138+
139+
configs.push(new Config({
140+
component: 'DropdownTreeGridHierarchicalSelectionComponent',
141+
appModuleConfig: new AppModuleConfig({
142+
imports: ['IgxDropDownModule', 'DropdownTreeGridHierarchicalSelectionComponent',
143+
'IgxButtonModule', 'IgxToggleModule', 'IgxTreeGridModule', 'IgxChipsModule'],
144+
ngDeclarations: ['DropdownTreeGridHierarchicalSelectionComponent'],
145+
ngImports: ['IgxDropDownModule', 'IgxButtonModule', 'IgxToggleModule', 'IgxTreeGridModule', 'IgxChipsModule']
146+
}),
147+
shortenComponentPathBy: '/data-entries/dropdown/'
148+
}));
149+
150+
125151
return configs;
126152
}
127153
}

‎live-editing/configs/RadioConfigGenerator.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class RadioConfigGenerator implements IConfigGenerator {
4747
component: 'RadioGroupVerticalComponent',
4848
appModuleConfig: new AppModuleConfig({
4949
imports: ['IgxRadioModule', 'RadioGroupVerticalComponent'],
50-
ngDeclarations: ['RadioGroupSampleComponent'],
50+
ngDeclarations: ['RadioGroupVerticalComponent'],
5151
ngImports: ['IgxRadioModule']
5252
}),
5353
shortenComponentPathBy: "/data-entries/radio/"

‎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+
}

0 commit comments

Comments
 (0)