How to import in grid such kind of json

[Andrejs Sapals]

Hello,

Could you help me to understand what settings of DataManager I should use to pass to the Grid the following JSON array from the weblink (external):

  

http://gsx2json.com/api?id=1I3tEfgYtWKNYK9vqTmsCGfZfbHckS0-odDIgEilHiOQ&columns=false

{"rows":[{"name":"Nick","age":21},{"name":"Chris","age":27.5},{"name":"Barry","age":67}]}

I really checked syncfusion documentation and tried different adaptors as well as offline, but did not achieve any result. 

My script is the following:

 <script>

var data = new ej.data.DataManager({

    url: 'http://gsx2json.com/api?id=1I3tEfgYtWKNYK9vqTmsCGfZfbHckS0-odDIgEilHiOQ&columns=false',

      adaptor: new ej.data.ODataV4Adaptor()

});

var grid = new ej.grids.Grid ({

    dataSource: data,

 columns: [

                { field: 'name', headerText: 'name', textAlign: 'Right', width: 120}

]

});

grid.appendTo('#element');

</script>

[Praveenkumar Gajendiran]

Hi Andrejs, 

Greetings from Syncfusion support. 

Based on your query, We could see that you have using DataManager instances to bind the dataSource, if so we would like to let you know that we have built-in support for data Adaptors UrlAdaptor , WebApiAdaptor, etc., and each adaptor uses different way in accepting request and sending back the response by DataManager. They are explained in the below documentation link which you can check for more details, 

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#remote-data 

For example, If you are 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. 

{ 

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

      count: Total data count  

 } 

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

For WebApiAdaptor, The response object should contain properties, Items and Count, whose values are a collection of entities and total count of the entities, respectively. 

{ 

Items: [{..}, {..}, {..}, ...], 

Count: 830 

} 

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

For using OdataV4Adaptor, The response returned from OData service must be in the below format from which the count and data is assigned to the Grid to bind data. 

  

 

More details on this can be checked in the below documentation link,

Documentation Link: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#binding-with-odata-v4-services  

If you binding the data from external service, we suggest you to use the Ajax Binding feature using you can fetch the datasource from the server with the help of ajax request and provided that to DataSource property by using onSuccess event of the ajax as demonstrated in the below code example. 

Code Example: 

<script type="text/javascript"> 

var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 

var ajax = new ej.base.Ajax('/URL/, 'GET'); 

ajax.send(); 

ajax.onSuccess = function (data) { 

    grid.dataSource = JSON.parse(data); 

}; 

</script> 

More details on this can be checked in the below documentation link, 

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#binding-with-ajax 

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G