Records not displayed

Hi,


I have created sample JSON format rest api response, also copied sample response from syncfusion to apimocha and created my own rest api server, I cannot get records displayed. Only data with syncfusion url works. I compared response with curl, also it seems identical. Can please advise?



import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import React from 'react';
export default class App extends React.Component {


constructor() {
super(arguments);
this.data = new DataManager({
adaptor: new WebApiAdaptor,
//url: 'https://apimocha.com/employees3486/employees'
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
//url: 'https://apimocha.com/employees3486/Orders'


});

}
render() {
return (
<GridComponent dataSource={this.data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='120' textAlign="Right"/>
ColumnsDirective>
GridComponent>

);
}
}

4 Replies

VB Vinitha Balasubramanian Syncfusion Team September 12, 2022 05:25 PM UTC

Hi Mehmet,


Greetings from Syncfusion support.


Query : Records not displayed.


We have analyzed your query, we want to convey that data can be rendered to the Grid component while using remote Databinding can be done by service action.


We have check the url that you have been used to bind data to the Grid “https://apimocha.com/employees3486/Orders” and our documentation url link “https://ej2services.syncfusion.com/production/web-services/api/Orders”.


We weren’t able to get the service details of the url that you have used to fetch the data. Also we want to convey that the service need to be active to fetch the data. Kindly refer the attached screenshot for your reference.



Also refer the screenshot of our documentation url link that can able to fetch the data.



So we suggest you to use the active service to render the data to the Grid component.


If you still face the same issue, kindly share the below details to validate your query at our end.


  • Kindly share your complete Grid code file and package.json file.
  • If possible share the issue replicated sample with replication procedure.
  • Share the video demo of your reported problem which will be more helpful to validate your query further at our end.


Regards,

Vinitha Balasubramanian



ME mehmet September 13, 2022 05:55 AM UTC

Hi Vinitha


apimocha rest api service has been up and running all the while. Maybe your network blocked this domain. I have attached screenshot from browser which is accessed in private mode.


Also when i change to Ajax call using following, it works.

const ajax = new Ajax("https://apimocha.com/employees3486/Orders", "GET");
    ajax.send();
    ajax.onSuccess = (data) => {
        if (this.grid) {
            this.grid.dataSource = JSON.parse(data);
        }  
    }


 I am not sure if there is any blocking through WebApiAdaptor.




Attachment: apimocha_a3320b3c.zip


VB Vinitha Balasubramanian Syncfusion Team September 14, 2022 06:20 PM UTC

Hi Mehmet,


Thanks for your update.


We have currently validating your query based on your shared information, we will update the further details on or before Sep 16th, 2022. Until then we appreciate your patience.


Regards,

Vinitha Balasubramanian



VB Vinitha Balasubramanian Syncfusion Team September 15, 2022 12:20 PM UTC

Hi Mehmet,


Thanks for your patience.


Based on your update, we suspect that you have return the data to the Grid component as a JSON(array of objects) format. We want to convey that, WebAPI adaptor values are a collection of objects and total count of the objects. So the return from service/remote data in object should contain properties, Items and Count. Kindly ensure this in your project while using WebAPi adaptor.


We have attached the video demo with WebApiAdaptor data fetching and documentation for your reference.


Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPI_video_demo-1587261958


Documentation : https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data/#web-api-adaptor


Please get back to us if you need further assistance with this.


Regards,

Vinitha Balasubramanian


Loader.
Up arrow icon