A string containing the URL to which the request is sent.

You can set the localdata to a Javascript Array or String of data. Use the localdata only when you want to load local data. If you want to load data from a File or Remote data source, use url instead.

Data to be sent to the server. The expected value is JSON Object.

Code example

var source =
{
    datatype: "jsonp",
    datafields: [
        { name: 'countryName' },
        { name: 'name' },
        { name: 'population', type: 'float' },
        { name: 'continentCode' }
    ],
    url: "http://api.geonames.org/searchJSON",
    data: {
        featureClass: "P",
        style: "full",
        maxRows: 50,
        username: "jqwidgets"
    }
};

The data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.

The type of request to make ("POST" or "GET"), default is "GET".

A string containing the Id data field.

A string describing where the data begins and all other loops begin from this element.

Code example

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>

A string describing the information for a particular record.

Code example

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>

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', 'int', 'float', 'bool'.
• map(optional) - A mapping to the data field.
• 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" }
• values(optional) - determines a foreign collection of values for a datafield.

  Code example

              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>d\\:EmployeeID' },
                      { 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: "../sampledata/orders.xml",
                  pager: function (pagenum, pagesize, oldpagenum) {
                      // callback called when a page or page size is changed.
                  }
              };
              var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
  

  employees.xml

  <?xml version="1.0"?>
  <Employees>
    <Employee EmployeeID="5">
      <LastName>Buchanan</LastName>
      <FirstName>Steven</FirstName>
      <Title>Sales Manager</Title>
      <TitleOfCourtesy>Mr.</TitleOfCourtesy>
      <BirthDate>1955-03-04</BirthDate>
      <HireDate>1993-10-17</HireDate>
      <Address>14 Garrett Hill</Address>
      <City>London</City>
      <Region/>
      <PostalCode>SW1 8JR</PostalCode>
    </Employee>
  <Employees>
  

  orders.xml

  <?xml version="1.0" encoding="iso-8859-1" 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">Orders</title>
    <id>http://services.odata.org/Northwind/Northwind.svc/Orders</id>
    <updated>2011-12-01T11:55:06Z</updated>
    <link rel="self" title="Orders" href="Orders" />
    <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>
  </feed>
  

Determines the mapping char used to specify the data field's mapping. By default it is '>'. In the following code, if the mapChar was set to '.', we should use '.' instead of '>' to specify the fields map.

Code example

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>id' },
        { name: 'name', map: 'department>name' },
        { name: 'author' }
    ],
    localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

Determines 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 ','.

Determines the rows delimiter when the data source is 'tab' or 'csv'. The default value is '\n'.

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. When the binding is "asynchronous", the data binding operation occurs in parallel and the order of completion is not guaranteed.

Determines whether the jqxDataAdapter's dataBind method is called automatically when the dataAdapter is initialized.

Use this option, If you want to explicitly pass in a content-type.

A callback function which allows you to modify the default data object sent to the server.

Code example

// 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://api.geonames.org/searchJSON"
};
var dataAdapter = new $.jqx.dataAdapter(source,
    {
        processData: function (data) {
            data.featureClass = "P";
            data.style = "full";
            data.maxRows = 50; data.username = "jqwidgets";
        }
    }
);

A callback function which is called before the data is sent to the server. You can use it to fully override the data sent to the server. If you define a formatData function, the result that the function returns will be sent to the server. The expected result is JSON object(jQuery will format it automatically calling the jQuery.param() function) or String(ex: width=300&height=300).

Code example

// 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://api.geonames.org/searchJSON"
};
var dataAdapter = new $.jqx.dataAdapter(source,
    {
        formatData: function (data) {
            data.featureClass = "P";
            data.style = "full";
            data.maxRows = 50;data.username = "jqwidgets";
            return data;
        }
    }
);

A pre-request callback function that can be used to modify the jqXHR.
Function arguments: jqXHR, settings
*The jQuery XMLHttpRequest (jqXHR) object is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible

Code example

var dataAdapter = new $.jqx.dataAdapter(source,
    {
        beforeSend: function (xhr) {
            xhr.overrideMimeType("text/plain; charset=x-user-defined");
        }
    }
);

