Checking All Items
While the TreeView does not provide a built-in feature for checking and unchecking all its items at once, the component supports such an implementation.
To enable the check-all mode for its items, set the checked field of each TreeView node to true. To enable the uncheck-all mode for its items, set the checked field of each TreeView node to a falsy value. You can further handle the checking and unchecking of all items depending on whether you update the items directly or use the helper functions.
Updating Items Directly
The following example demonstrates how to directly update the checked field of all TreeView items.
Using Helper Functions
The following example demonstrates how to use the handleTreeViewCheckChange and processTreeViewItems helper functions to prepare the data of the TreeView and how to manually set the check descriptor to:
- All hierarchical item indices upon checking all items.
- An empty array upon unchecking all items.
class App extends React.Component {
state = { data: tree, check: [] };
render() {
return (
<div>
<div className='example-config'>
<button onClick={this.checkAll} className='k-button'>Check all</button>
<button onClick={this.uncheckAll} className='k-button'>Uncheck all</button>
</div>
<TreeView
data={processTreeViewItems(this.state.data, { check: this.state.check })}
checkboxes={true} onCheckChange={this.onCheckChange}
/>
</div>
);
}
checkAll = () => {
this.setState({ check: ['0', '0_0', '0_1', '0_2', '1', '1_0', '1_1', '1_2'] });
}
uncheckAll = () => {
this.setState({ check: [] });
}
onCheckChange = (event) => {
this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.data) });
}
}
const tree = [{
text: 'Furniture', expanded: true, items: [
{ text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }]
}, {
text: 'Decor', expanded: true, items: [
{ text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
}];
ReactDOM.render(
<App />,
document.querySelector('my-app')
);