fix(cascading-combos): assign valueKeys, more changes

Author: ddaribo

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

@@ -1,15 +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..."
-                        [ngModel]="cell.value === '' ? undefined : cell.value" (ngModelChange)="handleCellUpdate($event, cell)"
-                        [displayKey]="'name'" width="100%">
+                        [ngModel]="cell.value === '' ? undefined : cell.value" [valueKey]="'name'" [displayKey]="'name'"
+                        width="100%">
                     </igx-simple-combo>
                 </ng-template>
             </igx-column>
@@ -18,7 +18,7 @@
                     <div>
                         <igx-simple-combo [id]="'region-' + cell.row.data.ID"
                             (selectionChanging)="regionChanging($event, cell)" placeholder="Choose Region..."
-                            [ngModel]="cell.value === '' ? undefined : cell.value"  (ngModelChange)="handleCellUpdate($event, cell)"
+                            [ngModel]="cell.value === '' ? undefined : cell.value" [valueKey]="'name'"
                             [displayKey]="'name'" [disabled]="cell.row.cells[1].value === ''">
                         </igx-simple-combo>
                         <igx-linear-bar *ngIf="cell.row.data.loadingRegion" [id]="'region-progress-' + cell.row.data.ID"
@@ -27,12 +27,13 @@
                     </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 === '' ? undefined : cell.value"  (ngModelChange)="handleCellUpdate($event, cell)"
-                            [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 *ngIf="cell.row.data.loadingCity" [id]="'city-progress-' + cell.row.data.ID"
                             type="info" [indeterminate]="true">

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { CellType, IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
-import { City, Country, getCitiesByCountry, getCountries, Region } from '../../data/cities15000-regions-countries';
+import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
+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;
@@ -38,19 +38,19 @@ export class GridCascadingCombosComponent implements OnInit {
             (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) {
             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);
-                cell.row.data.loadingRegion = false;
+            cell.row.data.loadingRegion = false;
         }, this.loadingTime);
-        this.selectedRegion = null;
-        this.selectedCity = null;
+        this.selectedRegionName = null;
+        this.selectedCityId = null;
         this.loadingTime = 0;
     }
 
@@ -62,20 +62,24 @@ export class GridCascadingCombosComponent implements OnInit {
         )[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) {
             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
             );
             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;
@@ -89,8 +93,4 @@ export class GridCascadingCombosComponent implements OnInit {
             cell.row.cells[nextCellIndex + 1].update('');
         }
     }
-
-    public handleCellUpdate(value: any, cell: CellType) {
-        cell.update(value);
-    }
 }