Example of remote-data-functional in React Gantt

/
/
Remote Data

This sample demonstrates binding remote data to the Gantt Chart using DataManager. The data visualizes the various stages of the product growth cycle and supports efficient navigation of large datasets through row and timeline virtualization.

More Details...

Loading....
Description

The dataSource property in Gantt Chart can be assigned with the instance of DataManager to bind remote data. The DataManager, which will act as an interface between the service endpoint and the Gantt Chart, will require the below minimal information to interact with 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/to the service endpoint. The @syncfusion/ej2-data package provides some predefined adaptors which are designed to interact with particular service endpoints. They are:

  • UrlAdaptor - Use this to interact any remote services. This is the base adaptor for all remote based adaptors.
  • ODataAdaptor - Use this to interact with OData endpoints.
  • ODataV4Adaptor - Use this to interact with OData V4 endpoints.
  • WebApiAdaptor - Use this to interact with Web API created under OData standards.
  • WebMethodAdaptor - Use this to interact with web methods.

In this demo, remote data is bound by assigning service data as an instance of DataManager to the dataSource property. More information on the data binding can be found in this documentation section.

Gantt component features are segregated into individual feature-wise modules. To use a virtual scroll and selection feature, we need to inject the VirtualScroll and Selection into the Inject Services section.


More information on the Essential® React Gantt Chart can be found in this data binding documentation section.


Looking for the full React Gantt Chart component overview, features, pricing, and documentation? Visit the React Gantt Chart page.