A callback function called when the request has failed.
Function arguments: jqXHR, status, error
- jqXHR - The jQuery XMLHttpRequest (jqXHR) object is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible
- status - Possible values null, "timeout", "error", "abort", and "parsererror"
- error - When an HTTP error occurs, error receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."

A callback function which is called before the data is fully loaded. The function gets passed two arguments: The loaded records. The second argument is the original data. If the function returns an array, the dataAdapter's records field will be set to it.
Function arguments: records(Array)

Code example

// 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 < 200; 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,
    {
        beforeLoadComplete: function (records) {
            records[0]['firstname'] = "Michael";
            return records;
        }
    }
);

A callback function which is called when the data is fully loaded.

Function arguments: records(Array)

A callback function which allows you to manually handle the ajax calls through the jqxDataAdapter. The function gets passed three arguments: The data to be sent to the server, the source object which initializes the jqxDataAdapter plug-in and a callback function to be called when the ajax call is handled.

Code example

var dataAdapter = new $.jqx.dataAdapter(source,
{
    loadServerData: function (serverdata, source, callback) {
        $.ajax({
            dataType: source.datatype,
            url: url,
            data: serverdata,
            success: function (data, status, xhr) {
                var xmldata = xmldata || $(source.root + " " + source.record, data);
                if (!xmldata) {
                    xmldata = [];
                }
                var dataArray = new Array();
                for (var i = 0; i < xmldata.length; i++) {
                    var record = xmldata[i];
                    var datarow = {};
                    for (var j = 0; j < source.datafields.length; j++) {
                        var datafield = source.datafields[j];
                        var value = '';
                        if (undefined == datafield || datafield == null) {
                            continue;
                        }
                        if (datafield.map) {
                            value = $(datafield.map, record).text();
                        }
                        // searches by both selectors when necessary.
                        if (value == '') {
                            value = $(datafield.name, record).text();
                        }
                        datarow[datafield.name] = value;
                    }
                    dataArray[dataArray.length] = datarow;
                }
                // send the loaded records to the jqxDataAdapter plug-in.
                callback({ records: dataArray });
            }
        });
    }
}
);

Performs a data bind operation.

Code example

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Adapter bound to XML data.</title>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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">
        $(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, {
                loadComplete: function () {
                    // get data records.
                    var records = dataAdapter.records;
                    var length = records.length;
                    // loop through the records and display them in a table.
                    var html = "<table border='1'><tr><th align='left'>Company</th><th align='left'>Contact</th><th align='left'>City</th><th align='left'>Country</th></tr>";
                    for (var i = 0; i < length; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.CompanyName + "</td>";
                        html += "<td>" + record.ContactName + "</td>";
                        html += "<td>" + record.City + "</td>";
                        html += "<td>" + record.Country + "</td>";
                        html += "</tr>";
                    }
                    html += "</table";
                    $("#jqxWidget").html(html);
                }
            });
            dataAdapter.dataBind();
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
    </div>
</body>
</html>

Gets the array of the loaded data records when the data binding is completed. Note: For Async calls, make sure to use "records" in the loadComplete callback function.

Begins data update operation and prevents any future data binding operations.

Ends data update operation. You can call the method passing true or false. Pass true when you call the method in case you wish to make an automatic dataBind method call.

Returns true, if called after beginUpdate method call. Otherwise returns false.

Returns a hierarchical array from a set ot flat data. The method has 4 parameters, the last 2 of which are optional. The first parameter is the field’s id. The second parameter represents the parent field’s id. These parameters should point to a valid ‘datafield’ from the Data Source. The third parameter which is optional specifies the name of the ‘children’ collection. The last parameter specifies the mapping between the Data Source fields and custom data fields.

Code example

var data = [
{ "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate",
    "value": "$2.3"
}, {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "value": "$2.3"
}, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1",
    "value": "$2.3"
}, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano",
    "value": "$2.3"
    }, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6",
    "value": "$2.3"
}, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6",
    "value": "$2.3"
    }, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6",
    "value": "$2.3"
}, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6",
    "value": "$2.3"
    }, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
}, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12",
    "value": "$2.3"
    }, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13",
    "value": "$2.3"
}, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13",
    "value": "$2.3"
    }, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13",
    "value": "$2.3"
}, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12",
    "value": "$2.3"
    }]
// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' }
    ],
    id: 'id',
    localdata: data
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

The above code returns an Array object which has 3 items. Each item has id, parentid, label, value and items fields. The sub-items are stored in the items array.

Returns a hierarchical array from a set ot flat data. The method has 4 parameters. The first parameter is an array of grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name. The last parameter specifies the mapping between the Data Source fields and custom data fields.

Code example

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: "../sampledata/customers.xml",
    async: false
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
var records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'CompanyName', map: 'label' }]);
 

Returns a hierarchical array from a set ot flat data. The method has 4 parameters. The first parameter is an array of grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name. The last parameter specifies the mapping between the Data Source fields and custom data fields.

Code example

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: "../sampledata/customers.xml",
    async: false
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
var records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'CompanyName', map: 'label' }]);
 

Returns an Array of Aggregated data.

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var summaryData = dataAdapter.getAggregatedData([
{ name: 'quantity', aggregates: ['min', 'max', 'sum'] },
{ name: 'price', aggregates: ['avg', 'product', 'count'] }
]);
The getAggregatedData method accepts 3 params. The first parameter is an array which defines the data fields, type of functions and format strings.
Possible Numeric formats:
"d" - decimal numbers.
"f" - floating-point numbers.
"n" - integer numbers.
"c" - currency numbers.
"p" - percentage numbers.

For adding decimal places to the numbers, add a number after the formatting string.
For example: "c3" displays a number in this format $25.256
Possible Date formats:

// short date pattern d: "M/d/yyyy",
// long date pattern D: "dddd, MMMM dd, yyyy",
// short time pattern t: "h:mm tt",
// long time pattern T: "h:mm:ss tt",
// long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern M: "MMMM dd",
// month/year pattern Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"

Possible Date format strings:
"d"-the day of the month;
"dd"-the day of the month;
"ddd"-the abbreviated name of the day of the week;
"dddd"- the full name of the day of the week;
"h"-the hour, using a 12-hour clock from 1 to 12;
"hh"-the hour, using a 12-hour clock from 01 to 12;
"H"-the hour, using a 24-hour clock from 0 to 23;
"HH"- the hour, using a 24-hour clock from 00 to 23;
"m"-the minute, from 0 through 59;
"mm"-the minutes,from 00 though59;
"M"- the month, from 1 through 12;
"MM"- the month, from 01 through 12;
"MMM"-the abbreviated name of the month;
"MMMM"-the full name of the month;
"s"-the second, from 0 through 59;
"ss"-the second, from 00 through 59;
"t"- the first character of the AM/PM designator;
"tt"-the AM/PM designator;
"y"- the year, from 0 to 99;
"yy"- the year, from 00 to 99;
"yyy"-the year, with a minimum of three digits;
"yyyy"-the year as a four-digit number;
The supported aggregates are:
'avg' - Average aggregate
'count' - Count aggregate
'min' - Min aggregate
'max' - Max aggregate
'sum' - Sum aggregate
'product' - Product aggregate
'stdev' - Standard deviation on a sample
'stdevp' - Standard deviation on a population
'var' - Variance on an a sample
'varp' - Variance on an entire population.

The following code shows how to specify the data formatting when calling the getAggregatedData method.

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var summaryData = dataAdapter.getAggregatedData([
{ name: 'quantity', aggregates: ['min', 'max', 'sum'], formatStrings: ['n', 'n', 'n' ]},
{ name: 'price', aggregates: ['avg', 'sum', 'count'], formatStrings: ['c2', 'c2', 'n'] }
]);

The second parameter is optional and represents a localization object specified in this format:

