Use specific response data object for grid data

[AFIVEB SOFTW TM]

The Grid is empty, how do i load the grid data from response.data

[Praveenkumar Gajendiran]

Hi AFIVEB, 

Greetings from Syncfusion support. 

We checked your query and provided information, in that we found you are using a UrlAdaptor to bind data in the Grid. Based on that we would like to inform you, while using the UrlAdaptor, you need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value.

So we suggest you to return the data in the form of result and count to apply the data properly to the grid component.

Please refer the below documentation and screenshot for more information.

UrlAdaptor Documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#url-adaptor

Screenshot:  

 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G  

[AFIVEB SOFTW TM]

Hi, 

Thanks for you reply.

Got another way to customize the result into data?

[Praveenkumar Gajendiran]

Hi AFIVEB,

Thanks for your update. 

In our default Grid architecture, while using the UrlAdaptor, we need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value. This is our default behavior.

UrlAdaptor Documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#url-adaptor 

We also have custom binding approach to bind data in the Grid. With this you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it.  

For using custom binding also, we 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.  

{ 

      result: [{..}, {..}, {..}, ...], //JSON data source 

      count: Total data count  

 } 

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

Please get back to us if you need further assistance.

Regards,
Praveenkumar G