Click here to Skip to main content
14,364,399 members

Binding jQuery Grid to Remote Data using JSONP

Rate this:
0.00 (No votes)
Please Sign up or sign in to vote.
0.00 (No votes)
1 Feb 2012CPOL
How to bind jQuery grid to remote data using JSONP

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 post, 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="styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxmenu.js"></script>
    <script type="text/javascript" src="jqxgrid.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. In the source object, set the url to point to the JSONP service. The processdata callback function is called before the Ajax call to the remote data. You can use this callback function to process the data to 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.
    // prepare the data
    var source =
        datatype: "jsonp",
        datafields: [
            { name: 'countryName' },
            { name: 'name' },
            { name: 'population' },
            { name: 'continentCode' }
        url: "",
        processdata: function(data)
            data.featureClass = "P";
   = "full";
            data.maxRows = 50;
  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.
        source: source,
        theme: 'classic',
        columns: [
            { text: 'Country Name', datafield: 'countryName', width: 200},
            { text: 'City', datafield: 'name', width: 170 },
            { text: 'Population', datafield: 'population', width: 170 },
            { text: 'Continent Code', datafield: 'continentCode' }

jquery grid binding to jsonp


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Comments and Discussions

-- There are no messages in this forum --
Technical Blog
Posted 1 Feb 2012

Tagged as


2 bookmarked