var calendar = {
// separator of parts of a date (e.g. '/' in 11/05/1955)
'/': "/",
// separator of parts of a time (e.g. ':' in 05:44 PM)
':': ":",
// the first day of the week (0 = Sunday, 1 = Monday, etc)
firstDay: 0,
days: {
// full day names
names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
// abbreviated day names
namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
// shortest day names
namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
},
months: {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
},
// AM and PM designators in one of these forms:
// The usual view, and the upper and lower case versions
// [standard,lowercase,uppercase]
// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
// null
AM: ["AM", "am", "AM"],
PM: ["PM", "pm", "PM"],
eras: [
// eras in reverse chronological order.
// name: the name of the era in this culture (e.g. A.D., C.E.)
// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
// offset: offset in years from gregorian calendar
{"name": "A.D.", "start": null, "offset": 0 }
],
twoDigitYearMax: 2029,
patterns: {
// short date pattern
d: "M/d/yyyy",
// long date pattern
D: "dddd, MMMM dd, yyyy",
// short time pattern
t: "h:mm tt",
// long time pattern
T: "h:mm:ss tt",
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern M: "MMMM dd",
// month/year pattern
Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
// formatting of dates in MySQL DataBases
ISO: "yyyy-MM-dd hh:mm:ss",
d1: "dd.MM.yyyy",
d2: "dd-MM-yyyy"
},
percentsymbol: "%",
currencysymbol: "$",
currencysymbolposition: "before",
decimalseparator: '.',
thousandsseparator: ','
}

The last parameter is optional, too. It allows you to pass an array of records to the method. By default, the method aggregates the data loaded via the data adapter.

Code example

