Skip to content

Commit d735409

Browse files
zdrawkuzdrawku
authored
Merge pull request #3265 from IgniteUI/kdragieva/3264-add-cascading-combos-grid-sample
Add Grid with Cascading Combos sample
2 parents 956450c + 69a9f19 commit d735409

8 files changed

Lines changed: 228 additions & 2 deletions

File tree

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
IgxCheckboxModule,
1616
IgxChipsModule,
1717
IgxComboModule,
18+
IgxSimpleComboModule,
1819
IgxCsvExporterService,
1920
IgxDatePickerModule,
2021
IgxDialogModule,
@@ -1433,6 +1434,16 @@ export class GridConfigGenerator implements IConfigGenerator {
14331434
})
14341435
}));
14351436

1437+
configs.push(new Config({
1438+
component: 'GridCascadingCombosComponent',
1439+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/cities15000-regions-countries.ts', '/src/app/data/data.ts'],
1440+
appModuleConfig: new AppModuleConfig({
1441+
imports: ['IgxGridModule', 'GridCascadingCombosComponent', 'IgxPreventDocumentScrollModule', 'IgxComboModule', 'IgxSimpleComboModule'],
1442+
ngDeclarations: ['GridCascadingCombosComponent'],
1443+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxComboModule', 'IgxSimpleComboModule']
1444+
})
1445+
}));
1446+
14361447
return configs;
14371448
}
14381449
}

‎src/app/data/data.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const DATA: any[] = [
2+
{
3+
ID: 1,
4+
Country: '',
5+
Region: '',
6+
City: ''
7+
},
8+
{
9+
ID: 2,
10+
Country: '',
11+
Region: '',
12+
City: ''
13+
},
14+
{
15+
ID: 3,
16+
Country: '',
17+
Region: '',
18+
City: ''
19+
}
20+
];

‎src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="grid__wrapper">
2+
<div class="sample__header">
3+
<igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy"
4+
width="100%" height="500px" [primaryKey]="'ID'">
5+
<igx-column field="ID" header="ID" [dataType]="'number'" width="50px">
6+
</igx-column>
7+
<igx-column field="Country" header="Country" [dataType]="'string'" width="220px">
8+
<ng-template igxCell let-cell="cell">
9+
<igx-simple-combo [id]="'country-' + cell.row.data.ID" [data]="countriesData"
10+
(selectionChanging)="countryChanging($event, cell)" placeholder="Choose Country..."
11+
[displayKey]="'name'" width="100%">
12+
</igx-simple-combo>
13+
</ng-template>
14+
</igx-column>
15+
<igx-column field="Region" header="Region" dataType="string" width="220px">
16+
<ng-template igxCell let-cell="cell">
17+
<div>
18+
<igx-simple-combo [id]="'region-' + cell.row.data.ID"
19+
(selectionChanging)="regionChanging($event, cell)" placeholder="Choose Region..."
20+
[displayKey]="'name'" [(ngModel)]="cell.value" [disabled]="cell.row.cells[1].value === ''">
21+
</igx-simple-combo>
22+
<igx-linear-bar [id]="'region-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
23+
type="info" [indeterminate]="true">
24+
</igx-linear-bar>
25+
</div>
26+
</ng-template>
27+
</igx-column>
28+
<igx-column field="City" header="City" width="220px" [editable]="true">
29+
<ng-template igxCell let-cell="cell">
30+
<div>
31+
<igx-simple-combo [id]="'city-' + cell.row.data.ID" placeholder="Choose City..."
32+
[(ngModel)]="cell.value" [displayKey]="'name'" [disabled]="cell.row.cells[2].value === ''">
33+
</igx-simple-combo>
34+
<igx-linear-bar [id]="'city-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
35+
type="info" [indeterminate]="true">
36+
</igx-linear-bar>
37+
</div>
38+
</ng-template>
39+
</igx-column>
40+
</igx-grid>
41+
</div>
42+
</div>

‎src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.grid__wrapper {
2+
padding: 16px;
3+
}
4+
5+
.dialogNewRecord {
6+
> * {
7+
margin-bottom: 8px;
8+
9+
&:last-child {
10+
margin-bottom: 0;
11+
}
12+
}
13+
14+
#discontinued {
15+
margin-top: 15px;
16+
}
17+
}
18+
19+
:host{
20+
::ng-deep{
21+
.igx-grid {
22+
margin-top: 10px;
23+
}
24+
.igx-checkbox {
25+
margin-top: 5px;
26+
margin-bottom: 5px;
27+
padding-top: 8px;
28+
padding-bottom: 5px;
29+
}
30+
.reorderLevelInput {
31+
color: black;
32+
width: 100%;
33+
}
34+
@media screen and (max-width: 934px) {
35+
.igx-grid {
36+
overflow-x: none;
37+
}
38+
}
39+
}
40+
}
41+
42+
.default-theme {
43+
.addProdBtn.igx-button--raised {
44+
background-color: lightgrey;
45+
color: black;
46+
&:hover {
47+
background-color: rgba(0, 0, 0, 0.26)
48+
}
49+
}
50+
}

