From 77182ff85457ce9452b9a05856ddde505b38f1e0 Mon Sep 17 00:00:00 2001 From: ttonev Date: Wed, 7 May 2025 11:00:28 +0300 Subject: [PATCH 1/8] fix(sample): updated sample to func component and fixed cell update to navigate correct --- .../grid/editing-excel-style/src/index.tsx | 217 +++++++++--------- 1 file changed, 105 insertions(+), 112 deletions(-) diff --git a/samples/grids/grid/editing-excel-style/src/index.tsx b/samples/grids/grid/editing-excel-style/src/index.tsx index dfe9556552..8829356ac3 100644 --- a/samples/grids/grid/editing-excel-style/src/index.tsx +++ b/samples/grids/grid/editing-excel-style/src/index.tsx @@ -1,146 +1,139 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrGridModule } from 'igniteui-react-grids'; +import { IgrActiveNodeChangeEventArgs, IgrGridModule } from 'igniteui-react-grids'; import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; -import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-react-core'; import NwindData from './NwindData.json'; -import { IgrGridKeydownEventArgs } from 'igniteui-react-grids'; import 'igniteui-react-grids/grids/combined'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; -const mods: any[] = [ - IgrGridModule -]; -mods.forEach((m) => m.register()); +// Register modules once +IgrGridModule.register(); -export default class Sample extends React.Component { - private grid1: IgrGrid - private grid1Ref(r: IgrGrid) { - this.grid1 = r; - this.setState({}); - } +const nwindData = NwindData; - constructor(props: any) { - super(props); +const Sample = () => { + const gridRef = useRef(null); + const shouldAppendValue = useRef(false); - this.grid1Ref = this.grid1Ref.bind(this); - this.webGridEditingExcelStyle = this.webGridEditingExcelStyle.bind(this); - } + useEffect(() => { + const gridElement = gridRef.current?.nativeElement; - public render(): JSX.Element { - return ( -
- -
- - - - - - - - - - - -
-
- ); - } - - private _nwindData: any[] = NwindData; - public get nwindData(): any[] { - return this._nwindData; - } - - private _componentRenderer: ComponentRenderer = null; - public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - WebGridDescriptionModule.register(context); + if (!gridElement) { + return undefined; } - return this._componentRenderer; - } - public webGridEditingExcelStyle(sender: IgrGrid, args: IgrGridKeydownEventArgs): void { - var key = (args.detail.event as any).keyCode; - var grid = args.detail.target.grid; - var activeElem = grid.navigation.activeNode; + const handleKeyDown = (event: KeyboardEvent) => { + var code = event.code; + var activeElem = gridRef.current.selectedCells[0]; + + if ((event.code >= 'Digit0' && event.code <= 'Digit9') || + (event.code >= 'KeyA' && event.code <= 'KeyZ') || + (event.code >= 'Numpad0' && event.code <= 'Numpad9') && + event.code !== 'Enter' && event.code !== 'NumpadEnter') { + + if (activeElem && activeElem.editMode === false) { + activeElem.editMode = true; + activeElem.editValue = event.key; + shouldAppendValue.current = true; + gridRef.current.markForCheck(); + } else + + if (activeElem && activeElem.editMode && shouldAppendValue.current) { + event.preventDefault(); + activeElem.editValue = activeElem.editValue + event.key; + shouldAppendValue.current = false; + } + } - if ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 97 && key <= 122)) { - var columnName = grid.getColumnByVisibleIndex(activeElem.column).field; - var cell = grid.getCellByColumn(activeElem.row, columnName); + if (code === 'Backspace') { + if(activeElem == null) { + return; + } + const rowIndex = activeElem.row.index; + const columnKey = activeElem.column.field; + + gridRef.current.data[rowIndex][columnKey] = ''; + gridRef.current.markForCheck(); - if (cell && !grid.crudService.cellInEditMode) { - grid.crudService.enterEditMode(cell); - cell.editValue = key; } - } - if (key == 13) { - var thisRow = activeElem.row; - var column = activeElem.column; - var rowInfo = grid.dataView; + if (code === 'Enter' || code === 'NumpadEnter') { + + if(activeElem == null) { + return; + } + + const thisRow = activeElem.row.index; + const dataView = gridRef.current.dataView; + const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey); + + gridRef.current.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => { + + requestAnimationFrame(() => { + gridRef.current.endEdit(true, obj); + gridRef.current.clearCellSelection(); + obj.target.activate(); + + }); + }); - var nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, (args.detail.event as any).shiftKey); + } + }; - grid.navigateTo(nextRow, column, (obj: any) => { - obj.target.activate(); - grid.clearCellSelection(); - }); - } - } + gridElement.addEventListener("keydown", handleKeyDown); + + return () => { + gridElement.removeEventListener("keydown", handleKeyDown); + }; + }, []); - public getNextEditableRowIndex(currentRowIndex: number, dataView: any, previous: boolean) { + + const getNextEditableRowIndex = (currentRowIndex: number, dataView: any, previous: boolean) => { if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) { return currentRowIndex; } if (previous) { - return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); + return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && isEditableDataRecordAtIndex(index, dataView)); } - return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); - } + return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && isEditableDataRecordAtIndex(index, dataView)); + }; - public isEditableDataRecordAtIndex(dataViewIndex: number, dataView: any) { + const isEditableDataRecordAtIndex = (dataViewIndex: number, dataView: any) => { const rec = dataView[dataViewIndex]; return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData; + }; + + function gridEndEdit(sender: IgrGrid, e: IgrActiveNodeChangeEventArgs): void { + + sender.endEdit(true, e); } -} + return ( +
+
+ + +
+
+ ); +}; + +export default Sample; -// rendering above component in the React DOM +// Render the component const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); \ No newline at end of file +root.render(); From 19233d1b641d8c381952bff7863688ab9f87744b Mon Sep 17 00:00:00 2001 From: ttonev Date: Thu, 8 May 2025 12:01:37 +0300 Subject: [PATCH 2/8] fix(sample): updated samples properties to 19 --- .../grid/editing-excel-style/src/index.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/samples/grids/grid/editing-excel-style/src/index.tsx b/samples/grids/grid/editing-excel-style/src/index.tsx index 8829356ac3..18448b5f08 100644 --- a/samples/grids/grid/editing-excel-style/src/index.tsx +++ b/samples/grids/grid/editing-excel-style/src/index.tsx @@ -19,7 +19,7 @@ const Sample = () => { const shouldAppendValue = useRef(false); useEffect(() => { - const gridElement = gridRef.current?.nativeElement; + const gridElement = gridRef.current; if (!gridElement) { return undefined; @@ -106,9 +106,8 @@ const Sample = () => { return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData; }; - function gridEndEdit(sender: IgrGrid, e: IgrActiveNodeChangeEventArgs): void { - - sender.endEdit(true, e); + function gridEndEdit(event: CustomEvent): void { + gridRef.current.endEdit(true, event.detail); } return ( @@ -119,13 +118,13 @@ const Sample = () => { data={nwindData} primaryKey="ProductID" ref={gridRef} - activeNodeChange={gridEndEdit} + onActiveNodeChange={gridEndEdit} > From f1d568cc90bb20152d51924d5bc8cd40feee9ee5 Mon Sep 17 00:00:00 2001 From: ttonev Date: Mon, 19 May 2025 23:04:37 +0300 Subject: [PATCH 3/8] fix(sample): resolved comments --- samples/grids/grid/editing-excel-style/src/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/samples/grids/grid/editing-excel-style/src/index.tsx b/samples/grids/grid/editing-excel-style/src/index.tsx index 18448b5f08..5ace195478 100644 --- a/samples/grids/grid/editing-excel-style/src/index.tsx +++ b/samples/grids/grid/editing-excel-style/src/index.tsx @@ -1,17 +1,12 @@ import React, { useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; - -import { IgrActiveNodeChangeEventArgs, IgrGridModule } from 'igniteui-react-grids'; -import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; +import { IgrGrid, IgrColumn, IgrActiveNodeChangeEventArgs } from 'igniteui-react-grids'; import NwindData from './NwindData.json'; import 'igniteui-react-grids/grids/combined'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; -// Register modules once -IgrGridModule.register(); - const nwindData = NwindData; const Sample = () => { @@ -106,7 +101,7 @@ const Sample = () => { return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData; }; - function gridEndEdit(event: CustomEvent): void { + function gridEndEdit(event: IgrActiveNodeChangeEventArgs): void { gridRef.current.endEdit(true, event.detail); } From 1ed2196da5e47f477b2b5cfeb4c3e001bb8f7670 Mon Sep 17 00:00:00 2001 From: ttonev Date: Sun, 1 Jun 2025 20:40:18 +0300 Subject: [PATCH 4/8] refactor(grid): removed useEffect and vars for cons --- .../grid/editing-excel-style/src/index.tsx | 131 ++++++++---------- 1 file changed, 60 insertions(+), 71 deletions(-) diff --git a/samples/grids/grid/editing-excel-style/src/index.tsx b/samples/grids/grid/editing-excel-style/src/index.tsx index 5ace195478..f538ec0a54 100644 --- a/samples/grids/grid/editing-excel-style/src/index.tsx +++ b/samples/grids/grid/editing-excel-style/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect } from 'react'; +import React, { useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrGrid, IgrColumn, IgrActiveNodeChangeEventArgs } from 'igniteui-react-grids'; @@ -13,87 +13,75 @@ const Sample = () => { const gridRef = useRef(null); const shouldAppendValue = useRef(false); - useEffect(() => { - const gridElement = gridRef.current; - - if (!gridElement) { - return undefined; - } - - const handleKeyDown = (event: KeyboardEvent) => { - var code = event.code; - var activeElem = gridRef.current.selectedCells[0]; - - if ((event.code >= 'Digit0' && event.code <= 'Digit9') || - (event.code >= 'KeyA' && event.code <= 'KeyZ') || - (event.code >= 'Numpad0' && event.code <= 'Numpad9') && - event.code !== 'Enter' && event.code !== 'NumpadEnter') { - - if (activeElem && activeElem.editMode === false) { - activeElem.editMode = true; - activeElem.editValue = event.key; - shouldAppendValue.current = true; - gridRef.current.markForCheck(); - } else - - if (activeElem && activeElem.editMode && shouldAppendValue.current) { - event.preventDefault(); - activeElem.editValue = activeElem.editValue + event.key; - shouldAppendValue.current = false; - } + const handleKeyDown = (event: React.KeyboardEvent) => { + const code = event.code; + const activeElem = gridRef.current?.selectedCells[0]; + + if ( + (event.code >= 'Digit0' && event.code <= 'Digit9') || + (event.code >= 'KeyA' && event.code <= 'KeyZ') || + (event.code >= 'Numpad0' && event.code <= 'Numpad9') && + event.code !== 'Enter' && + event.code !== 'NumpadEnter' + ) { + if (activeElem && activeElem.editMode === false) { + activeElem.editMode = true; + activeElem.editValue = event.key; + shouldAppendValue.current = true; + gridRef.current?.markForCheck(); + } else if (activeElem && activeElem.editMode && shouldAppendValue.current) { + event.preventDefault(); + activeElem.editValue = activeElem.editValue + event.key; + shouldAppendValue.current = false; } + } - if (code === 'Backspace') { - if(activeElem == null) { - return; - } - const rowIndex = activeElem.row.index; - const columnKey = activeElem.column.field; - - gridRef.current.data[rowIndex][columnKey] = ''; - gridRef.current.markForCheck(); - + if (code === 'Backspace') { + if (activeElem == null) { + return; } + const rowIndex = activeElem.row.index; + const columnKey = activeElem.column.field; - if (code === 'Enter' || code === 'NumpadEnter') { - - if(activeElem == null) { - return; - } - - const thisRow = activeElem.row.index; - const dataView = gridRef.current.dataView; - const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey); - - gridRef.current.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => { - - requestAnimationFrame(() => { - gridRef.current.endEdit(true, obj); - gridRef.current.clearCellSelection(); - obj.target.activate(); - - }); - }); + gridRef.current!.data[rowIndex][columnKey] = ''; + gridRef.current?.markForCheck(); + } + if (code === 'Enter' || code === 'NumpadEnter') { + if (activeElem == null) { + return; } - }; - gridElement.addEventListener("keydown", handleKeyDown); - - return () => { - gridElement.removeEventListener("keydown", handleKeyDown); - }; - }, []); + const thisRow = activeElem.row.index; + const dataView = gridRef.current?.dataView; + const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey); + gridRef.current?.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => { + requestAnimationFrame(() => { + gridRef.current?.endEdit(true, obj); + gridRef.current?.clearCellSelection(); + obj.target.activate(); + }); + }); + } + }; const getNextEditableRowIndex = (currentRowIndex: number, dataView: any, previous: boolean) => { - if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) { + if ( + currentRowIndex < 0 || + (currentRowIndex === 0 && previous) || + (currentRowIndex >= dataView.length - 1 && !previous) + ) { return currentRowIndex; } if (previous) { - return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && isEditableDataRecordAtIndex(index, dataView)); + return dataView.findLastIndex( + (rec: any, index: number) => index < currentRowIndex && isEditableDataRecordAtIndex(index, dataView) + ); } - return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && isEditableDataRecordAtIndex(index, dataView)); + return dataView.findIndex( + (rec: any, index: number) => index > currentRowIndex && isEditableDataRecordAtIndex(index, dataView) + ); }; const isEditableDataRecordAtIndex = (dataViewIndex: number, dataView: any) => { @@ -101,9 +89,9 @@ const Sample = () => { return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData; }; - function gridEndEdit(event: IgrActiveNodeChangeEventArgs): void { - gridRef.current.endEdit(true, event.detail); - } + const gridEndEdit = (event: IgrActiveNodeChangeEventArgs): void => { + gridRef.current?.endEdit(true, event.detail); + }; return (
@@ -114,6 +102,7 @@ const Sample = () => { primaryKey="ProductID" ref={gridRef} onActiveNodeChange={gridEndEdit} + onKeyDown={handleKeyDown} >