Using Helper Functions

The TreeView enables you to update parent and child nodes as well as items in an indeterminate state by using helper functions.

Setup

To implement such use case scenarios, use the following helper functions:

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing Single Item Checking

By default, handleTreeViewCheckChange and processTreeViewItems work with hierarchical item indices. Alternatively, you can use a custom item field which uniquely describes the item (for example, an ID column from a database) by setting the idField of the TreeViewCheckDescriptor to the name of the custom field.

By default, a TreeView item is in an indeterminate state when its checkIndeterminate field is set to true. Also, the application of an indeterminate state to TreeView items is decoupled from the selection mode (single or multiple).

To enable the application of an indeterminate state, use the applyCheckIndeterminate field of the TreeViewCheckDescriptor. To use a custom item field instead of the checkIndeterminate field:

  1. Set the checkIndeterminateField field of the TreeViewCheckDescriptor to the name of the custom field.
  2. Set the checkIndeterminateField property of the TreeView to the name of the custom field.
    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' }]
    }];
    const checkIndeterminateField = 'checkUnknown';

    class App extends React.Component {
        state = {
            check: { idField: 'text', applyCheckIndeterminate: true, checkIndeterminateField, ids: [] },
            items: tree
        };
        render() {
            return (
                <div>
                    <TreeView
                        checkIndeterminateField={checkIndeterminateField}
                        checkboxes={true} onCheckChange={this.onCheckChange}
                        data={processTreeViewItems(this.state.items, { check: this.state.check })}
                    />
                    <div style={{ marginTop: 5 }}>
                        <i>Press SPACE to check/uncheck the active item</i>
                        <div className="example-config">
                            Checked IDs: {this.state.check.ids.join(",")}
                        </div>
                    </div>
                </div>
            );
        }

        onCheckChange = (event) => {
            this.setState({
                check: handleTreeViewCheckChange(event, this.state.check, this.state.items, { singleMode: true })
            });
        }
    }

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

Customizing Multiple Item Checking

By default, handleTreeViewCheckChange and processTreeViewItems work with hierarchical item indices. Alternatively, you can use a custom item field which uniquely describes the item (for example, an ID column from a database) by setting the idField of the TreeViewCheckDescriptor to the name of the custom field.

By default, a TreeView item is checked when its checked field is set to true. To use a custom item field instead of the checked field:

  1. Set the operationField field of the TreeViewCheckDescriptor to the name of the custom field.
  2. Set the checkField property of the TreeView to the name of the custom field.
    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' }]
    }];
    const checkField = 'marked';

    class App extends React.Component {
        state = {
            check: { idField: 'text', operationField: checkField, ids: [] },
            items: tree
        };
        render() {
            return (
                <div>
                    <TreeView
                        checkField={checkField}
                        checkboxes={true} onCheckChange={this.onCheckChange}
                        data={processTreeViewItems(this.state.items, { check: this.state.check })}
                    />
                    <div style={{ marginTop: 5 }}>
                        <i>Press SPACE to check/uncheck the active item</i>
                        <div className="example-config">
                            Checked IDs: {this.state.check.ids.join(",")}
                        </div>
                    </div>
                </div>
            );
        }

        onCheckChange = (event) => {
            const settings = { checkChildren: true, checkParents: true };
            this.setState({check: handleTreeViewCheckChange(event, this.state.check, this.state.items, settings)});
        }
    }

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

In this article

Not finding the help you need?