Documentation

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.
  • url: A string containing the URL to which the request is sent.
  • data: Data to be sent to the server.
  • localdata: data array or data string pointing to a local data source.
  • datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
  • type: The type of request to make ("POST" or "GET"), default is "GET".
  • id: A string containing the Id data field.
  • root: A string describing where the data begins and all other loops begin from this element.
  • record: A string describing the information for a particular record. 
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
            { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
            { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
            { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
            { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
            { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
        ],
        root: "entry",
        record: "content",
        id: 'm\\:properties>d\\:OrderID',
        url: 'orders.xml'
    };

    XML 
      <entry>
        <id>http://services.odata.org/Northwind/Northwind.svc/Orders(10248)</id>
        <title type="text"></title>
        <updated>2011-12-01T11:55:06Z</updated>
        <author>
          <name />
        </author>
        <link rel="edit" title="Order" href="Orders(10248)" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer" type="application/atom+xml;type=entry" title="Customer" href="Orders(10248)/Customer" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee" type="application/atom+xml;type=entry" title="Employee" href="Orders(10248)/Employee" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details" type="application/atom+xml;type=feed" title="Order_Details" href="Orders(10248)/Order_Details" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper" type="application/atom+xml;type=entry" title="Shipper" href="Orders(10248)/Shipper" />
        <category term="NorthwindModel.Order" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
        <content type="application/xml">
          <m:properties>
            <d:OrderID m:type="Edm.Int32">10248</d:OrderID>
            <d:CustomerID>VINET</d:CustomerID>
            <d:EmployeeID m:type="Edm.Int32">5</d:EmployeeID>
            <d:OrderDate m:type="Edm.DateTime">1996-07-04T00:00:00</d:OrderDate>
            <d:RequiredDate m:type="Edm.DateTime">1996-08-01T00:00:00</d:RequiredDate>
            <d:ShippedDate m:type="Edm.DateTime">1996-07-16T00:00:00</d:ShippedDate>
            <d:ShipVia m:type="Edm.Int32">3</d:ShipVia>
            <d:Freight m:type="Edm.Decimal">32.3800</d:Freight>
            <d:ShipName>Vins et alcools Chevalier</d:ShipName>
            <d:ShipAddress>59 rue de l'Abbaye</d:ShipAddress>
            <d:ShipCity>Reims</d:ShipCity>
            <d:ShipRegion m:null="true" />
            <d:ShipPostalCode>51100</d:ShipPostalCode>
            <d:ShipCountry>France</d:ShipCountry>
          </m:properties>
        </content>
      </entry>
      <entry>
        <id>http://services.odata.org/Northwind/Northwind.svc/Orders(10249)</id>
        <title type="text"></title>
        <updated>2011-12-01T11:55:06Z</updated>
        <author>
          <name />
        </author>
        <link rel="edit" title="Order" href="Orders(10249)" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer" type="application/atom+xml;type=entry" title="Customer" href="Orders(10249)/Customer" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee" type="application/atom+xml;type=entry" title="Employee" href="Orders(10249)/Employee" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details" type="application/atom+xml;type=feed" title="Order_Details" href="Orders(10249)/Order_Details" />
        <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper" type="application/atom+xml;type=entry" title="Shipper" href="Orders(10249)/Shipper" />
        <category term="NorthwindModel.Order" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
        <content type="application/xml">
          <m:properties>
            <d:OrderID m:type="Edm.Int32">10249</d:OrderID>
            <d:CustomerID>TOMSP</d:CustomerID>
            <d:EmployeeID m:type="Edm.Int32">6</d:EmployeeID>
            <d:OrderDate m:type="Edm.DateTime">1996-07-05T00:00:00</d:OrderDate>
            <d:RequiredDate m:type="Edm.DateTime">1996-08-16T00:00:00</d:RequiredDate>
            <d:ShippedDate m:type="Edm.DateTime">1996-07-10T00:00:00</d:ShippedDate>
            <d:ShipVia m:type="Edm.Int32">1</d:ShipVia>
            <d:Freight m:type="Edm.Decimal">11.6100</d:Freight>
            <d:ShipName>Toms Spezialitäten</d:ShipName>
            <d:ShipAddress>Luisenstr. 48</d:ShipAddress>
            <d:ShipCity>Münster</d:ShipCity>
            <d:ShipRegion m:null="true" />
            <d:ShipPostalCode>44087</d:ShipPostalCode>
            <d:ShipCountry>Germany</d:ShipCountry>
          </m:properties>
        </content>
      </entry>
  • datafields: An array describing the fields in a particular record. Each datafield must define the following members:
    • name - A string containing the data field's name.
    • type - A string containing the data field's type. Possible values: 'string', 'date', 'number', 'float', 'int', 'bool'.
    • format(optional) - Sets the data formatting. By setting the format, the jqxDataAdapter plug-in will try to format the data before loading it.
      Example: { name: 'SubmitDate', type: 'date', format: "yyyy-MM-ddTHH:mm:ss-HH:mm" }
    • map(optional) - A mapping to the data field.
      Example with XML data: 
      { name: 'CompanyName', map: 'm\\:properties&gt;d\\:CompanyName' }

      XML 
        <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>


      Example with nested JSON data. 
      var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
      // prepare the data
      var source =
      {
          datatype: "json",
          datafields: [
              { name: 'empName' },
              { name: 'age' },
              { name: 'id', map: 'department&gt;id' },
              { name: 'name', map: 'department&gt;name' },
              { name: 'author' }
          ],
          localdata: data
      };
      var dataAdapter = new $.jqx.dataAdapter(source);

      Example #2 with XML Attributes Let's load the following data into the Grid from a file named customers.xml. 
      <?xml version="1.0" encoding="utf-8" standalone="yes"?>
      <Customers>
      <Customer CustomerID="1" Name="Customer 1"></Customer>
      <Customer CustomerID="2" Name="Customer 2"></Customer>
      </Customers>

      Initialize the jqxDataAdapter plug-in. 
      var url = "../sampledata/customers.xml";
      // prepare the data
      var source =
      {
          datatype: "xml",
          datafields: [
              { name: 'CustomerID', map: '[CustomerID]' },
              { name: 'Name', map: '[Name]' }
          ],
          root: "Customers",
          record: "Customer",
          url: url
      };
      var dataAdapter = new $.jqx.dataAdapter(source);

      Initialize the jqxGrid. 
      $("#jqxgrid").jqxGrid(
                  {
                      width: 400,
                      source: dataAdapter,
                      columns: [
                        { text: 'ID', datafield: 'CustomerID', width: 250 },
                        { text: 'Name', datafield: 'Name', width: 150 }
                      ]
                  });

      Example #3 with nested JSON data. 
      var data = [
          {
              "state": {
                  "id": "x526",
                  "city": {
                      "name": "Beverly Hills",
                      "id": 90210,
                      "value": "Beverly Hills"
                  }
              }
          }
      ];
      var source = {
          datatype: 'json',
          localdata: data,
          datafields:
          [
              {
                  name: 'cityName', map: 'state&gt;city&gt;name'
              }
          ]
      };
      var dataAdapter = new $.jqx.dataAdapter(source);
    • values - determines the foreign collection associated to the data field.

      • Example with "values" This functionality allows you to join two or more data sources. 
      var employeesSource =
          {
              datatype: "xml",
              datafields: [
                  { name: 'FirstName', type: 'string' },
                  { name: 'LastName', type: 'string' }
              ],
              root: "Employees",
              record: "Employee",
              id: 'EmployeeID',
              url: "../sampledata/employees.xml",
              async: false
          };
          var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
          autoBind: true,
          beforeLoadComplete: function (records) {
              var data = new Array();
              // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
              for (var i = 0; i < records.length; i++) {
                  var employee = records[i];
                  employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                  employee.EmployeeID = employee.uid;
                  data.push(employee);
              }
              return data;
          }
      });
      // prepare the data
      var ordersSource =
      {
          datatype: "xml",
          datafields: [
              // name - determines the field's name.
              // value - the field's value in the data source.
              // values - specifies the field's values.
              // values.source - specifies the foreign source. The expected value is an array.
              // values.value - specifies the field's name in the foreign source. 
              // values.name - specifies the field's value in the foreign source. 
              // When the ordersAdapter is loaded, each record will have a field called "EmployeeName". The "EmployeeName" for each record comes from the employeesAdapter where the record's "EmployeeID" from orders.xml matches to the "EmployeeID" from employees.xml. 
              { name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value: 'EmployeeID', name: 'EmployeeName' } },
              { name: 'EmployeeID', map: 'm\\:properties&gt;d\\:EmployeeID' },
              { name: 'ShippedDate', map: 'm\\:properties&gt;d\\:ShippedDate', type: 'date' },
              { name: 'Freight', map: 'm\\:properties&gt;d\\:Freight', type: 'float' },
              { name: 'ShipName', map: 'm\\:properties&gt;d\\:ShipName' },
              { name: 'ShipAddress', map: 'm\\:properties&gt;d\\:ShipAddress' },
              { name: 'ShipCity', map: 'm\\:properties&gt;d\\:ShipCity' },
              { name: 'ShipCountry', map: 'm\\:properties&gt;d\\:ShipCountry' }
          ],
          root: "entry",
          record: "content",
          id: 'm\\:properties&gt;d\\:OrderID',
          url: "../sampledata/orders.xml",
          pager: function (pagenum, pagesize, oldpagenum) {
              // callback called when a page or page size is changed.
          }
      };
      var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
  • pagenum - determines the initial page number when paging is enabled.
  • pagesize - determines the page size when paging is enabled.
  • pager - callback function called when the current page or page size is changed. 
    pager: function (pagenum, pagesize, oldpagenum) {
    }
  • sortcolumn - determines the initial sort column. The expected value is a data field name.
  • sortdirection - determines the sort order. The expected value is 'asc' for (A to Z) sorting or 'desc' for (Z to A) sorting.
  • sort - callback function called when the sort column or sort order is changed. 
    sort: function (column, direction) {
    }
  • filter - callback function called when a filter is applied or removed. 
    filter: function (filters, recordsArray)
    {
    }
  • addrow - callback function, called when a new row is/are added. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows. 
    addrow: function (rowid, rowdata, position, commit) {
        // synchronize with the server - send insert command
        // call commit with parameter true if the synchronization with the server is successful 
        //and with parameter false if the synchronization failed.
        commit(true);
    }
  • deleterow - callback function, called when a row is deleted. If multiple rows are deleted, the rowid parameter is an array of row ids. 
     
    deleterow: function (rowid, commit) {
        // synchronize with the server - send delete command
        // call commit with parameter true if the synchronization with the server is successful 
        //and with parameter false if the synchronization failed.
        commit(true);
    }
  • updaterow - callback function, called when a row is updated. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.
    Example: 
    updaterow: function (rowid, newdata, commit) {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server is successful 
        // and with parameter false if the synchronization failed.
        commit(true);
    }
  • processdata - extend the default data object sent to the server. 
    var source =
    {
        datatype: "jsonp",
        datafields: [
            { name: 'countryName' },
            { name: 'name' },
            { name: 'population', type: 'float' },
            { name: 'continentCode' }
        ],
        url: "http://ws.geonames.org/searchJSON",
        processdata: function (data) {
            data.featureClass = "P";;
            data.style = "full";
            data.maxRows = 50;
        }
    };
  • formatdata - Before the data is sent to the server, you can fully override it by using the 'formatdata' function of the source object. The result that the 'formatdata' function returns is actually what will be sent to the server. 
    var source =
    {
        datatype: "jsonp",
        datafields: [
            { name: 'countryName' },
            { name: 'name' },
            { name: 'population', type: 'float' },
            { name: 'continentCode' }
        ],
        url: "http://ws.geonames.org/searchJSON",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 50
        },
        formatdata: function (data) {
            return "my data";
        }
    };
  • contenttype: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".

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". 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid populated from Array.</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/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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 50; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </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>

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>


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from XML 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/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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "customers.xml";
           
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
                    { name: 'City', map: 'm\\:properties>d\\:City' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                  { text: 'Country', datafield: 'Country', width: 100 }
                ]
            });
        });
    </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>

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:
  • mapChar - specifies the mapping char. By default it is '>'. In the following code, if the mapChar was set to '.', we should use '.' instead of '>' to specify the fields map. 
    var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'empName' },
            { name: 'age' },
            { name: 'id', map: 'department&gt;id' },
            { name: 'name', map: 'department&gt;name' },
            { name: 'author' }
        ],
        localdata: data
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
  • columnDelimiter - specifies the column delimiter when the data source is 'tab' or 'csv'. The default value for 'tab' is '\t' and the default value for 'csv' is ','.
  • rowDelimiter - specifies the rows delimiter when the data source is 'tab' or 'csv'. The default value is '\n'.