diff --git a/samples/charts/category-chart/axis-labels/src/index.tsx b/samples/charts/category-chart/axis-labels/src/index.tsx index 431229f665..f3ce7ff986 100644 --- a/samples/charts/category-chart/axis-labels/src/index.tsx +++ b/samples/charts/category-chart/axis-labels/src/index.tsx @@ -80,7 +80,7 @@ export default class Sample extends React.Component { { 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 { chartTitle="Data Chart with DataAnnotationBandLayer bound to data that annotates stock rapid growth"> { { 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 (
@@ -90,7 +68,6 @@ export default class Sample extends React.Component { chartTitle="The Data Chart demonstrates the DataAnnotationLineLayer bound to data that annotates stock growth and decline patterns."> { { { { } 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 { { { 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 { chartTitle="This Data Chart has multiple Data Annotation Layers bound to data that annotates important events and patterns in stock prices."> { { { { { layoutMode="Vertical"> { { { { { { 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 { chartTitle="This Data Chart demonstrates the DataAnnotationRectLayer bound to data that annotates bearish patterns in stock prices."> { { 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 { chartTitle="This Data Chart demonstrates the DataAnnotationSliceLayer bound to data that annotates stock splits and earnings miss/beat events."> { { { { } 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 { { 0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/charts/data-chart/trendline-layer/public/index.html b/samples/charts/data-chart/trendline-layer/public/index.html new file mode 100644 index 0000000000..e2d3265576 --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + \ No newline at end of file diff --git a/samples/charts/data-chart/trendline-layer/sandbox.config.json b/samples/charts/data-chart/trendline-layer/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/data-chart/trendline-layer/src/CountryRenewableElectricity.ts b/samples/charts/data-chart/trendline-layer/src/CountryRenewableElectricity.ts new file mode 100644 index 0000000000..b32970c46a --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/src/CountryRenewableElectricity.ts @@ -0,0 +1,106 @@ +export class CountryRenewableElectricityItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public europe: number; + public china: number; + public america: number; + +} +export class CountryRenewableElectricity extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new CountryRenewableElectricityItem( + { + year: `2009`, + europe: 34, + china: 21, + america: 19 + }), + new CountryRenewableElectricityItem( + { + year: `2010`, + europe: 43, + china: 26, + america: 24 + }), + new CountryRenewableElectricityItem( + { + year: `2011`, + europe: 66, + china: 29, + america: 28 + }), + new CountryRenewableElectricityItem( + { + year: `2012`, + europe: 69, + china: 32, + america: 26 + }), + new CountryRenewableElectricityItem( + { + year: `2013`, + europe: 58, + china: 47, + america: 38 + }), + new CountryRenewableElectricityItem( + { + year: `2014`, + europe: 40, + china: 46, + america: 31 + }), + new CountryRenewableElectricityItem( + { + year: `2015`, + europe: 78, + china: 50, + america: 19 + }), + new CountryRenewableElectricityItem( + { + year: `2016`, + europe: 13, + china: 90, + america: 52 + }), + new CountryRenewableElectricityItem( + { + year: `2017`, + europe: 78, + china: 132, + america: 50 + }), + new CountryRenewableElectricityItem( + { + year: `2018`, + europe: 40, + china: 134, + america: 34 + }), + new CountryRenewableElectricityItem( + { + year: `2018`, + europe: 40, + china: 134, + america: 34 + }), + new CountryRenewableElectricityItem( + { + year: `2019`, + europe: 80, + china: 96, + america: 38 + }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/charts/data-chart/trendline-layer/src/index.css b/samples/charts/data-chart/trendline-layer/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/charts/data-chart/trendline-layer/src/index.tsx b/samples/charts/data-chart/trendline-layer/src/index.tsx new file mode 100644 index 0000000000..7322dd394a --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/src/index.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartCategoryTrendLineModule, IgrTrendLineLayerModule, IgrDataLegendModule } from 'igniteui-react-charts'; +import { IgrDataLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries, IgrTrendLineLayer } from 'igniteui-react-charts'; +import { ComponentRenderer, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule, DataChartCategoryTrendLineDescriptionModule, TrendLineLayerDescriptionModule, DataLegendDescriptionModule } from 'igniteui-react-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; + +const mods: any[] = [ + IgrDataChartCategoryModule, + IgrDataChartInteractivityModule, + IgrDataChartAnnotationModule, + IgrDataChartCategoryTrendLineModule, + IgrTrendLineLayerModule, + IgrDataLegendModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private legend: IgrDataLegend + private legendRef(r: IgrDataLegend) { + this.legend = r; + this.setState({}); + } + private chart: IgrDataChart + private chartRef(r: IgrDataChart) { + this.chart = r; + this.setState({}); + } + private xAxis: IgrCategoryXAxis + private yAxis: IgrNumericYAxis + private lineSeries1: IgrLineSeries + private trendLine1: IgrTrendLineLayer + private trendLine2: IgrTrendLineLayer + + constructor(props: any) { + super(props); + + this.legendRef = this.legendRef.bind(this); + this.chartRef = this.chartRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + +
+ +
+ + + + + + + + + + + + +
+
+ ); + } + + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + DataChartCategoryTrendLineDescriptionModule.register(context); + TrendLineLayerDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/samples/charts/data-chart/trendline-layer/src/react-app-env.d.ts b/samples/charts/data-chart/trendline-layer/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/charts/data-chart/trendline-layer/tsconfig.json b/samples/charts/data-chart/trendline-layer/tsconfig.json new file mode 100644 index 0000000000..42c6ace1da --- /dev/null +++ b/samples/charts/data-chart/trendline-layer/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/grids/grid/editing-columns/src/index.tsx b/samples/grids/grid/editing-columns/src/index.tsx index c9a0dd4f89..21c892a4d4 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 { 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 { ref={this.gridRef} data={this.nwindData} primaryKey="ProductID" - allowFiltering={true}> + allowFiltering={true} + onCellEditEnter={this.webGridOnEditEnter}> @@ -84,6 +91,7 @@ export default class Sample extends React.Component { dataType="number" sortable={true} hasSummary={true} + inlineEditorTemplate={this.webGridNumericColEditCellTemplate} editable={true} filterable={false}> @@ -105,10 +113,46 @@ export default class Sample extends React.Component { 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 ( + { + 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 6d4661a00b..5280a0e29c 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 { (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 { // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); \ No newline at end of file