Grid Data Sources

jqxGrid

The Grid plugin can be bound to multiple types of data collections including arrays, xml, json, tsv, csv or remote data. To data bind the Grid to a data source you need to set its source property to point to an instance of jqxDataAdapter.
The source object represents a set of key/value pairs.
The example code below illustrates how to create jqxDataAdapter from a source object. 
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) 
    {
        // data is loaded. 
    },
    loadError: function (xhr, status, error)
    { 
       // data is not loaded.
    }    
});

If you bind the Grid to remote data source using asynchronous requests( that is by default when you specify url in the source object and you didn't set the async field to false), then make sure that you call any method or set a property once the data is loaded. To ensure that you call your code when the Grid is loaded with data, use the Grid's ready callback function or bind to the 'bindingcomplete' event before the Grid's initialization and call your code inside the event handler.

Example with 'ready' callback: 
var url = "../sampledata/beverages.txt";

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
    width: 400,
    source: dataAdapter,
    ready: function () {
        $("#jqxgrid").jqxGrid('hidecolumn', 'name');
    },
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});
Example with 'bindingcomplete': 
var url = "../sampledata/beverages.txt";

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").bind('bindingcomplete', function (event) {
    $("#jqxgrid").jqxGrid('hidecolumn', 'name');
});

$("#jqxgrid").jqxGrid(
{
    width: 400,
    source: dataAdapter,
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});

Initialize a Grid with the source property specified.

Bind the Grid to an array.

The data member is array. The datatype member is set to "array".

The result of the above code is:


What happens when the data source is changed? How to refresh the Grid?

To refresh the Grid, you need to simply set its 'source' property again.

The result of the above code is:

Bind the Grid to XML data.

In the source initialization, you need to set the following:
- url of a xml file.
- id field.
- root data record.
- record - this is the data record which will be displayed as a row in the Grid.
- datatype - 'xml'
- datafields - the record's member names. You can also specify the mapping to the member's data.

Code Example: 
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">Customers</title>
<updated>2012-11-30T11:39:28Z</updated>
<link rel="self" title="Customers" href="Customers" />
<entry>
  <title type="text"></title>
  <updated>2012-11-30T11:39:28Z</updated>
  <author>
    <name />
  </author>
  <content type="application/xml">
    <m:properties>
      <d:CustomerID>ALFKI</d:CustomerID>
      <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
      <d:ContactName>Maria Anders</d:ContactName>
      <d:ContactTitle>Sales Representative</d:ContactTitle>
      <d:Address>Obere Str. 57</d:Address>
      <d:City>Berlin</d:City>
      <d:Region m:null="true" />
      <d:PostalCode>12209</d:PostalCode>
      <d:Country>Germany</d:Country>
      <d:Phone>030-0074321</d:Phone>
      <d:Fax>030-0076545</d:Fax>
    </m:properties>
  </content>
</entry>
</feed>

The result of the above code is:

You can also set the datafield's type in the source object initialization.

The sortcolumn and sortdirection properties in the above code apply a sorting and a sort order to a Grid column.

Bind the Grid to JSON data.

When you bind the Grid to JSON data, you need to set the source object's datatype to 'json'.
Sample JSON data:

Code example:

The result of the above code is:

If you want to bind the Grid to JSONP data, then you need to set the source object's datatype to 'jsonp'.

Bind the Grid to tab-separated values (TSV).

When you bind the Grid to TSV data, you need to set the source object's datatype to 'tab'.
Code example:

The result of the above code is:


Bind the Grid to comma-separated values (CSV).

When you bind the Grid to CSV data, you need to set the source object's datatype to 'csv'.
Code example:

The result of the above code is:


Additional properties of the source object: