Example of Remote Data in React Dropdown Tree Component


This sample explains you about how to bind data to the Dropdown Tree from a remote data source. Click the Dropdown Tree element, and then select an item from the hierarchical structure suggestion list.

More Details...


The Dropdown Tree loads the data from the remote data services through the dataSource property. It supports the data type of array or DataManager.

The DataManager that act as an interface between the service endpoint and Dropdown Tree, will require the below minimal information to interact with the service endpoint properly.

  • DataManager->url - Defines the service endpoint to fetch data
  • DataManager->adaptor - Defines the adaptor option. By default, ODataAdaptor is used for remote binding.

Adaptor is responsible for processing response and request from or to the service endpoint. @syncfusion/ej2-data package provides some pre-defined adaptors that are designed to interact with the particular service endpoints. They are:

  • UrlAdaptor - To interact with any remote services.
  • ODataAdaptor - To interact with OData endpoints.
  • ODataV4Adaptor - To interact with OData V4 endpoints.
  • WebApiAdaptor - To interact with Web API created under OData standards.
  • WebMethodAdaptor - To interact with web methods.

In this demo, the Dropdown Tree is bound with the dataSource from the Northwind remote service by using the DataManager instance.