Selecting All Items

While the TreeView does not provide a built-in feature for selecting and deselecting all its items at once, the component supports such an implementation.

To enable the select-all mode for its items, set the selected field of each TreeView node to true. To enable the deselect-all mode for its items, set the selected field of each TreeView node to a falsy value. You can further handle the selection and deselection of all items depending on the approach you chose for updating the selected TreeView items.

The following example demonstrates how to use the processTreeViewItems helper function and update the selected items in an immutable way.

class App extends React.Component {
    state = { data: tree, select: [] };

    render() {
        return (
            <div>
                <div className='example-config'>
                    <button onClick={this.selectAll} className='k-button'>Select all</button>
                    <button onClick={this.unselectAll} className='k-button'>Unselect all</button>
                </div>
                <TreeView
                    aria-multiselectable={true}
                    data={processTreeViewItems(this.state.data, { select: this.state.select })}
                    onItemClick={this.onItemClick}
                />
            </div>
        );
    }
    selectAll = () => {
        // Provide the hierarchical indices of all items.
        this.setState({ select: ['0', '0_0', '0_1', '1', '1_0', '1_1', '2', '2_0', '2_1'] });
    }
    unselectAll = () => {
        this.setState({ select: [] });
    }
    onItemClick = (event) => {
        let select = this.state.select.slice();
        const index = select.indexOf(event.itemHierarchicalIndex);
        index === -1 ? select.push(event.itemHierarchicalIndex) : select.splice(index, 1);
        this.setState({ select: select });
    }
}

const tree = [
    { text: 'Item1', expanded: true, items: [{ text: 'Item1.1' }, { text: 'Item1.2' }] },
    { text: 'Item2', expanded: true, items: [{ text: 'Item2.1' }, { text: 'Item2.2' }] },
    { text: 'Item3', expanded: true, items: [{ text: 'Item3.1' }, { text: 'Item3.2' }] }
];

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /