Documentation

JSONP for a cross domain data source

The same-origin policy prevents a script loaded from one domain from getting or manipulating properties of a document from another domain. That is, the domain of the requested URL must be the same as the domain of the current Web page. This basically means that the browser isolates content from different origins to guard them against manipulation. JSONP (JSON with Padding) represents a JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique, by-passing the same-origin policy limitations. In this help article, we will show you how to bind the jQuery Grid to JSONP data. We will use the Geonames JSONP Service to populate our Grid with data.

1. Add references to the javascript and css files.

            <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">            <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>            <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>

2. Add a DIV tag to the document’s body. We will later select this DIV tag to render the Grid inside.

            <div id="jqxgrid"></div>

3. Create the source object and a new instance of the jqxDataAdapter plug-in. In the source object, set the "url" to point to the JSONP service. The members and their values defined in the data object will be sent to the server. The "datatype" member should be set to ‘jsonp’ and we also specify the datafields array. Each datafield name is a name of a member in the data source. The jqxDataAdapter's "formatData" callback function is called when the Grid is preparing to send a new Ajax request to the server. The result of that function determines the parameters sent to the server.

 // prepare the datavar source ={    datatype: "jsonp",    datafields: [        { name: 'countryName', type: 'string' },        { name: 'name', type: 'string' },        { name: 'population', type: 'float' },        { name: 'continentCode', type: 'string' }    ],    url: "http://ws.geonames.org/searchJSON"};var dataAdapter = new $.jqx.dataAdapter(source,    {        formatData: function (data) {            $.extend(data, {                featureClass: "P",                style: "full",                maxRows: 50            });            return data;        }    });

4. The final step is to initialize the Grid. We achieve this by selecting the jqxgrid DIV tag and calling the jqxGrid constructor. In the constructor, we set the source property to point to the source object. We also initialize the Grid columns by setting the displayed text, datafield which points to a datafield in the source object and the column’s width.

$("#jqxgrid").jqxGrid({    source: dataAdapter,    columnsresize: true,    columns: [        { text: 'Country Name', datafield: 'countryName', width: 200 },        { text: 'City', datafield: 'name', width: 170 },        { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },        { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }    ]});

Working Example

Below is the example's full source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example the Grid is bound to a Remote Data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode', type: 'string' }
                ],
                url: "http://ws.geonames.org/searchJSON"
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        $.extend(data, {
                            featureClass: "P",
                            style: "full",
                            username: "jqwidgets",
                            maxRows: 50
                        });
                        return data;
                    }
                }
            );
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>