This is a fairly common requirement - calling backend service and rendering data. The datagrid is designed to operate on JavaSCript Objects. It does not care where the JavaScript objects came from, as long as you have a datasource that returns javascript objects, gird is able to render it.

We have tons of examples of this in the demo, but since we wanted the demo to be fully self contained, none of them connect to a backend system. We have separate examples for those, which are more elaborate with PHP, NET backends. In this blog post, we are going to demonstrate a simple json service call and how to render it in the grid.

Code is very simple:

 

var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),
{
configuration: '<grid id="grid" headerRowHeight="50"
 variableRowHeight="true" enablePrint="true" enablePreferencePersistence="true"
 enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" 
enableFooters="true" >' +
' <level>' +
' <columns>' +
' <column dataField="userId" headerText="User ID" labelFunction="excelIssueBypass"/>' +
' <column dataField="id" headerText="ID" labelFunction="excelIssueBypass"/>' +
' <column dataField="title" headerText="Title"/>' +
' <column dataField="body" headerText="Body" wordWrap="true" width="300"/>' +
' </columns>' +
' </level>' +
' ' +
' </grid>',
dataProvider: [
]
});
grid.showSpinner('Loading, please wait!!');

$.getJSON( "http://jsonplaceholder.typicode.com/posts", function( data ) {
grid.setDataProvider(data);
});

Basically all we are doing, is calling the json file, and once we ge the data, 
setting the dataprovider on the grid using the setDataProvider method.
Attahed is the sample:

CallRemoteUrl.html (3.41 kb)