Skip to content

Commit 77182ff

Browse files
tishko0tishko0
committed
fix(sample): updated sample to func component and fixed cell update to navigate correct
1 parent ca4aed9 commit 77182ff

1 file changed

Lines changed: 105 additions & 112 deletions

File tree

  • samples/grids/grid/editing-excel-style/src

‎samples/grids/grid/editing-excel-style/src/index.tsx‎

Lines changed: 105 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,139 @@
1-
import React from 'react';
1+
import React, { useRef, useEffect } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44

5-
import { IgrGridModule } from 'igniteui-react-grids';
5+
import { IgrActiveNodeChangeEventArgs, IgrGridModule } from 'igniteui-react-grids';
66
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
7-
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-react-core';
87
import NwindData from './NwindData.json';
9-
import { IgrGridKeydownEventArgs } from 'igniteui-react-grids';
108

119
import 'igniteui-react-grids/grids/combined';
1210
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
1311

14-
const mods: any[] = [
15-
IgrGridModule
16-
];
17-
mods.forEach((m) => m.register());
12+
// Register modules once
13+
IgrGridModule.register();
1814

19-
export default class Sample extends React.Component<any, any> {
20-
private grid1: IgrGrid
21-
private grid1Ref(r: IgrGrid) {
22-
this.grid1 = r;
23-
this.setState({});
24-
}
15+
const nwindData = NwindData;
2516

26-
constructor(props: any) {
27-
super(props);
17+
const Sample = () => {
18+
const gridRef = useRef<IgrGrid>(null);
19+
const shouldAppendValue = useRef(false);
2820

29-
this.grid1Ref = this.grid1Ref.bind(this);
30-
this.webGridEditingExcelStyle = this.webGridEditingExcelStyle.bind(this);
31-
}
21+
useEffect(() => {
22+
const gridElement = gridRef.current?.nativeElement;
3223

33-
public render(): JSX.Element {
34-
return (
35-
<div className="container sample ig-typography">
36-
37-
<div className="container fill">
38-
<IgrGrid
39-
autoGenerate={false}
40-
data={this.nwindData}
41-
primaryKey="ProductID"
42-
gridKeydown={this.webGridEditingExcelStyle}
43-
ref={this.grid1Ref}>
44-
<IgrColumn
45-
field="ProductID"
46-
header="Product ID"
47-
editable={true}
48-
groupable={true}
49-
hidden={true}>
50-
</IgrColumn>
51-
<IgrColumn
52-
field="ProductName"
53-
header="Product Name"
54-
dataType="String"
55-
editable={true}>
56-
</IgrColumn>
57-
<IgrColumn
58-
field="UnitPrice"
59-
header="Unit Price"
60-
dataType="Number"
61-
editable={true}>
62-
</IgrColumn>
63-
<IgrColumn
64-
field="QuantityPerUnit"
65-
header="Quantity Per Unit"
66-
groupable={true}
67-
dataType="String"
68-
editable={true}>
69-
</IgrColumn>
70-
<IgrColumn
71-
field="ReorderLevel"
72-
header="Reorder Level"
73-
dataType="Number"
74-
groupable={true}
75-
editable={true}>
76-
</IgrColumn>
77-
</IgrGrid>
78-
</div>
79-
</div>
80-
);
81-
}
82-
83-
private _nwindData: any[] = NwindData;
84-
public get nwindData(): any[] {
85-
return this._nwindData;
86-
}
87-
88-
private _componentRenderer: ComponentRenderer = null;
89-
public get renderer(): ComponentRenderer {
90-
if (this._componentRenderer == null) {
91-
this._componentRenderer = new ComponentRenderer();
92-
var context = this._componentRenderer.context;
93-
WebGridDescriptionModule.register(context);
24+
if (!gridElement) {
25+
return undefined;
9426
}
95-
return this._componentRenderer;
96-
}
9727

98-
public webGridEditingExcelStyle(sender: IgrGrid, args: IgrGridKeydownEventArgs): void {
99-
var key = (args.detail.event as any).keyCode;
100-
var grid = args.detail.target.grid;
101-
var activeElem = grid.navigation.activeNode;
28+
const handleKeyDown = (event: KeyboardEvent) => {
29+
var code = event.code;
30+
var activeElem = gridRef.current.selectedCells[0];
31+
32+
if ((event.code >= 'Digit0' && event.code <= 'Digit9') ||
33+
(event.code >= 'KeyA' && event.code <= 'KeyZ') ||
34+
(event.code >= 'Numpad0' && event.code <= 'Numpad9') &&
35+
event.code !== 'Enter' && event.code !== 'NumpadEnter') {
36+
37+
if (activeElem && activeElem.editMode === false) {
38+
activeElem.editMode = true;
39+
activeElem.editValue = event.key;
40+
shouldAppendValue.current = true;
41+
gridRef.current.markForCheck();
42+
} else
43+
44+
if (activeElem && activeElem.editMode && shouldAppendValue.current) {
45+
event.preventDefault();
46+
activeElem.editValue = activeElem.editValue + event.key;
47+
shouldAppendValue.current = false;
48+
}
49+
}
10250

103-
if ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 97 && key <= 122)) {
104-
var columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
105-
var cell = grid.getCellByColumn(activeElem.row, columnName);
51+
if (code === 'Backspace') {
52+
if(activeElem == null) {
53+
return;
54+
}
55+
const rowIndex = activeElem.row.index;
56+
const columnKey = activeElem.column.field;
57+
58+
gridRef.current.data[rowIndex][columnKey] = '';
59+
gridRef.current.markForCheck();
10660

107-
if (cell && !grid.crudService.cellInEditMode) {
108-
grid.crudService.enterEditMode(cell);
109-
cell.editValue = key;
11061
}
111-
}
11262

113-
if (key == 13) {
114-
var thisRow = activeElem.row;
115-
var column = activeElem.column;
116-
var rowInfo = grid.dataView;
63+
if (code === 'Enter' || code === 'NumpadEnter') {
64+
65+
if(activeElem == null) {
66+
return;
67+
}
68+
69+
const thisRow = activeElem.row.index;
70+
const dataView = gridRef.current.dataView;
71+
const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey);
72+
73+
gridRef.current.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
74+
75+
requestAnimationFrame(() => {
76+
gridRef.current.endEdit(true, obj);
77+
gridRef.current.clearCellSelection();
78+
obj.target.activate();
79+
80+
});
81+
});
11782

118-
var nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, (args.detail.event as any).shiftKey);
83+
}
84+
};
11985

120-
grid.navigateTo(nextRow, column, (obj: any) => {
121-
obj.target.activate();
122-
grid.clearCellSelection();
123-
});
124-
}
125-
}
86+
gridElement.addEventListener("keydown", handleKeyDown);
87+
88+
return () => {
89+
gridElement.removeEventListener("keydown", handleKeyDown);
90+
};
91+
}, []);
12692

