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:

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

class App extends React.Component {
    state = { items: tree, singleMode: false, checkChildren: false, checkParents: false,
        check: { ids: [], applyCheckIndeterminate: true }
    };
    render() {
        return (
            <div>
                <div className="example-config">
                    <h5>Check Settings</h5>
                    <input id="singleMode" type="checkbox" checked={this.state.singleMode}
                        onChange={this.onSingleModeChange} className="k-checkbox" />
                    <label htmlFor="singleMode" className="k-checkbox-label" style={{ marginRight: 5 }}>
                        Single mode
                    </label>
                    <input id="checkChildren" type="checkbox" checked={this.state.checkChildren}
                        onChange={this.onCheckChildrenChange} className="k-checkbox" />
                    <label htmlFor="checkChildren" className="k-checkbox-label" style={{ marginRight: 5 }}>
                        Check all children
                    </label>
                    <input id="checkParents" type="checkbox" checked={this.state.checkParents}
                        onChange={this.onCheckParentsChange} className="k-checkbox" />
                    <label htmlFor="checkParents" className="k-checkbox-label" style={{ marginRight: 5 }}>
                        Check all parents when children are checked
                    </label>
                </div>
                <TreeView
                    data={processTreeViewItems(this.state.items, { check: this.state.check })}
                    checkboxes={true}
                    onCheckChange={this.onCheckChange}
                />
                <div style={{ marginTop: 5 }}>
                    <i>Press SPACE to check/uncheck the active item</i>
                    <div className="example-config">
                        Checked indices: {this.state.check.ids.join(",")}
                    </div>
                </div>
            </div>
        );
    }

    onCheckChange = (event) => {
        const { singleMode, checkChildren, checkParents } = this.state;
        const settings = { singleMode, checkChildren, checkParents };
        this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items, settings) });
    }
    onSingleModeChange = ({ target: { checked } }) => {
        let { checkChildren, checkParents } = this.state;
        if (checked) {
            checkChildren = checkParents = false;
        }
        this.setState({ singleMode: checked, checkChildren, checkParents });
    }
    onCheckChildrenChange = ({ target: { checked } }) => {
        let { singleMode } = this.state;
        if (checked) {
            singleMode = false;
        }
        this.setState({ singleMode, checkChildren: checked });
    }
    onCheckParentsChange = ({ target: { checked } }) => {
        let { singleMode } = this.state;
        if (checked) {
            singleMode = false;
        }
        this.setState({ singleMode, checkParents: checked });
    }
}

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

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'));
 /