var data = generatedata(200);
var source =
{
    localdata: data,
    datatype: "array",
    datafields:
    [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'available', type: 'bool' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' }
    ],
    updaterow: function (rowid, rowdata) {
        // synchronize with the server - send update command   
    }
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var aggregate = dataAdapter.getAggregatedData([{ name: 'price', aggregates: ['min', 'max', 'sum', 'avg'], formatStrings: ['c2', 'c2', 'c2', 'c2']}]);
var avg = aggregate.price.avg;
var min = aggregate.price.min;
var max = aggregate.price.max;
var sum = aggregate.price.sum;

The generatedata function used in the above sample is part of generatedata.js which is in the demos/jqxgrid folder of the download package.

Returns a Formatted JavaScript Date object as a String.

Function arguments: value(JavaScript Date object), format(String) and calendar(Object)

• format
  Possible Date formats:
  
  // short date pattern d: "M/d/yyyy",
  // long date pattern D: "dddd, MMMM dd, yyyy",
  // short time pattern t: "h:mm tt",
  // long time pattern T: "h:mm:ss tt",
  // long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt",
  // long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt",
  // month/day pattern M: "MMMM dd",
  // month/year pattern Y: "yyyy MMMM",
  // S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
  
  Possible Date format strings:
  "d"-the day of the month;
  "dd"-the day of the month;
  "ddd"-the abbreviated name of the day of the week;
  "dddd"- the full name of the day of the week;
  "h"-the hour, using a 12-hour clock from 1 to 12;
  "hh"-the hour, using a 12-hour clock from 01 to 12;
  "H"-the hour, using a 24-hour clock from 0 to 23;
  "HH"- the hour, using a 24-hour clock from 00 to 23;
  "m"-the minute, from 0 through 59;
  "mm"-the minutes,from 00 though59;
  "M"- the month, from 1 through 12;
  "MM"- the month, from 01 through 12;
  "MMM"-the abbreviated name of the month;
  "MMMM"-the full name of the month;
  "s"-the second, from 0 through 59;
  "ss"-the second, from 00 through 59;
  "t"- the first character of the AM/PM designator;
  "tt"-the AM/PM designator;
  "y"- the year, from 0 to 99;
  "yy"- the year, from 00 to 99;
  "yyy"-the year, with a minimum of three digits;
  "yyyy"-the year as a four-digit number;
  
• calendar
  The structure of the expected calendar object is shown below: var calendar = {
  // separator of parts of a date (e.g. '/' in 11/05/1955)
  '/': "/",
  // separator of parts of a time (e.g. ':' in 05:44 PM)
  ':': ":",
  // the first day of the week (0 = Sunday, 1 = Monday, etc)
  firstDay: 0,
  days: {
  // full day names
  names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  // abbreviated day names
  namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  // shortest day names
  namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
  },
  months: {
  // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
  names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
  // abbreviated month names
  namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
  },
  // AM and PM designators in one of these forms:
  // The usual view, and the upper and lower case versions
  // [standard,lowercase,uppercase]
  // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
  // null
  AM: ["AM", "am", "AM"],
  PM: ["PM", "pm", "PM"],
  eras: [
  // eras in reverse chronological order.
  // name: the name of the era in this culture (e.g. A.D., C.E.)
  // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
  // offset: offset in years from gregorian calendar
  {"name": "A.D.", "start": null, "offset": 0 }
  ],
  twoDigitYearMax: 2029,
  patterns: {
  // short date pattern
  d: "M/d/yyyy",
  // long date pattern
  D: "dddd, MMMM dd, yyyy",
  // short time pattern
  t: "h:mm tt",
  // long time pattern
  T: "h:mm:ss tt",
  // long date, short time pattern
  f: "dddd, MMMM dd, yyyy h:mm tt",
  // long date, long time pattern
  F: "dddd, MMMM dd, yyyy h:mm:ss tt",
  // month/day pattern M: "MMMM dd",
  // month/year pattern
  Y: "yyyy MMMM",
  // S is a sortable format that does not vary by culture
  S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
  // formatting of dates in MySQL DataBases
  ISO: "yyyy-MM-dd hh:mm:ss",
  d1: "dd.MM.yyyy",
  d2: "dd-MM-yyyy"
  },
  percentsymbol: "%",
  currencysymbol: "$",
  currencysymbolposition: "before",
  decimalseparator: '.',
  thousandsseparator: ','
  }
  

Code example

dataAdapter.formatDate(new Date(), 'D')

Returns a Formatted Number as a String. The formatNumber function can be used for formatting integer, float, decimal, currency and percentage values.

Function arguments: value(Number), format(String) and calendar(Object)

• format
  Possible Numeric formats:
  "d" - decimal numbers.
  "f" - floating-point numbers.
  "n" - integer numbers.
  "c" - currency numbers.
  "p" - percentage numbers.
  
  For adding decimal places to the numbers, add a number after the formatting string.
  For example: "c3" displays a number in this format $25.256
  
• calendar
  The structure of the expected calendar object is shown below: var calendar = {
  // separator of parts of a date (e.g. '/' in 11/05/1955)
  '/': "/",
  // separator of parts of a time (e.g. ':' in 05:44 PM)
  ':': ":",
  // the first day of the week (0 = Sunday, 1 = Monday, etc)
  firstDay: 0,
  days: {
  // full day names
  names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  // abbreviated day names
  namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  // shortest day names
  namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
  },
  months: {
  // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
  names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
  // abbreviated month names
  namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
  },
  // AM and PM designators in one of these forms:
  // The usual view, and the upper and lower case versions
  // [standard,lowercase,uppercase]
  // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
  // null
  AM: ["AM", "am", "AM"],
  PM: ["PM", "pm", "PM"],
  eras: [
  // eras in reverse chronological order.
  // name: the name of the era in this culture (e.g. A.D., C.E.)
  // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
  // offset: offset in years from gregorian calendar
  {"name": "A.D.", "start": null, "offset": 0 }
  ],
  twoDigitYearMax: 2029,
  patterns: {
  // short date pattern
  d: "M/d/yyyy",
  // long date pattern
  D: "dddd, MMMM dd, yyyy",
  // short time pattern
  t: "h:mm tt",
  // long time pattern
  T: "h:mm:ss tt",
  // long date, short time pattern
  f: "dddd, MMMM dd, yyyy h:mm tt",
  // long date, long time pattern
  F: "dddd, MMMM dd, yyyy h:mm:ss tt",
  // month/day pattern M: "MMMM dd",
  // month/year pattern
  Y: "yyyy MMMM",
  // S is a sortable format that does not vary by culture
  S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
  // formatting of dates in MySQL DataBases
  ISO: "yyyy-MM-dd hh:mm:ss",
  d1: "dd.MM.yyyy",
  d2: "dd-MM-yyyy"
  },
  percentsymbol: "%",
  currencysymbol: "$",
  currencysymbolposition: "before",
  decimalseparator: '.',
  thousandsseparator: ','
  }
  

Code example

dataAdapter.formatNumber(10, 'c2')