Category / Section
How to enable check box in React TreeView
1 min read
The React TreeView is a graphical user interface component that allows you to represent hierarchical data in a tree structure.
The React TreeView component has built-in check box support. It can be enabled using the showCheckBox property. The TreeView check box allows you to check more than one node. If you check any parent node, the corresponding child nodes will also be selected. If you need independent behavior of parent and child nodes, disable the autoCheck property.
REACT
export class Checkbox extends SampleBase {
constructor() {
super(...arguments);
this.data = dataSource;
this.fields = { dataSource: this.data.checkboxData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
this.showCheckBox = true;
}
render() {
return (<div className='control-pane'>
<div className='col-lg-8 control-section'>
<div className='tree-control_wrapper'>
<TreeViewComponent fields={this.fields} ref={(scope) => { this.treeObj = scope; }} showCheckBox={this.showCheckBox}/>
</div>
</div>
</div>);
}
}
Sample: https://stackblitz.com/edit/react-3xgi8k?file=index.js
FT: https://www.syncfusion.com/react-ui-components/react-treeview
Documentation: https://ej2.syncfusion.com/react/documentation/treeview/check-box/