127-
public getNextEditableRowIndex(currentRowIndex: number, dataView: any, previous: boolean) {
93+
94+
const getNextEditableRowIndex = (currentRowIndex: number, dataView: any, previous: boolean) => {
12895
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
12996
return currentRowIndex;
13097
}
13198
if (previous) {
132-
return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
99+
return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && isEditableDataRecordAtIndex(index, dataView));
133100
}
134-
return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
135-
}
101+
return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && isEditableDataRecordAtIndex(index, dataView));
102+
};
136103

137-
public isEditableDataRecordAtIndex(dataViewIndex: number, dataView: any) {
104+
const isEditableDataRecordAtIndex = (dataViewIndex: number, dataView: any) => {
138105
const rec = dataView[dataViewIndex];
139106
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData;
107+
};
108+
109+
function gridEndEdit(sender: IgrGrid, e: IgrActiveNodeChangeEventArgs): void {
110+
111+
sender.endEdit(true, e);
140112
}
141113

142-
}
114+
return (
115+
<div className="container sample ig-typography">
116+
<div className="container fill">
117+
<IgrGrid
118+
autoGenerate={false}
119+
data={nwindData}
120+
primaryKey="ProductID"
121+
ref={gridRef}
122+
activeNodeChange={gridEndEdit}
123+
>
124+
<IgrColumn field="ProductID" header="Product ID" editable={true} groupable={true} hidden={true} />
125+
<IgrColumn field="ProductName" header="Product Name" dataType="String" editable={true} />
126+
<IgrColumn field="UnitPrice" header="Unit Price" dataType="Number" editable={true} />
127+
<IgrColumn field="QuantityPerUnit" header="Quantity Per Unit" groupable={true} dataType="String" editable={true} />
128+
<IgrColumn field="ReorderLevel" header="Reorder Level" dataType="Number" groupable={true} editable={true} />
129+
</IgrGrid>
130+
</div>
131+
</div>
132+
);
133+
};
134+
135+
export default Sample;
143136

144-
// rendering above component in the React DOM
137+
// Render the component
145138
const root = ReactDOM.createRoot(document.getElementById('root'));
146-
root.render(<Sample/>);
139+
root.render(<Sample />);

0 commit comments

Comments
 (0)