Example of Remote Data Binding in React Spreadsheet Component

All Controls
/
Spreadsheet
/
RemoteDataBinding

This sample demonstrates data binding to the Spreadsheet component with a remote service using DataManager.

More Details...

ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAEAFAGAHAIAJAKALAMANAOAPAQARASATAUAVAWAXAY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Order IDCustomer NameShip NameShip CityShip Country
10001ALFKIBerlinSimons bistroDenmark
10002ANATRMadridQueen CozinhaBrazil
10003ANTONCholchesterFrankenversandGermany
10004BLONPMarseilleErnst HandelAustria
10005BOLIDTsawassenHanari CarnesSwitzerland
10006ALFKIBerlinSimons bistroDenmark
10007ANATRMadridQueen CozinhaBrazil
10008ANTONCholchesterFrankenversandGermany
10009BLONPMarseilleErnst HandelAustria
10010BOLIDTsawassenHanari CarnesSwitzerland
10011ALFKIBerlinSimons bistroDenmark
10012ANATRMadridQueen CozinhaBrazil
10013ANTONCholchesterFrankenversandGermany
10014BLONPMarseilleErnst HandelAustria
10015BOLIDTsawassenHanari CarnesSwitzerland
10016ALFKIBerlinSimons bistroDenmark
10017ANATRMadridQueen CozinhaBrazil
10018ANTONCholchesterFrankenversandGermany
10019BLONPMarseilleErnst HandelAustria
10020BOLIDTsawassenHanari CarnesSwitzerland
10021ALFKIBerlinSimons bistroDenmark
10022ANATRMadridQueen CozinhaBrazil
10023ANTONCholchesterFrankenversandGermany
10024BLONPMarseilleErnst HandelAustria
10025BOLIDTsawassenHanari CarnesSwitzerland
10026ALFKIBerlinSimons bistroDenmark
10027ANATRMadridQueen CozinhaBrazil
10028ANTONCholchesterFrankenversandGermany
10029BLONPMarseilleErnst HandelAustria
10030BOLIDTsawassenHanari CarnesSwitzerland
10031ALFKIBerlinSimons bistroDenmark
10032ANATRMadridQueen CozinhaBrazil
10033ANTONCholchesterFrankenversandGermany
Description

The Spreadsheet supports data binding. The dataSource property can be assigned with the instance of DataManager to bind remote data.

DataManager, which will act as an interface between the service endpoint and the Spreadsheet, requires the following minimum configuration 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 the response from the service endpoint and the request to it. The @syncfusion/ej2-data package provides some predefined adaptors that are designed to interact with service endpoints. They are:

  • UrlAdaptor : Use this to interact with 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 under the ranges of sheet.

More information about remote data binding can be found in this documentation section.