Skip to content

Commit aa1840d

Browse files
tishko0tishko0
authored
Updated Excel edit style sample to functional component (React v19) (#777)
1 parent 563e0e3 commit aa1840d

File tree

1 file changed

+74
-133
lines changed
  • samples/grids/grid/editing-excel-style/src

1 file changed

+74
-133
lines changed

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

Lines changed: 74 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,86 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
5-
import { IgrGridModule } from 'igniteui-react-grids';
6-
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
7-
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-react-core';
8-
import NwindData from './NwindData.json';
9-
import { IgrGridKeydownEventArgs } from 'igniteui-react-grids';
10-
11-
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
12-
13-
const mods: any[] = [
14-
IgrGridModule
15-
];
16-
mods.forEach((m) => m.register());
17-
18-
export default class Sample extends React.Component<any, any> {
19-
private grid1: IgrGrid
20-
private grid1Ref(r: IgrGrid) {
21-
this.grid1 = r;
22-
this.setState({});
1+
import React, { useEffect, useRef } from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import { IgrGrid, IgrColumn, IgrGridKeydownEventArgs } from "igniteui-react-grids";
5+
import NwindData from "./NwindData.json";
6+
7+
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
8+
9+
function Sample() {
10+
const gridRef = useRef<IgrGrid>();
11+
useEffect(() => {
12+
gridRef.current.addEventListener("keydown", handleKeyDown);
13+
return () => {
14+
gridRef.current.removeEventListener("keydown", handleKeyDown);
15+
};
16+
}, []);
17+
18+
const handleKeyDown = (event: KeyboardEvent) => {
19+
const code = event.code;
20+
const grid = event.currentTarget as IgrGrid;
21+
const activeElem = grid.selectedCells[0];
22+
23+
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")) {
24+
if (activeElem && !activeElem.editMode) {
25+
activeElem.editMode = true;
26+
activeElem.editValue = event.key;
27+
} else if (activeElem && activeElem.editMode) {
28+
event.preventDefault();
29+
activeElem.editValue = activeElem.editValue + event.key;
30+
}
2331
}
2432

25-
constructor(props: any) {
26-
super(props);
27-
28-
this.grid1Ref = this.grid1Ref.bind(this);
29-
this.webGridEditingExcelStyle = this.webGridEditingExcelStyle.bind(this);
30-
}
31-
32-
public render(): JSX.Element {
33-
return (
34-
<div className="container sample ig-typography">
35-
36-
<div className="container fill">
37-
<IgrGrid
38-
autoGenerate={false}
39-
data={this.nwindData}
40-
primaryKey="ProductID"
41-
onGridKeydown={this.webGridEditingExcelStyle}
42-
ref={this.grid1Ref}>
43-
<IgrColumn
44-
field="ProductID"
45-
header="Product ID"
46-
editable={true}
47-
groupable={true}
48-
hidden={true}>
49-
</IgrColumn>
50-
<IgrColumn
51-
field="ProductName"
52-
header="Product Name"
53-
dataType="string"
54-
editable={true}>
55-
</IgrColumn>
56-
<IgrColumn
57-
field="UnitPrice"
58-
header="Unit Price"
59-
dataType="number"
60-
editable={true}>
61-
</IgrColumn>
62-
<IgrColumn
63-
field="QuantityPerUnit"
64-
header="Quantity Per Unit"
65-
groupable={true}
66-
dataType="string"
67-
editable={true}>
68-
</IgrColumn>
69-
<IgrColumn
70-
field="ReorderLevel"
71-
header="Reorder Level"
72-
dataType="number"
73-
groupable={true}
74-
editable={true}>
75-
</IgrColumn>
76-
</IgrGrid>
77-
</div>
78-
</div>
79-
);
80-
}
33+
if (code === "Enter" || code === "NumpadEnter") {
34+
const thisRow = activeElem.row.index;
35+
const dataView = grid.dataView;
36+
const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey);
8137

82-
private _nwindData: any[] = NwindData;
83-
public get nwindData(): any[] {
84-
return this._nwindData;
38+
grid.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
39+
obj.target.activate();
40+
grid.endEdit(true);
41+
grid.markForCheck();
42+
});
8543
}
44+
};
8645

87-
private _componentRenderer: ComponentRenderer = null;
88-
public get renderer(): ComponentRenderer {
89-
if (this._componentRenderer == null) {
90-
this._componentRenderer = new ComponentRenderer();
91-
var context = this._componentRenderer.context;
92-
WebGridDescriptionModule.register(context);
93-
}
94-
return this._componentRenderer;
46+
const getNextEditableRowIndex = (currentRowIndex: number, dataView: any, previous: boolean) => {
47+
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
48+
return currentRowIndex;
9549
}
96-
97-
public webGridEditingExcelStyle(args: IgrGridKeydownEventArgs): void {
98-
var key = (args.detail.event as any).keyCode;
99-
var grid = args.detail.target.grid;
100-
var activeElem = grid.navigation.activeNode;
101-
102-
if ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 97 && key <= 122)) {
103-
var columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
104-
var cell = grid.getCellByColumn(activeElem.row, columnName);
105-
106-
if (cell && !grid.crudService.cellInEditMode) {
107-
grid.crudService.enterEditMode(cell);
108-
cell.editValue = key;
109-
}
110-
}
111-
112-
if (key == 13) {
113-
var thisRow = activeElem.row;
114-
var column = activeElem.column;
115-
var rowInfo = grid.dataView;
116-
117-
var nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, (args.detail.event as any).shiftKey);
118-
119-
grid.navigateTo(nextRow, column, (obj: any) => {
120-
obj.target.activate();
121-
grid.clearCellSelection();
122-
});
123-
}
50+
if (previous) {
51+
return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && isEditableDataRecordAtIndex(index, dataView));
12452
}
53+
return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && isEditableDataRecordAtIndex(index, dataView));
54+
};
12555

126-
public getNextEditableRowIndex(currentRowIndex: number, dataView: any, previous: boolean) {
127-
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
128-
return currentRowIndex;
129-
}
130-
if (previous) {
131-
return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
132-
}
133-
return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
134-
}
56+
const isEditableDataRecordAtIndex = (dataViewIndex: number, dataView: any) => {
57+
const rec = dataView[dataViewIndex];
58+
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData;
59+
};
13560

136-
public isEditableDataRecordAtIndex(dataViewIndex: number, dataView: any) {
137-
const rec = dataView[dataViewIndex];
138-
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData;
61+
const cancelGridKeydown = (args: IgrGridKeydownEventArgs) => {
62+
if(args.detail.event.code === "Enter" || args.detail.event.code === "NumpadEnter") {
63+
args.detail.cancel = true;
13964
}
140-
65+
};
66+
67+
return (
68+
<div className="container sample ig-typography">
69+
<div className="container fill">
70+
<IgrGrid ref={gridRef} autoGenerate={false} data={NwindData} primaryKey="ProductID" onGridKeydown={cancelGridKeydown}>
71+
<IgrColumn field="ProductID" header="Product ID" editable={true} groupable={true} hidden={true} />
72+
<IgrColumn field="ProductName" header="Product Name" dataType="string" editable={true} />
73+
<IgrColumn field="UnitPrice" header="Unit Price" dataType="number" editable={true} />
74+
<IgrColumn field="QuantityPerUnit" header="Quantity Per Unit" groupable={true} dataType="string" editable={true} />
75+
<IgrColumn field="ReorderLevel" header="Reorder Level" dataType="number" groupable={true} editable={true} />
76+
</IgrGrid>
77+
</div>
78+
</div>
79+
);
14180
}
14281

143-
// rendering above component in the React DOM
144-
const root = ReactDOM.createRoot(document.getElementById('root'));
145-
root.render(<Sample/>);
82+
export default Sample;
83+
84+
// Render the component
85+
const root = ReactDOM.createRoot(document.getElementById("root"));
86+
root.render(<Sample />);

0 commit comments

Comments
 (0)