Skip to content

Commit 7915eea

Browse files
author
katherinedragieva
committed
chore(grid): add grid with cascading combos sample
1 parent 709334c commit 7915eea

7 files changed

Lines changed: 221 additions & 2 deletions

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

‎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)