Please copy the content and paste it into the app.jsx on the link jscodemine (https://jscodemine.grapecity.com/sample/bgH1CbYvBE2-GhllEXHCjw/) to test it:
import ‘bootstrap.css’;
import ‘@grapecity/wijmo.styles/wijmo.css’;
import ‘./app.css’;
import * as React from ‘react’;
import * as ReactDOM from ‘react-dom’;
import { FlexGrid, FlexGridColumnGroup } from ‘@grapecity/wijmo.react.grid’;
import { CollectionView } from ‘@grapecity/wijmo’;
import * as DataService from ‘./data’;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
listClassesOfSchool1: listClasses.listClassesOfSchool1(),
listClassesOfSchool2: listClasses.listClassesOfSchool2(),
listClassesOfSchool3: listClasses.listClassesOfSchool3(),
listClassesOfSchool4: listClasses.listClassesOfSchool4(),
listItems: ,
listClasses: [
{ id: 0, name: ‘school1’, isChecked: false },
{ id: 1, name: ‘school2’, isChecked: false },
{ id: 2, name: ‘school3’, isChecked: false },
{ id: 3, name: ‘school4’, isChecked: false }
]
};
}
componentDidMount() {
const { listClassesOfSchool1, listClassesOfSchool2, listClassesOfSchool3, listClassesOfSchool4 } = this.state;
const listData = dataFake.data.entities.field_work_types;
const listItems = [];
listData.forEach(item => {
listItems.push({
id: item.id,
classId: item.classId,
className: item.className,
majorId: item.majorId,
majorName: item.majorName,
isIncludeInstance: false,
listClass1: listClassesOfSchool1,
listClass2: listClassesOfSchool2,
listClass3: listClassesOfSchool3,
listClass4: listClassesOfSchool4,
});
});
this.setState({ listItems: new CollectionView(listItems) });
}
handleCheckBox = (isChecked, id) => {
const listClasses = [...this.state.listClasses];
listClasses[id].isChecked = isChecked;
this.setState({
listClasses
});
}
render() {
const { listItems, listClasses, listClassesOfSchool1, listClassesOfSchool2, listClassesOfSchool3, listClassesOfSchool4 } = this.state;
return (
<div className="container-fluid">
{listClasses.map(item => {
return (
<div>
<input type='checkbox' name='checkbox' checked={item.isChecked} onChange={e => this.handleCheckBox(e.target.checked, item.id)} /> {item.name}
</div>
)
})}
<FlexGrid
autoGenerateColumns={false}
itemsSource={listItems}
frozenColumns={0}
headersVisibility='Column'
allowSorting={false}
allowDragging={0}
initialized={this.initialDataGrid}
quickAutoSize={true}
>
<FlexGridColumnGroup
header='Class'
cssClassAll={'wj-align-center'}
>
<FlexGridColumnGroup
header='Name'
binding='className'
isReadOnly={true}
cssClassAll={'wj-align-center'}
>
</FlexGridColumnGroup>
<FlexGridColumnGroup
header='Major'
binding='majorName'
isReadOnly={true}
cssClassAll={'wj-align-center'}
>
</FlexGridColumnGroup>
</FlexGridColumnGroup>
{listClasses[0].isChecked && (
<FlexGridColumnGroup
header={listClasses[0].name}
cssClassAll={'wj-align-center'}
visible={false}
>
{listClassesOfSchool1.map((item, index) => {
return (
<FlexGridColumnGroup
header={item.name}
binding={`listClass1[${index}].name`}
isReadOnly={true}
cssClassAll={
'wj-align-center'
}
/>
);
})}
</FlexGridColumnGroup>
)}
{listClasses[1].isChecked && (
<FlexGridColumnGroup
header={listClasses[1].name}
cssClassAll={'wj-align-center'}
visible={false}
>
{listClassesOfSchool2.map((item, index) => {
return (
<FlexGridColumnGroup
header={item.name}
binding={`listClass2[${index}].name`}
isReadOnly={true}
cssClassAll={
'wj-align-center'
}
/>
);
})}
</FlexGridColumnGroup>
)}
{listClasses[2].isChecked && (
<FlexGridColumnGroup
header={listClasses[2].name}
cssClassAll={'wj-align-center'}
visible={false}
>
{listClassesOfSchool3.map((item, index) => {
return (
<FlexGridColumnGroup
header={item.name}
binding={`listClass3[${index}].name`}
isReadOnly={true}
cssClassAll={
'wj-align-center'
}
/>
);
})}
</FlexGridColumnGroup>
)}
{listClasses[3].isChecked && (
<FlexGridColumnGroup
header={listClasses[1].name}
cssClassAll={'wj-align-center'}
visible={false}
>
{listClassesOfSchool4.map((item, index) => {
return (
<FlexGridColumnGroup
header={item.name}
binding={`listClass4[${index}].name`}
isReadOnly={true}
cssClassAll={
'wj-align-center'
}
/>
);
})}
</FlexGridColumnGroup>
)}
</FlexGrid>
</div>
)
}
}
export const listClasses = {
listClassesOfSchool1() {
const arr = ;
for (let i = 0; i < 250; i++) {
arr.push({ id: i, name:
item${i}
});
}
return arr;
},
listClassesOfSchool2() {
const arr =
;
for (let i = 0; i < 250; i++) {
arr.push({ id: i, name:
item${i}
});
}
return arr;
},
listClassesOfSchool3() {
const arr =
;
for (let i = 0; i < 250; i++) {
arr.push({ id: i, name:
item${i}
});
}
return arr;
},
listClassesOfSchool4() {
const arr =
;
for (let i = 0; i < 250; i++) {
arr.push({ id: i, name:
item${i}
});
}
return arr;
}
}
export const dataFake = {
result: true,
status: 0,
message: ‘’,
data: {
total: 2,
entities: {
field_work_types: [
{
id: 1,
classId: 1,
className: ‘main 1’,
majorId: 1,
majorName: ‘sub 1’,
school1: ,
school2: ,
school3: ,
school4: ,
},
],
},
},
};
ReactDOM.render(, document.getElementById(‘app’));
