diff --git a/code-gen-library/WebGridCityDropDownTemplate/React.tsx b/code-gen-library/WebGridCityDropDownTemplate/React.tsx
index 7c9171e3f..0617a6bd6 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 (
-        <>
-            <div style={{display: "flex", flexDirection: "column"}}>
-                <IgrCombo ref={(this as any).comboRefs} placeholder="Choose City..." disabled={true} valueKey="Name"  displayKey="Name" name={comboId} singleSelect={true}>
-                </IgrCombo>
-            </div>
-        </>
+            <>
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                    <IgrCombo
+                        ref={this.getComboRef(comboId)}
+                        placeholder="Choose City..." disabled={true}
+                        valueKey="Name" displayKey="Name"
+                        name={comboId}
+                        singleSelect={true}>
+                    </IgrCombo>
+                </div>
+            </>
         );
     }
     //end content
diff --git a/code-gen-library/WebGridCountryDropDownTemplate/React.tsx b/code-gen-library/WebGridCountryDropDownTemplate/React.tsx
index e67206d89..20d419af3 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 (
-        <>
-            <IgrCombo data={CodeGenHelper.findByName<any[]>("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}></IgrCombo>
-        </>
+            <>
+                <IgrCombo
+                    data={CodeGenHelper.findByName<any[]>("countries")}
+                    ref={this.getComboRef(comboId)}
+                    onChange={(event: CustomEvent) => { (this as any).onCountryChange(rowId, event) }}
+                    placeholder="Choose Country..."
+                    valueKey="Country"
+                    displayKey="Country"
+                    singleSelect={true}
+                    name={comboId}>
+                </IgrCombo>
+            </>
         );
     }
     //end content
diff --git a/code-gen-library/WebGridRegionDropDownTemplate/React.tsx b/code-gen-library/WebGridRegionDropDownTemplate/React.tsx
index 3f9099ce6..597406f28 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 (
-        <>
-            <div style={{display: "flex", flexDirection: "column"}}>
-                <IgrCombo ref={(this as any).comboRefs} onChange={(args: any) => { (this as any).onRegionChange(id, args) }} placeholder="Choose Region..." disabled={true} valueKey="Region"  displayKey="Region" singleSelect={true} name={comboId}>
-                </IgrCombo>
-            </div>
-        </>
+            <>
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                    <IgrCombo
+                        ref={this.getComboRef(comboId)}
+                        onChange={(args: any) => { (this as any).onRegionChange(rowId, args) }}
+                        placeholder="Choose Region..."
+                        disabled={true}
+                        valueKey="Region"
+                        displayKey="Region"
+                        singleSelect={true}
+                        name={comboId}>
+                    </IgrCombo>
+                </div>
+            </>
         );
     }
     //end content
diff --git a/code-gen-library/WebGridWithComboRendered/React.tsx b/code-gen-library/WebGridWithComboRendered/React.tsx
index 6497ecdc4..a6be13906 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, IgrComponentBoolValueChangedEventArgs } from 'igniteui-react';
 import { IgrGrid } from 'igniteui-react-grids';
 //end imports
@@ -19,11 +20,12 @@ export class WebGridWithComboRendered {
     public countries = [...CodeGenHelper.findByName<any[]>("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<any[]>("worldCitiesAbove500K")].filter((value, index, array) => array.findIndex(x => x.Region === value.Region) === index);
     public cities = [...CodeGenHelper.findByName<any[]>("worldCitiesAbove500K")].filter((value, index, array) => array.findIndex(x => x.Name === value.Name) === index);
-    private comboRefCollection = new Array<IgrCombo>();
-    private comboRefs(r: IgrCombo) {
-        if (this && r && !this.comboRefCollection.includes(r)) {
-            this.comboRefCollection.push(r);
+    private combos: { [key: string]: RefObject<IgrCombo> } = {};
+    private getComboRef(key: string): RefObject<IgrCombo> {
+        if (!this.combos[key]) {
+            this.combos[key] = createRef<IgrCombo>();
         }
+        return this.combos[key];
     }
 
     public webGridWithComboRendered(args: IgrComponentBoolValueChangedEventArgs): void {
@@ -31,12 +33,12 @@ export class WebGridWithComboRendered {
         grid.data = this.gridData;
     }
 
-    public onCountryChange(rowId: string, args: CustomEvent<any>) {
+    public onCountryChange(rowId: string, event: CustomEvent) {
         // find next combo
-        const regionCombo = this.comboRefCollection.find(c => c.name === "region_" + rowId);
-        const cityCombo = this.comboRefCollection.find(c => c.name === "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<any>) {
+    public onRegionChange(rowId: string, event: CustomEvent<any>) {
         // find next combo
-        const cityCombo = this.comboRefCollection.find(c => c.name === "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;