Unable to bind API results to Grid

[Andrew Kilburn]

Hi,

I have a Grid component that I am trying to bind to a remote data source but nothing seems to be binded after the API call is made.

I have verified that that API call is successful and data is returned.

Here is a sample of the response data:

{"ReportData":[{"TradeDate":"2024-06-10T00:00:00", "SettleDate":"2024-06-10T00:00:00", "KnowledgeDate":"2024-06-10T00:00:00"}], "TransactionDataSource":{"ReportExtractType":"Transactions"}}.

I understand that the grid component expects the API response to have a properties for "result" and "count" , otherwise the data will not bind. However I do not have control over the API and so cannot make any changes to the response.

What are my options? Is there a way to take the response and massage it before it's binded to the grid? I.e. Rename ReportData to result and add a new property for count?

Attachment: src_5fe525d5.zip

[Vikram Sundararajan]

Hi Andrew Kilburn,

Greetings from Syncfusion support,

We understand that need to bind it to a remote data source that doesn't match the expected format. Since you can't modify the API response. you can use a custom adaptor to transform the data before it binds to the grid.

Here's how you can achieve this with a custom adaptor. The adaptor will convert your API response format to the one expected by the grid. Below is a code snippet that demonstrates how to create a custom adaptor by extending the WebApiAdaptor. This adaptor reformats the response to include result and count properties.
 

class DataWebDataAdaptor extends WebApiAdaptor {

    processResponse(response, ds, query, xhr, request, changes) {

        // Reformat the response to match the grid's expected format

   var r = { result: response.result, count: response.count };

        return r;

    }

}

 

const hostUrl = 'https://services.syncfusion.com/react/production/';

const data = new DataManager({ url: hostUrl + 'api/Orders', adaptor: new DataWebDataAdaptor() });

In this example, the DataWebDataAdaptor class extends the WebApiAdaptor and overrides the processResponse method. This method formats the response to include result and count as required by the grid. You can adapt the count property logic depending on your specific needs.

refer the sample for reference: sample
 

Please get back us if you need further assistance.

Regards,

Vikram S