Updating Items Directly

The TreeView enables you to update the checked and checkIndeterminate fields of its items directly.

To update checked and checkIndeterminate directly, handle the onCheckChange event.

Normally, this approach does not support parent- and child-item checking, or the application of an indeterminate state to items. To implement these features, you have to manually iterate over the TreeView items. For more information, refer to the article about updating TreeView items through helper functions.

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' }]
}];

class App extends React.Component {
    render() {
        return <TreeView data={tree} checkboxes={true} onCheckChange={this.onCheckChange} />;
    }
    onCheckChange = (event) => {
        event.item.checked = !event.item.checked;
        this.forceUpdate();
    }
}

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