Posted 6 December 2022, 11:59 am EST
https://www.grapecity.com/wijmo/demos/Grid/TreeGrid/ChildItems/react
The source on this page has been modified.
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import "./app.css";
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
import { getFamilies, getWorkers } from "./data";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showAsTree: true,
family: getFamilies(),
workers: getWorkers(),
};
}
render() {
return <div className="container-fluid">
<FlexGrid initialized={this.initGrid.bind(this)} headersVisibility="Column" childItemsPath={['checks', 'earnings']} itemsSource={this.state.workers}>
<FlexGridColumn binding="name" header="Name"/>
<FlexGridColumn binding="hours" dataType="Number" allowSorting={false}/>
<FlexGridColumn binding="rate" dataType="Number" allowSorting={false}/>
</FlexGrid>
</div>;
}
initGrid(grid) {
this.targetSettingGrid = grid;
this.readOnly();
}
readOnly() {
this.targetSettingGrid.rows.forEach((row) => {
row.isReadOnly = false;
})
}
}
ReactDOM.render(<App />, document.getElementById('app'));It works if you stick it on the app.jsx.
Horizontal lines are copied and pasted, while vertical lines become impossible to enter into all cells once they have been made.