‎src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
2+
import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
3+
import { City, Country, getCitiesByCountry, getCountries, Region } from '../../data/cities15000-regions-countries';
4+
import { DATA } from '../../data/data';
5+
6+
@Component({
7+
selector: 'grid-cascading-combos',
8+
templateUrl: './grid-cascading-combos.component.html',
9+
styleUrls: ['./grid-cascading-combos.component.scss']
10+
})
11+
export class GridCascadingCombosComponent implements OnInit {
12+
@ViewChildren(IgxSimpleComboComponent)
13+
public combos: QueryList<IgxSimpleComboComponent>;
14+
15+
public selectedCountry: Country;
16+
public selectedRegion: Region;
17+
public selectedCity: City;
18+
public countriesData: Country[];
19+
private loadingTime = 0;
20+
public data;
21+
22+
public ngOnInit() {
23+
this.data = DATA;
24+
this.countriesData = getCountries([
25+
'United States',
26+
'Japan',
27+
'United Kingdom'
28+
]);
29+
}
30+
31+
public countryChanging(e: ISimpleComboSelectionChangingEventArgs, cell) {
32+
const ID = cell.row.data.ID;
33+
const nextRegionCombo = this.combos.filter(
34+
(combo) => combo.id === 'region-' + ID
35+
)[0];
36+
const nextCityCombo = this.combos.filter(
37+
(combo) => combo.id === 'city-' + ID
38+
)[0];
39+
this.clearOldData(cell, nextRegionCombo, nextCityCombo);
40+
this.selectedCountry = e.newSelection as Country;
41+
cell.update(e.newSelection ? e.newSelection : '');
42+
if (e.newSelection) {
43+
document.getElementById('region-progress-' + ID).style.visibility = 'visible';
44+
this.loadingTime = 2000;
45+
}
46+
setTimeout(() => {
47+
nextRegionCombo.data = getCitiesByCountry([this.selectedCountry?.name])
48+
.map((c) => ({ name: c.region, country: c.country }))
49+
.filter((v, i, a) => a.findIndex((r) => r.name === v.name) === i);
50+
document.getElementById('region-progress-' + ID).style.visibility = 'hidden';
51+
}, this.loadingTime);
52+
this.selectedRegion = null;
53+
this.selectedCity = null;
54+
this.loadingTime = 0;
55+
}
56+
57+
public regionChanging(e: ISimpleComboSelectionChangingEventArgs, cell) {
58+
const nextComboID = 'city-' + cell.row.data.ID;
59+
const cityCombo = this.combos.filter(
60+
(combo) => combo.id === nextComboID
61+
)[0];
62+
this.clearOldData(cell, null, cityCombo);
63+
64+
this.selectedRegion = e.newSelection as Region;
65+
cell.update(e.newSelection ? e.newSelection : '');
66+
if (e.newSelection) {
67+
document.getElementById(
68+
'city-progress-' + cell.row.data.ID
69+
).style.visibility = 'visible';
70+
this.loadingTime = 2000;
71+
}
72+
setTimeout(() => {
73+
cityCombo.data = getCitiesByCountry([this.selectedCountry?.name]).filter(
74+
(c) => c.region === this.selectedRegion?.name
75+
);
76+
document.getElementById(
77+
'city-progress-' + cell.row.data.ID
78+
).style.visibility = 'hidden';
79+
}, this.loadingTime);
80+
this.selectedCity = null;
81+
this.loadingTime = 0;
82+
}
83+
84+
private clearOldData(cell, RegionCombo, CityCombo) {
85+
const nextCellIndex = cell.column.visibleIndex + 1;
86+
cell.row.cells[nextCellIndex].update('');
87+
88+
if (CityCombo !== null) CityCombo.data = [];
89+
if (RegionCombo !== null) {
90+
RegionCombo.data = [];
91+
cell.row.cells[nextCellIndex + 1].update('');
92+
}
93+
}
94+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,5 +124,6 @@ export const gridsRoutesData = {
124124
'grid-validation-style': { displayName: 'Grid with Validation Styles', parentName: 'Grid' },
125125
'grid-validator-service-extended': { displayName: 'Grid Validator Service Extended', parentName: 'Grid'},
126126
'grid-summary-export': { displayName: 'Grid Summary Export', parentName: 'Grid'},
127-
'grid-state-persistence': { displayName: 'Grid State Persistence', parentName: 'Grid'}
127+
'grid-state-persistence': { displayName: 'Grid State Persistence', parentName: 'Grid'},
128+
'grid-cascading-combos': { displayName: 'Grid Editing with Cascading Combos', parentName: 'Grid'}
128129
};

‎src/app/grid/grids-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ import { GridValidationStyleComponent } from './grid-validation-style/grid-valid
130130
import { GridValidatorServiceExtendedComponent } from './grid-validator-service-extended/grid-validator-service-extended.component';
131131
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
132132
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
133+
import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
133134

134135
// tslint:enable:max-line-length
135136

@@ -753,6 +754,11 @@ export const gridsRoutes: Routes = [
753754
component: GridStatePersistenceSampleComponent,
754755
data: gridsRoutesData['grid-state-persistence'],
755756
path: 'grid-state-persistence'
757+
},
758+
{
759+
component: GridCascadingCombosComponent,
760+
data: gridsRoutesData['grid-cascading-combos'],
761+
path: 'grid-cascading-combos'
756762
}
757763
];
758764

‎src/app/grid/grids.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ import { GridValidationStyleComponent } from './grid-validation-style/grid-valid
139139
import { GridValidatorServiceExtendedComponent, PhoneFormatDirective } from './grid-validator-service-extended/grid-validator-service-extended.component';
140140
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
141141
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
142+
import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
142143

143144
@NgModule({
144145
declarations: [
@@ -268,7 +269,8 @@ import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sa
268269
GridValidatorServiceExtendedComponent,
269270
PhoneFormatDirective,
270271
GridSummaryExportComponent,
271-
GridStatePersistenceSampleComponent
272+
GridStatePersistenceSampleComponent,
273+
GridCascadingCombosComponent
272274
],
273275
imports: [
274276
CommonModule,

0 commit comments

Comments
 (0)