Data Binding
The TreeView enables you to work with various types of data.
Basics
To bind the TreeView to data:
- Add children items to an item with an
itemsfield. - Configure the
dataproperty.
Example
View Source
Change Theme:
Item Fields
By default, the TreeView provides the following fields for its items:
text—The string representation of the item.items—The children of the item.expanded—If set totrue, expands the item.selected—If set totrue, selects the item.disabled—If set totrue, disables the item.checked—If set totrue, checks the item.checkIndeterminate—If set totrue, applies an indeterminate check to the item.hasChildren—If set totrue, notifies the TreeView that the item has children even if they are not initially passed. Used for implementing the load-on-demand feature.
Apart form items, you can replace each of the default TreeView fields with custom ones. To include your own fields, set the corresponding TreeView property to the name of the custom field. The TreeView also supports the nesting of its item fields.
const tree = [{
data: { text: 'Furniture' }, opened: true, items: [
{ data: { text: 'Tables & Chairs' } },
{ data: { text: 'Sofas' } },
{ data: { text: 'Occasional Furniture' } }]
}, {
data: { text: 'Decor' }, opened: true, items: [
{ data: { text: 'Bed Linen' } },
{ data: { text: 'Curtains & Blinds' } },
{ data: { text: 'Carpets' } }]
}];
class App extends React.Component {
render() {
return (
<TreeView
data={tree} textField="data.text"
expandIcons={true} expandField="opened" onExpandChange={this.onExpandChange}
/>
);
}
onExpandChange = (event) => {
event.item.opened = !event.item.opened;
this.forceUpdate();
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);Loading Data on Demand
The following example demonstrates how to fetch remote data and bind the TreeView to it.
To implement the load-on-demand feature:
- Set the
hasChildrenfield of the root items. - Provide their children afterwards.
const baseUrl = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/Categories';
const requestInit = { method: 'GET', accept: 'application/json', headers: [] };
class App extends React.Component {
state = { data: [] };
render() {
return <TreeView data={this.state.data} expandIcons={true} onExpandChange={this.onExpandChange} />;
}
componentDidMount() {
fetch(baseUrl, requestInit).then(response => response.json())
.then(json => {
const data = json.value.map(({ CategoryID, CategoryName }) => {
return { text: CategoryName, id: CategoryID, hasChildren: true }
});
this.setState({ data });
});
}
onExpandChange = (event) => {
const categoryIndex = Number(event.itemHierarchicalIndex);
const { data, category } = this.copyDataAndCategory(categoryIndex);
category.expanded = !category.expanded;
this.setState({ data });
!category.items && this.loadProducts(categoryIndex, category.id);
}
loadProducts(categoryIndex, categoryId) {
fetch(`${baseUrl}(${categoryId})/Products`, requestInit).then(response => response.json())
.then(json => {
const { data, category } = this.copyDataAndCategory(categoryIndex);
category.items = json.value.map(({ ProductName }) => {
return { text: ProductName }
});
this.setState({ data });
});
}
copyDataAndCategory(categoryIndex) {
const data = this.state.data.slice();
const category = data[categoryIndex] = { ...data[categoryIndex] };
return { data, category };
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);