This sample demonstrates how to bind a data from various remote services to the Grid component.
|
Service
|
|
|
Adaptor
|
|
|
Additional Parameters
|
|
|
|
|
|
|
|
|
HTTP Headers
|
|
|
|
|
|
|
|
|
|
|
The Grid supports data binding. The dataSource property 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 Grid, 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. Adaptor is responsible for processing response and request from/to the service endpoint. @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. ODataV4Adaptor - Use this to interact with OData V4 endpoints. WebApiAdaptor - Use this to interact with Web API created under OData standards. Own Service - Custom databinding is used where data actions like paging, sorting are perfromed in dataStateChange event of grid. By default ODataV4Adaptor is used in this demo. The adaptor type will be automatically assigned based on the selected data service. The dataSource of grid can be dynamically changed using changeDataSource method by following the below steps Select any URL from the Service dropdown. To enable or disable the paging feature, check or uncheck the Enable Paging checkbox. Enter the name and value in the respective input boxes, then click the Add button to send extra parameters with the grid query. However, note that this demonstration only covers the skip and take query from the additional parameters, excluding the custom binding feature. In this demo, if you enable pagination by checking the Enable Paging checkbox, the additional parameter of skip and take query will not be processed separately, as it will be processed inbuilt with the pagination feature. To add http request headers enter the key and value in the respective input fields and click the Add button. In this demo, custom headers are not included in the payload information due to the limitations of both the OData service and the custom binding service. These services do not accept any additional headers based on the CORS policy. To send HTTP headers, it is important to ensure the CORS policy in your service. Multiple headers and parameters can be added as well. Press the Connect button to update the grid dataSource. The connected service with the respective adaptor, the parameters and header that passed along with the grid query will be listed under Payload Information. More information on the data binding can be found in this documentation section.