How to import or load data from Database into React TreeView?
The React TreeView is a graphical user interface component that allows you to represent hierarchical data in a tree structure.
Data binding in React TreeView component can be done using either local data or remote data. In React TreeView, the data is loaded using the dataSource property. In case of local data binding, the dataSource may be any valid xml, JSON, or JSOP. The React TreeView can also be populated from a remote data service with help of different kind of adaptors such as OData, OData V4, URL, JSON, and Web API.
Remote Data Binding
REACT
export class RemoteData extends SampleBase {
constructor() {
super(...arguments);
// Use data manager to get tree data from remote source.
this.data = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc',
adaptor: new ODataV4Adaptor,
crossDomain: true,
});
// Set queries to filter and fetch remote data.
this.query = new Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);
this.query1 = new Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5);
this.fields = { dataSource: this.data, query: this.query, id: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID',
child: { dataSource: this.data, query: this.query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' }
};
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className='tree-control_wrapper'>
<TreeViewComponent fields={this.fields} />
</div>
</div>
</div>);
}
Sample: https://stackblitz.com/edit/react-s4pdps-r7w8tz?file=index.js
FT: https://www.syncfusion.com/react-ui-components/react-treeview
Documentation:
Conclusion
I hope you enjoyed learning on how to import or load data from Database into React TreeView.
You can refer to
our React Treeview feature tour page to know about its other
groundbreaking feature representations and documentation, and how to quickly get started for
configuration specifications. You can also explore our React TreeView Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
