From e3a652ab519ed9c1f5c7d18be775c2237ea9d610 Mon Sep 17 00:00:00 2001
From: ddaribo <bozhidara.pp@gmail.com>
Date: Thu, 20 Jun 2024 12:11:12 +0300
Subject: [PATCH 1/2] fix(cascading-combos): bind cell value, ngIf for progress
 bars

---
 .../grid-cascading-combos.component.html      | 12 +++++-----
 .../grid-cascading-combos.component.ts        | 22 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
index 233090a06..9521b1f60 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
@@ -8,6 +8,7 @@
                 <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%">
                     </igx-simple-combo>
                 </ng-template>
@@ -17,10 +18,10 @@
                     <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"  (ngModelChange)="handleCellUpdate($event, cell)"
+                            [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>
@@ -30,9 +31,10 @@
                 <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 === ''">
+                            [ngModel]="cell.value === '' ? undefined : cell.value"  (ngModelChange)="handleCellUpdate($event, cell)"
+                            [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>
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts
index 940eab28f..f32b85a8b 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
+import { CellType, IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from 'igniteui-angular';
 import { City, Country, getCitiesByCountry, getCountries, Region } from '../../data/cities15000-regions-countries';
 import { DATA } from '../../data/data';
 
@@ -30,6 +30,7 @@ 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];
@@ -40,14 +41,13 @@ export class GridCascadingCombosComponent implements OnInit {
         this.selectedCountry = e.newValue as Country;
         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])
                 .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;
@@ -56,6 +56,7 @@ export class GridCascadingCombosComponent implements OnInit {
 
     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];
@@ -64,18 +65,13 @@ export class GridCascadingCombosComponent implements OnInit {
         this.selectedRegion = e.newValue as Region;
         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
             );
-            document.getElementById(
-                'city-progress-' + cell.row.data.ID
-            ).style.visibility = 'hidden';
+            cell.row.data.loadingCity = false;
         }, this.loadingTime);
         this.selectedCity = null;
         this.loadingTime = 0;
@@ -85,10 +81,16 @@ export class GridCascadingCombosComponent implements OnInit {
         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('');
         }
     }
+
+    public handleCellUpdate(value: any, cell: CellType) {
+        cell.update(value);
+    }
 }

From bf0f12e495184879b66fa4366d449792597147ad Mon Sep 17 00:00:00 2001
From: ddaribo <bozhidara.pp@gmail.com>
Date: Tue, 25 Jun 2024 14:24:21 +0300
Subject: [PATCH 2/2] fix(cascading-combos): assign valueKeys, more changes

---
 .../grid-cascading-combos.component.html      | 19 +++++-----
 .../grid-cascading-combos.component.ts        | 36 +++++++++----------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
index 9521b1f60..2b7ea90d3 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
+++ b/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">
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts
index f32b85a8b..b49b60b7f 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.ts
+++ b/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);
-    }
 }