Custom binding approach to bind data in React Grid

[vrescobar]

Hello,

I am not really sure how to proceed after having read the docs and tried quite a few different strategies, but I cannot find any way to fetch the contents from the Firestore database over REST. The API is open and returns a bare json which I tested previously but the Grid never gets populated (the code is F# which compiles to react/javascript).

let inline firebaseDataManager<'A> (data:array<'A>) (projectID:string) (subKey:string):IDataManager<'A> =

        let adaptor = createNew RemoteSaveAdaptor ()

        !! createNew DataManager {|

                                               ``url`` = sprintf "https://firestore.googleapis.com/v1/projects/%s/databases/(default)/documents/%s" projectID subKey

                                               ``adaptor`` = adaptor

                                               //``json`` = data

                                               ``crossDomain`` = true

                                               ``headers`` = [||]

                                               //``key`` =  subKey //"documents"

                                               ``requestType`` = "GET"

And I pass it straight to the Grid dataSource. The only way it displays something is when I pass some prefetched data to the JSON, but for sure it doesn't fetch anything by itself and whenever I try to edit a field it complains regarding CORS.

Is there an example of working example for Firebase Firestore? I am afraid I will end up having to implement my own adaptor due the API particularities but I do not find mich information aside of the recomendation to implement a method on the subclass.

[Sujith Kumar Rajkumar]

Hi Vrescobar, 

 

Greetings from Syncfusion support. 

 

We checked your query and for this requirement we suggest you to use custom binding approach to bind data in the Grid. With this you can bind data from API call by providing your own custom queries(as required by your API) and handle all the Grid actions with your API. The Grid’s custom binding approach is explained below, 

 

For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 

 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/react-gdreqv?file=index.js 

 

More details on custom binding can be checked in the below help documentation link, 

 

Custom binding documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding 

 

API links: https://ej2.syncfusion.com/react/documentation/api/grid/#datastatechange  

                 https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged  

                 https://ej2.syncfusion.com/react/documentation/api/grid/#datasource  

 

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 

 

Please get back to us if your require any further assistance. 

 

Regards, 

Sujith R