Remote Data in the React Scheduler

The Syncfusion® React Scheduler component enables remote data binding by connecting UI components to server-side data sources. This approach facilitates fetching, displaying, and manipulating data stored on remote servers.

Remote data binding using useEffect and Fetch API

The Scheduler component supports remote data binding through the useEffect hook and the native Fetch API. This method enables seamless integration with external data services, such as OData, by assigning fetched data directly to the scheduler component. The approach provides a lightweight and flexible solution for populating the scheduler with dynamic, server-side data.

Remote data binding using Syncfusion® DataManager

The Scheduler component supports remote data binding to connect UI components with external sources such as APIs, enabling efficient handling of large datasets. The @syncfusion/react-data package includes built-in adaptors that manage communication between the UI and the data service. To configure remote binding, specify a url for the endpoint and assign an appropriate adaptor to handle data requests and responses.

Overview of DataManager

Syncfusion® DataManager is a data management library that serves as a gateway for performing data operations across various data services. It enables seamless integration between UI components and data services by handling the complexities of data retrieval, transformation, and manipulation. It supports both local and remote datasources, including arrays, JSON objects, RESTful Web APIs, OData services. DataManager efficiently constructs queries based on data operations such as filtering, sorting, and paging, and it handles CRUD (Create, Read, Update, and Delete) actions.

Why are adaptors necessary?

Syncfusion® DataManager uses adaptors to connect with various data sources, such as RESTful Web APIs, OData services, or local arrays. Adaptors facilitate smooth data interactions by converting data formats to align with DataManager requirements. For remote sources like APIs, adaptors handle requests and responses. For local arrays, they process data directly without sending requests, ensuring consistent operations across all data sources.

Key features

• Data Operations - Syncfusion® DataManager supports a wide range of data operations such as filtering, sorting, paging, searching.

• Data Manipulation - Syncfusion® DataManager supports CRUD (Create, Read, Update, and Delete) operations to simplify interactions with data sources. Whether edit rows in a scheduler or send form data to a server, DataManager handles the essential logic for creating new records, updating existing records, deleting records, and saving changes in normal mode.

• Security Management - Syncfusion® DataManager helps make sure communication between the client and server stays secure when using remote data services by enabling the addition of custom headers to every request, like authentication tokens, API keys, or anti-forgery (CSRF) tokens, which verifies the user or app sending the request and protects against unauthorized or fake requests. For example, adding an anti-forgery token in the headers helps secure apps that use CSRF protection.

• Cross-Origin Support - Syncfusion® DataManager supports Cross-Origin Resource Sharing (CORS), enabling access to data from third-party services or microservices hosted on different domains, and ensures secure and compliant API communication by adhering to browser-enforced security policies, with support for CORS to allow secure access to resources on different domains using server-set rules to block unauthorized requests, and cross-domain requests with credentials to support authenticated requests to external APIs, keeping data exchanges secure while following browser security rules, allowing integration of external APIs without running into browser security restrictions.

• Data Adaptors - Syncfusion® DataManager provides built-in adaptors such as "ODataV4 adaptor", "URL adaptor", and "Web API adaptor" to simplify integration with various data formats and protocols. The following topics are covered:

URL adaptor

Scheduler component uses the UrlAdaptor to connect UI controls to custom APIs or remote endpoints using URLs. Data operations, including sorting, filtering, searching, and CRUD actions, are sent in LINQ query format within HTTP requests for server processing. The server must return an object containing a result array of data items and a count value representing the total number of records.

ODataV4 adaptor

The Scheduler component seamlessly integrates with OData V4 services via the ODataV4Adaptor, enabling efficient data retrieval and operations like sorting, filtering and searching using a queryable Entity Data Model (EDM), ensuring compatibility with the advanced features offered by the OData V4 protocol. The server returns a JSON object containing a value array of data items (e.g., records matching the query) and an @odata.count total number of records.

Web API adaptor

Scheduler component utilizes the WebApiAdaptor, an extension of the ODataAdaptor, for seamless integration with Web API services, including OData V4 endpoints. This adaptor supports efficient data retrieval and operations such as sorting, filtering and searching. It communicates with Web API endpoints using HTTP requests in JSON format, ensuring compatibility with OData-formatted queries for stable connectivity to remote data sources.

The WebApiAdaptor request format used for scheduler actions is the same as that of the ODataV4Adaptor.

Custom headers

Customize request headers in the Syncfusion® DataManager using the headers property to include additional metadata with each request. This is useful for scenarios requiring authentication tokens, API keys, or anti-forgery (CSRF) tokens. Including such headers helps validate the request origin and improves overall security.

Cross domain

Enable cross-origin support in the Syncfusion® DataManager by configuring the crossDomain property. This is essential for modern web applications that consume data from third-party services or hosted on different domains. The configuration ensures that requests are securely processed across origins without restriction.