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="jqxdata.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: "http://ws.geonames.org/searchJSON",
processdata: function(data)
{
data.featureClass = "P";
data.style = "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.
$("#jqxgrid").jqxGrid(
{
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' }
]
});
