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:
handleTreeViewCheckChange—Provides the ids of the checked TreeView items. Allows you to automatically check parent and child nodes, and to configure a single or multiple selection mode. For more information, refer toTreeViewCheckChangeSettings.processTreeViewItems—Based on the provided ids of the checked TreeView items, updates the data in an immutable way. Enables you to configure the application of an indeterminate state to the items.
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:
- Set the
checkIndeterminateFieldfield of the TreeViewCheckDescriptor to the name of the custom field. - Set the
checkIndeterminateFieldproperty 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:
- Set the
operationFieldfield of the TreeViewCheckDescriptor to the name of the custom field. - Set the
checkFieldproperty 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'));