Merge pull request #3500 from IgniteUI/bpachilova/grid-cascading-combos-fix-3499

Refactor Grid Cascading Combos sample to handle vritualized grid scenario

Author: kacheshmarova

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

@@ -1,14 +1,15 @@
 <div class="grid__wrapper">
     <div class="sample__header">
-        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false"
-            width="100%" height="500px" [primaryKey]="'ID'">
+        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false" width="100%"
+            height="500px" [primaryKey]="'ID'">
             <igx-column field="ID" header="ID" [dataType]="'number'" width="50px">
             </igx-column>
-            <igx-column field="Country" header="Country" [dataType]="'string'" width="220px">
+            <igx-column field="Country" header="Country" dataType="string" width="220px">
                 <ng-template igxCell let-cell="cell">
                     <igx-simple-combo [id]="'country-' + cell.row.data.ID" [data]="countriesData"
                         (selectionChanging)="countryChanging($event, cell)" placeholder="Choose Country..."
-                        [displayKey]="'name'" width="100%">
+                        [ngModel]="cell.value === '' ? undefined : cell.value" [valueKey]="'name'" [displayKey]="'name'"
+                        width="100%">
                     </igx-simple-combo>
                 </ng-template>
             </igx-column>
@@ -17,22 +18,24 @@
                     <div>
                         <igx-simple-combo [id]="'region-' + cell.row.data.ID"
                             (selectionChanging)="regionChanging($event, cell)" placeholder="Choose Region..."
-                            [displayKey]="'name'" [(ngModel)]="cell.value"
-                            [disabled]="cell.row.cells[1].value === ''">
+                            [ngModel]="cell.value === '' ? undefined : cell.value" [valueKey]="'name'"
+                            [displayKey]="'name'" [disabled]="cell.row.cells[1].value === ''">
                         </igx-simple-combo>
-                        <igx-linear-bar [id]="'region-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
+                        <igx-linear-bar *ngIf="cell.row.data.loadingRegion" [id]="'region-progress-' + cell.row.data.ID"
                             type="info" [indeterminate]="true">
                         </igx-linear-bar>
                     </div>
                 </ng-template>
             </igx-column>
-            <igx-column field="City" header="City" width="220px" [editable]="true">
+            <igx-column field="City" header="City" width="220px" dataType="number">
                 <ng-template igxCell let-cell="cell">
                     <div>
                         <igx-simple-combo [id]="'city-' + cell.row.data.ID" placeholder="Choose City..."
-                            [(ngModel)]="cell.value" [displayKey]="'name'" [disabled]="cell.row.cells[2].value === ''">
+                            (selectionChanging)="cityChanging($event, cell)"
+                            [ngModel]="!cell.value ? undefined : cell.value" [valueKey]="'id'" [displayKey]="'name'"
+                            [disabled]="cell.row.cells[2].value === ''">
                         </igx-simple-combo>
-                        <igx-linear-bar [id]="'city-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
+                        <igx-linear-bar *ngIf="cell.row.data.loadingCity" [id]="'city-progress-' + cell.row.data.ID"
                             type="info" [indeterminate]="true">
                         </igx-linear-bar>
                     </div>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
-import { City, Country, getCitiesByCountry, getCountries, Region } from '../../data/cities15000-regions-countries';
+import { Country, getCitiesByCountry, getCountries } from '../../data/cities15000-regions-countries';
 import { DATA } from '../../data/data';
 
 @Component({
@@ -12,9 +12,9 @@ export class GridCascadingCombosComponent implements OnInit {
     @ViewChildren(IgxSimpleComboComponent)
     public combos: QueryList<IgxSimpleComboComponent>;
 
-    public selectedCountry: Country;
-    public selectedRegion: Region;
-    public selectedCity: City;
+    public selectedCountryName: string;
+    public selectedRegionName: string;
+    public selectedCityId: number;
     public countriesData: Country[];
     private loadingTime = 0;
     public data;
@@ -30,62 +30,64 @@ export class GridCascadingCombosComponent implements OnInit {
 
     public countryChanging(e: ISimpleComboSelectionChangingEventArgs, cell) {
         const ID = cell.row.data.ID;
+        cell.row.data.loadingRegion = true;
         const nextRegionCombo = this.combos.filter(
             (combo) => combo.id === 'region-' + ID
         )[0];
         const nextCityCombo = this.combos.filter(
             (combo) => combo.id === 'city-' + ID
         )[0];
         this.clearOldData(cell, nextRegionCombo, nextCityCombo);
-        this.selectedCountry = e.newValue as Country;
+        this.selectedCountryName = e.newValue;
         cell.update(e.newValue ? e.newValue : '');
         if (e.newValue) {
-            document.getElementById('region-progress-' + ID).style.visibility = 'visible';
             this.loadingTime = 2000;
         }
         setTimeout(() => {
-            nextRegionCombo.data = getCitiesByCountry([this.selectedCountry?.name])
+            nextRegionCombo.data = getCitiesByCountry([this.selectedCountryName])
                 .map((c) => ({ name: c.region, country: c.country }))
                 .filter((v, i, a) => a.findIndex((r) => r.name === v.name) === i);
-            document.getElementById('region-progress-' + ID).style.visibility = 'hidden';
+            cell.row.data.loadingRegion = false;
         }, this.loadingTime);
-        this.selectedRegion = null;
-        this.selectedCity = null;
+        this.selectedRegionName = null;
+        this.selectedCityId = null;
         this.loadingTime = 0;
     }
 
     public regionChanging(e: ISimpleComboSelectionChangingEventArgs, cell) {
         const nextComboID = 'city-' + cell.row.data.ID;
+        cell.row.data.loadingCity = true;
         const cityCombo = this.combos.filter(
             (combo) => combo.id === nextComboID
         )[0];
         this.clearOldData(cell, null, cityCombo);
 
-        this.selectedRegion = e.newValue as Region;
+        this.selectedRegionName = e.newValue;
         cell.update(e.newValue ? e.newValue : '');
         if (e.newValue) {
-            document.getElementById(
-                'city-progress-' + cell.row.data.ID
-            ).style.visibility = 'visible';
             this.loadingTime = 2000;
         }
         setTimeout(() => {
-            cityCombo.data = getCitiesByCountry([this.selectedCountry?.name]).filter(
-                (c) => c.region === this.selectedRegion?.name
+            cityCombo.data = getCitiesByCountry([this.selectedCountryName]).filter(
+                (c) => c.region === this.selectedRegionName
             );
-            document.getElementById(
-                'city-progress-' + cell.row.data.ID
-            ).style.visibility = 'hidden';
+            cell.row.data.loadingCity = false;
         }, this.loadingTime);
-        this.selectedCity = null;
+        this.selectedCityId = null;
         this.loadingTime = 0;
     }
+    public cityChanging(e: ISimpleComboSelectionChangingEventArgs, cell) {
+        cell.update(e.newValue);
+        this.selectedCityId = e.newValue;
+    }
 
     private clearOldData(cell, RegionCombo, CityCombo) {
         const nextCellIndex = cell.column.visibleIndex + 1;
         cell.row.cells[nextCellIndex].update('');
 
-        if (CityCombo !== null) CityCombo.data = [];
+        if (CityCombo !== null) {
+            CityCombo.data = [];
+        }
         if (RegionCombo !== null) {
             RegionCombo.data = [];
             cell.row.cells[nextCellIndex + 1].update('');