diff --git a/samples/charts/data-chart/data-annotation-band-layer/src/index.tsx b/samples/charts/data-chart/data-annotation-band-layer/src/index.tsx
index 8aea3a77b..d9d2c179f 100644
--- a/samples/charts/data-chart/data-annotation-band-layer/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-band-layer/src/index.tsx
@@ -27,32 +27,19 @@ export default class Sample extends React.Component<any, any> {
     private chartRef(r: IgrDataChart) {
         this.chart = r;
         this.setState({});
-    }      
-    private xAxisBottom: IgrCategoryXAxis
-    private xAxisBottomRef(r: IgrCategoryXAxis){
-        this.xAxisBottom = r;
-        this.setState({});
     }
+    private xAxisBottom: IgrCategoryXAxis
     private xAxis: IgrCategoryXAxis
     private yAxisLeft: IgrNumericYAxis
     private yAxisRight: IgrNumericYAxis
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private bandLayer: IgrDataAnnotationBandLayer
-    private bandLayerRef(r: IgrDataAnnotationBandLayer) {
-        this.bandLayer = r;
-        this.setState({});
-    }
 
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.bandLayerRef = this.bandLayerRef.bind(this);   
-        this.xAxisBottomRef = this.xAxisBottomRef.bind(this);     
-    }
-    componentDidMount(): void {
-        this.bandLayer.targetAxis = this.xAxisBottom;
     }
 
     public render(): JSX.Element {
@@ -80,7 +67,6 @@ export default class Sample extends React.Component<any, any> {
                     chartTitle="Data Chart with DataAnnotationBandLayer bound to data that annotates stock rapid growth">
                     <IgrCategoryXAxis
                         name="xAxisBottom"
-                        ref={this.xAxisBottomRef}
                         dataSource={this.stockTesla}
                         label="index"
                         tickLength="0"
@@ -145,8 +131,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationBandLayer
                         name="BandLayer"
-                        ref={this.bandLayerRef}
                         dataSource={this.annotationBandData}
+                        targetAxis={this.xAxisBottom}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="DataLabel"
                         endLabelXDisplayMode="DataLabel"
diff --git a/samples/charts/data-chart/data-annotation-line-layer/src/index.tsx b/samples/charts/data-chart/data-annotation-line-layer/src/index.tsx
index c4c8369de..f9f36380d 100644
--- a/samples/charts/data-chart/data-annotation-line-layer/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-line-layer/src/index.tsx
@@ -28,43 +28,21 @@ export default class Sample extends React.Component<any, any> {
     private chartRef(r: IgrDataChart) {
         this.chart = r;
         this.setState({});
-    } 
-    private xAxis: IgrCategoryXAxis
-    private xAxisRef(r: IgrCategoryXAxis){
-        this.xAxis = r;
-        this.setState({});
     }
+    private xAxis: IgrCategoryXAxis
     private yAxisLeft: IgrNumericYAxis
     private yAxisRight: IgrNumericYAxis
-    private yAxisRightRef(r: IgrNumericYAxis){
-        this.yAxisRight = r;
-        this.setState({});
-    }
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private lineLayer52WeekRange: IgrDataAnnotationLineLayer
-    private lineLayer52WeekRangeRef(r: IgrDataAnnotationLineLayer){
-        this.lineLayer52WeekRange = r;
-        this.setState({});
-    }
     private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
-    private lineLayerGrowthAndDeclineRef(r: IgrDataAnnotationLineLayer){
-        this.lineLayerGrowthAndDecline = r;
-        this.setState({});
-    }
+
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.xAxisRef = this.xAxisRef.bind(this);
-        this.yAxisRightRef = this.yAxisRightRef.bind(this);
-        this.lineLayer52WeekRangeRef = this.lineLayer52WeekRangeRef.bind(this);
-        this.lineLayerGrowthAndDeclineRef = this.lineLayerGrowthAndDeclineRef.bind(this);
-    }
-    componentDidMount(): void {
-        this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
-        this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
     }
+
     public render(): JSX.Element {
         return (
         <div className="container sample">
@@ -90,7 +68,6 @@ export default class Sample extends React.Component<any, any> {
                     chartTitle="The Data Chart demonstrates the DataAnnotationLineLayer bound to data that annotates stock growth and decline patterns.">
                     <IgrCategoryXAxis
                         name="xAxis"
-                        ref={this.xAxisRef}
                         dataSource={this.stockTesla}
                         label="date"
                         labelLeftMargin="0"
@@ -113,7 +90,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericYAxis>
                     <IgrNumericYAxis
                         name="yAxisRight"
-                        ref={this.yAxisRightRef}
                         labelLocation="OutsideRight"
                         labelTextStyle="normal normal 12px Verdana"
                         labelExtent="80"
@@ -145,8 +121,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationLineLayer
                         name="LineLayer52WeekRange"
-                        ref={this.lineLayer52WeekRangeRef}
                         dataSource={this.annotationLineData1}
+                        targetAxis={this.yAxisRight}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="Hidden"
                         startLabelYDisplayMode="DataValue"
@@ -168,8 +144,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationLineLayer>
                     <IgrDataAnnotationLineLayer
                         name="LineLayerGrowthAndDecline"
-                        ref={this.lineLayerGrowthAndDeclineRef}
                         dataSource={this.annotationLineData2}
+                        targetAxis={this.xAxis}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="Hidden"
                         endLabelXDisplayMode="Hidden"
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx b/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx
index 4d711cfb2..d7d45152e 100644
--- a/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx
@@ -29,28 +29,15 @@ export default class Sample extends React.Component<any, any> {
     }
     private xAxis: IgrCategoryXAxis
     private yAxis: IgrNumericYAxis
-    private yAxisRef(r: IgrNumericYAxis) {
-        this.yAxis = r;
-        this.setState({});
-    }
     private series1: IgrLineSeries
     private valueOverlay: IgrValueOverlay
     private valueLayer: IgrValueLayer
     private annoLayer: IgrDataAnnotationSliceLayer
-    private annoLayerRef(r: IgrDataAnnotationSliceLayer){
-        this.annoLayer = r;
-        this.setState({});
-    }
 
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.yAxisRef = this.yAxisRef.bind(this);
-        this.annoLayerRef = this.annoLayerRef.bind(this);
-    }
-    componentDidMount(): void {
-        this.annoLayer.targetAxis = this.yAxis;
     }
 
     public render(): JSX.Element {
@@ -73,7 +60,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrCategoryXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
-                        ref={this.yAxisRef}
                         labelExtent="60"
                         labelHorizontalAlignment="Center"
                         labelLeftMargin="0"
@@ -118,8 +104,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrValueLayer>
                     <IgrDataAnnotationSliceLayer
                         name="AnnoLayer"
-                        ref={this.annoLayerRef}
                         dataSource={this.annotationSliceMultiOverlayData}
+                        targetAxis={this.yAxis}
                         brush="green"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx b/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx
index 7b4fdaab5..1b02f6e53 100644
--- a/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx
@@ -36,85 +36,23 @@ export default class Sample extends React.Component<any, any> {
         this.setState({});
     }
     private xAxisBottom: IgrCategoryXAxis
-    private xAxisBottonRef(r: IgrCategoryXAxis){
-        this.xAxisBottom = r;
-        this.setState({});
-    }
     private xAxis: IgrCategoryXAxis
-     private xAxisRef(r: IgrCategoryXAxis){
-        this.xAxis = r;
-        this.setState({});
-    }
     private xAxisTop: IgrCategoryXAxis
-    private xAxisTopRef(r: IgrCategoryXAxis){
-        this.xAxisTop = r;
-        this.setState({});
-    }
     private yAxisLeft: IgrNumericYAxis
-    private yAxisLeftRef(r: IgrNumericYAxis){
-        this.yAxisLeft = r;
-        this.setState({});
-    }
     private yAxisRight: IgrNumericYAxis
-      private yAxisRightRef(r: IgrNumericYAxis){
-        this.yAxisRight = r;
-        this.setState({});
-    }
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private stripLayer: IgrDataAnnotationStripLayer
-     private stripRef1(r: IgrDataAnnotationStripLayer){
-        this.stripLayer = r;
-        this.setState({});
-    }
     private lineLayer52WeekRange: IgrDataAnnotationLineLayer
-    private lineRef1(r: IgrDataAnnotationLineLayer){
-        this.lineLayer52WeekRange = r;
-        this.setState({});
-    }
     private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
-     private lineRef2(r: IgrDataAnnotationLineLayer){
-        this.lineLayerGrowthAndDecline = r;
-        this.setState({});
-    }
     private sliceLayerStockSplit: IgrDataAnnotationSliceLayer
-     private sliceRef1(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerStockSplit = r;
-        this.setState({});
-    }
     private sliceLayerEarningsMissAnnotations: IgrDataAnnotationSliceLayer
-    private sliceRef2(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerEarningsMissAnnotations = r;
-        this.setState({});
-    }
     private sliceLayerEarningsBeatAnnotations: IgrDataAnnotationSliceLayer
-    private sliceRef3(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerEarningsBeatAnnotations = r;
-        this.setState({});
-    }
+
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.stripRef1 = this.stripRef1.bind(this);
-        this.lineRef1 = this.lineRef1.bind(this);
-        this.lineRef2 = this.lineRef2.bind(this);
-        this.sliceRef1 = this.sliceRef1.bind(this);
-        this.sliceRef2 = this.sliceRef2.bind(this);
-        this.sliceRef3 = this.sliceRef3.bind(this);
-        this.xAxisRef = this.xAxisRef.bind(this);
-        this.xAxisBottonRef = this.xAxisBottonRef.bind(this);
-        this.xAxisTopRef = this.xAxisTopRef.bind(this);
-        this.yAxisLeftRef = this.yAxisLeftRef.bind(this);
-        this.yAxisRightRef = this.yAxisRightRef.bind(this);
-    }
-    componentDidMount(): void {
-        this.stripLayer.targetAxis = this.xAxisTop;
-        this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
-        this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
-        this.sliceLayerStockSplit.targetAxis = this.xAxisBottom;
-        this.sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
-        this.sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;        
     }
 
     public render(): JSX.Element {
@@ -142,7 +80,6 @@ export default class Sample extends React.Component<any, any> {
                     chartTitle="This Data Chart has multiple Data Annotation Layers bound to data that annotates important events and patterns in stock prices.">
                     <IgrCategoryXAxis
                         name="xAxisBottom"
-                        ref={this.xAxisBottonRef}
                         dataSource={this.stockTesla}
                         label="index"
                         tickLength="0"
@@ -158,7 +95,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrCategoryXAxis>
                     <IgrCategoryXAxis
                         name="xAxis"
-                        ref={this.xAxisRef}
                         dataSource={this.stockTesla}
                         label="date"
                         labelLeftMargin="0"
@@ -168,7 +104,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrCategoryXAxis>
                     <IgrCategoryXAxis
                         name="xAxisTop"
-                        ref={this.xAxisTopRef}
                         dataSource={this.stockTesla}
                         label="date"
                         tickLength="0"
@@ -183,7 +118,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrCategoryXAxis>
                     <IgrNumericYAxis
                         name="yAxisLeft"
-                        ref={this.yAxisLeftRef}
                         labelLocation="OutsideLeft"
                         labelTextStyle="normal normal 12px Verdana"
                         labelExtent="80"
@@ -197,7 +131,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericYAxis>
                     <IgrNumericYAxis
                         name="yAxisRight"
-                        ref={this.yAxisRightRef}
                         labelLocation="OutsideRight"
                         labelTextStyle="normal normal 12px Verdana"
                         labelExtent="80"
@@ -228,9 +161,9 @@ export default class Sample extends React.Component<any, any> {
                         layoutMode="Vertical">
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationStripLayer
-                        ref={this.stripRef1}
                         name="StripLayer"
                         dataSource={this.annotationStripData}
+                        targetAxis={this.xAxisTop}
                         centerLabelMemberPath="label"
                         startValueMemberPath="start"
                         endValueMemberPath="end"
@@ -244,8 +177,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationStripLayer>
                     <IgrDataAnnotationLineLayer
                         name="LineLayer52WeekRange"
-                        ref={this.lineRef1}
                         dataSource={this.annotationLineData1}
+                        targetAxis={this.yAxisRight}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="Hidden"
                         startLabelYDisplayMode="DataValue"
@@ -267,8 +200,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationLineLayer>
                     <IgrDataAnnotationLineLayer
                         name="LineLayerGrowthAndDecline"
-                        ref={this.lineRef2}
                         dataSource={this.annotationLineData2}
+                        targetAxis={this.xAxis}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="Hidden"
                         endLabelXDisplayMode="Hidden"
@@ -288,8 +221,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationLineLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerStockSplit"
-                        ref={this.sliceRef1}
                         dataSource={this.annotationSliceStockSplitData}
+                        targetAxis={this.xAxisBottom}
                         brush="dodgerblue"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
@@ -302,8 +235,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationSliceLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerEarningsMissAnnotations"
-                        ref={this.sliceRef2}
                         dataSource={this.annotationSliceEarningsMissData}
+                        targetAxis={this.xAxisBottom}
                         brush="red"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
@@ -316,8 +249,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationSliceLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerEarningsBeatAnnotations"
-                        ref={this.sliceRef3}
                         dataSource={this.annotationSliceEarningsBeatData}
+                        targetAxis={this.xAxisBottom}
                         brush="green"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
diff --git a/samples/charts/data-chart/data-annotation-rect-layer/src/index.tsx b/samples/charts/data-chart/data-annotation-rect-layer/src/index.tsx
index 23ac19134..8c6430e71 100644
--- a/samples/charts/data-chart/data-annotation-rect-layer/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-rect-layer/src/index.tsx
@@ -29,28 +29,15 @@ export default class Sample extends React.Component<any, any> {
         this.setState({});
     }
     private xAxis: IgrCategoryXAxis
-    private xAxisRef(r: IgrCategoryXAxis){
-        this.xAxis = r;
-        this.setState({});
-    }
     private yAxis: IgrNumericYAxis
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private rectLayer: IgrDataAnnotationRectLayer
-    private rectLayerRef(r: IgrDataAnnotationRectLayer){
-        this.rectLayer = r;
-        this.setState({});
-    }
 
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.xAxisRef = this.xAxisRef.bind(this);
-        this.rectLayerRef = this.rectLayerRef.bind(this);
-    }
-    componentDidMount(): void {
-        this.rectLayer.targetAxis = this.xAxis;
     }
 
     public render(): JSX.Element {
@@ -78,7 +65,6 @@ export default class Sample extends React.Component<any, any> {
                     chartTitle="This Data Chart demonstrates the DataAnnotationRectLayer bound to data that annotates bearish patterns in stock prices.">
                     <IgrCategoryXAxis
                         name="xAxis"
-                        ref={this.xAxisRef}
                         dataSource={this.stockTesla}
                         label="date"
                         labelLeftMargin="0"
@@ -111,8 +97,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationRectLayer
                         name="RectLayer"
-                        ref={this.rectLayerRef}
                         dataSource={this.annotationRectData}
+                        targetAxis={this.xAxis}
                         centerLabelXDisplayMode="Hidden"
                         startLabelXDisplayMode="Hidden"
                         endLabelXDisplayMode="Hidden"
diff --git a/samples/charts/data-chart/data-annotation-slice-layer/src/index.tsx b/samples/charts/data-chart/data-annotation-slice-layer/src/index.tsx
index e46bd6334..75921713d 100644
--- a/samples/charts/data-chart/data-annotation-slice-layer/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-slice-layer/src/index.tsx
@@ -31,45 +31,19 @@ export default class Sample extends React.Component<any, any> {
         this.setState({});
     }
     private xAxisBottom: IgrCategoryXAxis
-    private xAxisBottomRef(r: IgrCategoryXAxis){
-        this.xAxisBottom =r;
-        this.setState({});
-    }
     private xAxisTop: IgrCategoryXAxis
     private yAxisLeft: IgrNumericYAxis
     private yAxisRight: IgrNumericYAxis
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private sliceLayerStockSplit: IgrDataAnnotationSliceLayer
-    private sliceLayerStockSplitRef(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerStockSplit = r;
-        this.setState({});
-    }
     private sliceLayerEarningsMissAnnotations: IgrDataAnnotationSliceLayer
-    private sliceLayerEarningsMissAnnotationsRef(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerEarningsMissAnnotations = r;
-        this.setState({});
-    }
     private sliceLayerEarningsBeatAnnotations: IgrDataAnnotationSliceLayer
-    private sliceLayerEarningsBeatAnnotationsRef(r: IgrDataAnnotationSliceLayer){
-        this.sliceLayerEarningsBeatAnnotations = r;
-        this.setState({});
-    }
 
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.sliceLayerStockSplitRef = this.sliceLayerStockSplitRef.bind(this);
-        this.xAxisBottomRef = this.xAxisBottomRef.bind(this);
-        this.sliceLayerEarningsMissAnnotationsRef = this.sliceLayerEarningsMissAnnotationsRef.bind(this);
-        this.sliceLayerEarningsBeatAnnotationsRef = this.sliceLayerEarningsBeatAnnotationsRef.bind(this);
-    }
-
-    componentDidMount(): void {
-        this.sliceLayerStockSplit.targetAxis = this.xAxisBottom;
-        this.sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
-        this.sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;
     }
 
     public render(): JSX.Element {
@@ -97,7 +71,6 @@ export default class Sample extends React.Component<any, any> {
                     chartTitle="This Data Chart demonstrates the DataAnnotationSliceLayer bound to data that annotates stock splits and earnings miss/beat events.">
                     <IgrCategoryXAxis
                         name="xAxisBottom"
-                        ref={this.xAxisBottomRef}
                         dataSource={this.stockTesla}
                         label="index"
                         tickLength="0"
@@ -163,8 +136,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerStockSplit"
-                        ref={this.sliceLayerStockSplitRef}
                         dataSource={this.annotationSliceStockSplitData}
+                        targetAxis={this.xAxisBottom}
                         brush="dodgerblue"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
@@ -177,8 +150,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationSliceLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerEarningsMissAnnotations"
-                        ref={this.sliceLayerEarningsMissAnnotationsRef}
                         dataSource={this.annotationSliceEarningsMissData}
+                        targetAxis={this.xAxisBottom}
                         brush="red"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
@@ -191,8 +164,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataAnnotationSliceLayer>
                     <IgrDataAnnotationSliceLayer
                         name="SliceLayerEarningsBeatAnnotations"
-                        ref={this.sliceLayerEarningsBeatAnnotationsRef}
                         dataSource={this.annotationSliceEarningsBeatData}
+                        targetAxis={this.xAxisBottom}
                         brush="green"
                         annotationTextColor="white"
                         annotationLabelMemberPath="label"
diff --git a/samples/charts/data-chart/data-annotation-strip-layer/src/index.tsx b/samples/charts/data-chart/data-annotation-strip-layer/src/index.tsx
index b84231cac..d7f44113d 100644
--- a/samples/charts/data-chart/data-annotation-strip-layer/src/index.tsx
+++ b/samples/charts/data-chart/data-annotation-strip-layer/src/index.tsx
@@ -30,29 +30,16 @@ export default class Sample extends React.Component<any, any> {
     }
     private xAxisBottom: IgrCategoryXAxis
     private xAxisTop: IgrCategoryXAxis
-    private xAxisTopRef(r: IgrCategoryXAxis){
-        this.xAxisTop = r;
-        this.setState({});
-    }
     private yAxisLeft: IgrNumericYAxis
     private yAxisRight: IgrNumericYAxis
     private series1: IgrFinancialPriceSeries
     private tooltip: IgrDataToolTipLayer
     private stripLayer: IgrDataAnnotationStripLayer
-    private stripLayerRef(r: IgrDataAnnotationStripLayer){
-        this.stripLayer = r;
-        this.setState({});
-    }
-    componentDidMount(): void {
-        this.stripLayer.targetAxis = this.xAxisTop;
-    }
 
     constructor(props: any) {
         super(props);
 
         this.chartRef = this.chartRef.bind(this);
-        this.xAxisTopRef = this.xAxisTopRef.bind(this);
-        this.stripLayerRef = this.stripLayerRef.bind(this);
     }
 
     public render(): JSX.Element {
@@ -89,7 +76,6 @@ export default class Sample extends React.Component<any, any> {
                     </IgrCategoryXAxis>
                     <IgrCategoryXAxis
                         name="xAxisTop"
-                        ref={this.xAxisTopRef}
                         dataSource={this.stockTesla}
                         label="date"
                         tickLength="0"
@@ -148,8 +134,8 @@ export default class Sample extends React.Component<any, any> {
                     </IgrDataToolTipLayer>
                     <IgrDataAnnotationStripLayer
                         name="StripLayer"
-                        ref={this.stripLayerRef}
                         dataSource={this.annotationStripData}
+                        targetAxis={this.xAxisTop}
                         centerLabelMemberPath="label"
                         startValueMemberPath="start"
                         endValueMemberPath="end"
diff --git a/samples/grids/grid/editing-columns/src/index.tsx b/samples/grids/grid/editing-columns/src/index.tsx
index c9a0dd4f8..21c892a4d 100644
--- a/samples/grids/grid/editing-columns/src/index.tsx
+++ b/samples/grids/grid/editing-columns/src/index.tsx
@@ -3,15 +3,20 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrGridModule, IgrPaginatorModule } from 'igniteui-react-grids';
+import { IgrInputModule } from 'igniteui-react';
 import { IgrGrid, IgrPaginator, IgrColumn } from 'igniteui-react-grids';
-import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-react-core';
+import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule, WebInputDescriptionModule } from 'igniteui-react-core';
 import NwindData from './NwindData.json';
+import { IgrGridBaseDirective, IgrGridEditEventArgs } from 'igniteui-react-grids';
+import { IgrCellTemplateContext } from 'igniteui-react-grids';
+import { IgrInput } from 'igniteui-react';
 
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
 const mods: any[] = [
     IgrGridModule,
-    IgrPaginatorModule
+    IgrPaginatorModule,
+    IgrInputModule
 ];
 mods.forEach((m) => m.register());
 
@@ -26,6 +31,7 @@ export default class Sample extends React.Component<any, any> {
         super(props);
 
         this.gridRef = this.gridRef.bind(this);
+        this.webGridOnEditEnter = this.webGridOnEditEnter.bind(this);
     }
 
     public render(): JSX.Element {
@@ -39,7 +45,8 @@ export default class Sample extends React.Component<any, any> {
                     ref={this.gridRef}
                     data={this.nwindData}
                     primaryKey="ProductID"
-                    allowFiltering={true}>
+                    allowFiltering={true}
+                    onCellEditEnter={this.webGridOnEditEnter}>
                     <IgrPaginator
                         perPage={10}>
                     </IgrPaginator>
@@ -84,6 +91,7 @@ export default class Sample extends React.Component<any, any> {
                         dataType="number"
                         sortable={true}
                         hasSummary={true}
+                        inlineEditorTemplate={this.webGridNumericColEditCellTemplate}
                         editable={true}
                         filterable={false}>
                     </IgrColumn>
@@ -105,10 +113,46 @@ export default class Sample extends React.Component<any, any> {
             var context = this._componentRenderer.context;
             WebGridDescriptionModule.register(context);
             WebPaginatorDescriptionModule.register(context);
+            WebInputDescriptionModule.register(context);
         }
         return this._componentRenderer;
     }
 
+    public webGridOnEditEnter(s: IgrGridBaseDirective, e: IgrGridEditEventArgs): void {
+
+        const column = s.getColumnByVisibleIndex(e.detail.cellID.columnID);
+        if(column.field === 'ReorderLevel') {
+            setTimeout(() => {
+                const rowId = e.detail.cellID.rowID;
+                const columnId = e.detail.cellID.columnID;
+                const inputTemplateId = `edit-cell-${rowId}-${columnId}`;
+                const element = document.getElementById(inputTemplateId);
+                element?.focus();
+            });
+        }
+    }
+
+    public webGridNumericColEditCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+
+        const cell = e.dataContext.cell;
+        const rowId = cell.id.rowID;
+        const columnId = cell.id.columnID;
+        const inputTemplateId = `edit-cell-${rowId}-${columnId}`;
+
+        return (
+            <IgrInput
+                type="number"
+                id={inputTemplateId}
+                name={cell.id.rowID}
+                value={cell.editValue}
+                inputOcurred={(s:any, e: any) => {
+                    cell.editValue = e.detail;
+                }}
+                style={{width: "100%"}}
+            />
+        );
+    }
+
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid/paste/src/index.tsx b/samples/grids/grid/paste/src/index.tsx
index 6d4661a00..5280a0e29 100644
--- a/samples/grids/grid/paste/src/index.tsx
+++ b/samples/grids/grid/paste/src/index.tsx
@@ -9,7 +9,6 @@ import { IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter,
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-react-core';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-react-layouts';
-import { IgrGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-react-grids';
 
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
@@ -142,8 +141,8 @@ export default class Sample extends React.Component<any, any> {
         (this as any)["pasteMode"] = newVal === "NewRecords" ? "Paste data as new records" : "Paste starting from active cell";
     }
 
-    public webGridPasteFromExcel() {
-        const grid = document.getElementById("grid") as any;
+    public webGridPasteFromExcel(e: any) {
+        const grid = e.target as IgrGrid;
         this.onKeyDown = this.onKeyDown.bind(this);
         grid.addEventListener("keydown", this.onKeyDown);
     }
@@ -313,4 +312,4 @@ export default class Sample extends React.Component<any, any> {
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Sample/>);
+root.render(<Sample/>);
\ No newline at end of file