From 2d290e40db20a474c15f1e7661a78dfcd1bd0a44 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 8 May 2025 16:46:56 +0300 Subject: [PATCH 1/2] Update templates for cascading combos sample for react 19 --- .../WebGridCityDropDownTemplate/React.tsx | 30 +++++++++-------- .../WebGridCountryDropDownTemplate/React.tsx | 28 +++++++++------- .../WebGridRegionDropDownTemplate/React.tsx | 33 +++++++++++-------- .../WebGridWithComboRendered/React.tsx | 24 +++++++------- 4 files changed, 65 insertions(+), 50 deletions(-) diff --git a/code-gen-library/WebGridCityDropDownTemplate/React.tsx b/code-gen-library/WebGridCityDropDownTemplate/React.tsx index 7c9171e3..0617a6bd 100644 --- a/code-gen-library/WebGridCityDropDownTemplate/React.tsx +++ b/code-gen-library/WebGridCityDropDownTemplate/React.tsx @@ -6,21 +6,23 @@ import { IgrCombo } from "igniteui-react"; export class WebGridCityDropDownTemplate { //begin template //begin content - public webGridCityDropDownTemplate = (props: {dataContext: IgrCellTemplateContext}) => { - var cell = props.dataContext.cell as any; - if (cell === undefined) { - return <>; - } - const id = cell.id.rowID; - const comboId = "city_" + id; - (this as any).comboRefs = (this as any).comboRefs.bind(this); + public webGridCityDropDownTemplate = (ctx: IgrCellTemplateContext) => { + const rowId = ctx.cell?.id.rowID; + if (!rowId) return <>; + const comboId = `city_${rowId}`; + return ( - <> -
- - -
- + <> +
+ + +
+ ); } //end content diff --git a/code-gen-library/WebGridCountryDropDownTemplate/React.tsx b/code-gen-library/WebGridCountryDropDownTemplate/React.tsx index e67206d8..79b838df 100644 --- a/code-gen-library/WebGridCountryDropDownTemplate/React.tsx +++ b/code-gen-library/WebGridCountryDropDownTemplate/React.tsx @@ -6,18 +6,24 @@ import { IgrCombo } from "igniteui-react"; export class WebGridCountryDropDownTemplate { //begin template //begin content - public webGridCountryDropDownTemplate = (props: {dataContext: IgrCellTemplateContext}) => { - var cell = props.dataContext.cell as any; - if (cell === undefined) { - return <>; - } - (this as any).comboRefs = (this as any).comboRefs.bind(this); - const id = cell.id.rowID; - const comboId = "country" + id; + public webGridCountryDropDownTemplate = (ctx: IgrCellTemplateContext) => { + const rowId = ctx.cell?.id.rowID; + if (!rowId) return <>; + const comboId = `country_${rowId}`; + return ( - <> - ("countries")} ref={(this as any).comboRefs} onChange={(args: any) => { (this as any).onCountryChange(id, args) }} placeholder="Choose Country..." valueKey="Country" displayKey="Country" singleSelect={true} name={comboId}> - + <> + { (this as any).onCountryChange(rowId, event) }} + placeholder="Choose Country..." + valueKey="Country" + displayKey="Country" + singleSelect={true} + name={comboId}> + + ); } //end content diff --git a/code-gen-library/WebGridRegionDropDownTemplate/React.tsx b/code-gen-library/WebGridRegionDropDownTemplate/React.tsx index 3f9099ce..597406f2 100644 --- a/code-gen-library/WebGridRegionDropDownTemplate/React.tsx +++ b/code-gen-library/WebGridRegionDropDownTemplate/React.tsx @@ -6,21 +6,26 @@ import { IgrCombo } from "igniteui-react"; export class WebGridRegionDropDownTemplate { //begin template //begin content - public webGridRegionDropDownTemplate = (props: {dataContext: IgrCellTemplateContext}) => { - var cell = props.dataContext.cell as any; - if (cell === undefined) { - return <>; - } - const id = cell.id.rowID; - const comboId = "region_" + id; - (this as any).comboRefs = (this as any).comboRefs.bind(this); + public webGridRegionDropDownTemplate = (ctx: IgrCellTemplateContext) => { + const rowId = ctx.cell?.id.rowID; + if (!rowId) return <>; + const comboId = `region_${rowId}`; + return ( - <> -
- { (this as any).onRegionChange(id, args) }} placeholder="Choose Region..." disabled={true} valueKey="Region" displayKey="Region" singleSelect={true} name={comboId}> - -
- + <> +
+ { (this as any).onRegionChange(rowId, args) }} + placeholder="Choose Region..." + disabled={true} + valueKey="Region" + displayKey="Region" + singleSelect={true} + name={comboId}> + +
+ ); } //end content diff --git a/code-gen-library/WebGridWithComboRendered/React.tsx b/code-gen-library/WebGridWithComboRendered/React.tsx index 0cb8392d..7bc6e6ad 100644 --- a/code-gen-library/WebGridWithComboRendered/React.tsx +++ b/code-gen-library/WebGridWithComboRendered/React.tsx @@ -1,4 +1,5 @@ //begin imports +import { createRef, RefObject } from 'react'; import { IgrCombo, IgrVoidEventArgs } from 'igniteui-react'; import { IgrGrid } from 'igniteui-react-grids'; //end imports @@ -19,11 +20,12 @@ export class WebGridWithComboRendered { public countries = [...CodeGenHelper.findByName("worldCitiesAbove500K")].filter(x => this.countryNames.indexOf(x.Country) !== -1).filter((value, index, array) => array.findIndex(x => x.Country === value.Country) === index); public regions = [...CodeGenHelper.findByName("worldCitiesAbove500K")].filter((value, index, array) => array.findIndex(x => x.Region === value.Region) === index); public cities = [...CodeGenHelper.findByName("worldCitiesAbove500K")].filter((value, index, array) => array.findIndex(x => x.Name === value.Name) === index); - private comboRefCollection = new Map(); - private comboRefs(r: IgrCombo) { - if (this && r && !this.comboRefCollection.get((r as any).props.name)) { - this.comboRefCollection.set((r as any).props.name, r); + private combos: { [key: string]: RefObject } = {}; + private getComboRef(key: string): RefObject { + if (!this.combos[key]) { + this.combos[key] = createRef(); } + return this.combos[key]; } public webGridWithComboRendered(args: IgrVoidEventArgs) { @@ -31,12 +33,12 @@ export class WebGridWithComboRendered { grid.data = this.gridData; } - public onCountryChange(rowId: string, args: CustomEvent) { + public onCountryChange(rowId: string, event: CustomEvent) { // find next combo - const regionCombo = this.comboRefCollection.get("region_" + rowId); - const cityCombo = this.comboRefCollection.get("city_" + rowId); + const regionCombo = this.getComboRef(`region_${rowId}`).current; + const cityCombo = this.getComboRef(`city_${rowId}`).current; const regions = this.regions; - const newValue = args.detail.newValue[0]; + const newValue = event.detail.newValue[0]; if (newValue === undefined) { regionCombo.deselect(regionCombo.value); regionCombo.disabled = true; @@ -55,11 +57,11 @@ export class WebGridWithComboRendered { } } - public onRegionChange(rowId: string, args: CustomEvent) { + public onRegionChange(rowId: string, event: CustomEvent) { // find next combo - const cityCombo = this.comboRefCollection.get("city_" + rowId); + const cityCombo = this.getComboRef(`city_${rowId}`).current; const cities = this.cities; - const newValue = args.detail.newValue[0]; + const newValue = event.detail.newValue[0]; if (newValue === undefined) { cityCombo.deselect(cityCombo.value); cityCombo.disabled = true; From c4d6f56ed1452609356dcf27cf5d3e597cb8cb43 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 17 Jun 2025 12:31:06 +0300 Subject: [PATCH 2/2] fix(casading combos): minor change --- code-gen-library/WebGridCountryDropDownTemplate/React.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code-gen-library/WebGridCountryDropDownTemplate/React.tsx b/code-gen-library/WebGridCountryDropDownTemplate/React.tsx index 79b838df..20d419af 100644 --- a/code-gen-library/WebGridCountryDropDownTemplate/React.tsx +++ b/code-gen-library/WebGridCountryDropDownTemplate/React.tsx @@ -14,7 +14,7 @@ export class WebGridCountryDropDownTemplate { return ( <> ("countries")} ref={this.getComboRef(comboId)} onChange={(event: CustomEvent) => { (this as any).onCountryChange(rowId, event) }} placeholder="Choose Country..."