Documentation

jqxDataAdapter

jqxDataAdapter represents a jQuery plug-in which simplifies data binding and data operations and supports binding to local and remote data. It supports the following data types: 'xml', 'json', 'csv', 'tsv', 'array', 'observablearray', and the observable collection provided by Knockout. Many jQWidgets like the jqxListBox, jqxDropDownList, jqxComboBox, jqxGrid and jqxChart support data binding through the jqxDataAdapter plug-in.

var dataAdapter = new $.jqx.dataAdapter(source, settings)

source: A set of key/value pairs that configure the jqxDataAdapter's source object.
  • url: A string containing the URL to which the request is sent.
  • timeout: Aborts the data binding on timeout. The default value is null.
  • data: Data to be sent to the server
  • datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array'.
  • 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.
  • 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' and '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.
  • 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>id' },
            { name: 'name', map: 'department>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'.
  • values - determines the foreign collection associated to the data field.

    • Example with "values" which shows how to join two data sources. The data in the "EmployeeName" field of the ordersAdapter is loaded from the "employeesAdapter". 
    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);

Data fields mapping with XML Data

<?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>2011-11-30T11:39:28Z</updated>
<link rel="self" title="Customers" href="Customers" />
<entry>
  <title type="text"></title>
  <updated>2011-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>

// prepare the data
var source =
{
    datatype: "xml",
    datafields: [
        { name: 'CompanyName', map: 'm\\:properties&gt;d\\:CompanyName' },
        { name: 'ContactName', map: 'm\\:properties&gt;d\\:ContactName' },
        { name: 'ContactTitle', map: 'm\\:properties&gt;d\\:ContactTitle' },
        { name: 'City', map: 'm\\:properties&gt;d\\:City' },
        { name: 'PostalCode', map: 'm\\:properties&gt;d\\:PostalCode' },
        { name: 'Country', map: 'm\\:properties&gt;d\\:Country' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties&gt;d\\:CustomerID',
    url: url
};

Data fields mapping with 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);

settings: A set of key/value pairs that configure the jqxDataAdapter plug-in. All settings are optional.
  • async: 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.
  • autoBind - Automatically calls the dataAdapter's dataBind method on initialization. The default value is false, because the widgets that use the dataAdapter plugin, invoke its dataBind method.
  • contentType: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".
  • processData: A callback function which allows you to modify the default data object sent to the server.
  • formatData: 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. 
    var source =
    {
        datatype: "jsonp",
        datafields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: "http://ws.geonames.org/searchJSON"
    };
    var dataAdapter = new $.jqx.dataAdapter(source,
        {
            formatData: function (data) {
                $.extend(data, {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50
                });
                return data;
            }
        }
    );
  • beforeSend(jqXHR, settings): A pre-request callback function that can be used to modify the jqXHR
  • loadError(jqXHR, status, error): A callback function called when the request has failed.
  • downloadComplete(edata, textStatus, jqXHR): A callback function which is called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR.
  • beforeLoadComplete: 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. 
    // 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;
            }
        }
    );
  • loadComplete: A callback function which is called when the data is fully loaded.
  • loadServerData: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. 
    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 });
                }
            });
        }
    }
    );
    Note: When you are using jqxDataAdapter plug-in with jqxGrid in virtual mode, the callback function should return an additional field called: 'totalrecords' which specifies the records count. The sorting, filtering and paging information can be retrieved from the 'serverdata' parameter.

To perform data binding operation with the jqxDataAdapter plug-in, you need to call its dataBind method. When the data is loaded, all data records are stored in a records array.

Examples of using jqxDataAdapter:

Asynchronous Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Adapter bound to XML data.</title>
    <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/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>
<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' >
    </div>
</body>
</html>

The result of the above code is:

Binding to Local Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Adapter bound to Array data.</title>
    <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/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 < 20; 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"] = new Number(price * quantity).toFixed(2);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            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'>First Name</th><th align='left'>Last Name</th><th align='left'>Product</th><th align='left'>Price</th><th align='left'>Quantity</th><th align='left'>Total</th></tr>";
                    for (var i = 0; i < length; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.firstname + "</td>";
                        html += "<td>" + record.lastname + "</td>";
                        html += "<td>" + record.productname + "</td>";
                        html += "<td>" + record.price + "</td>";
                        html += "<td>" + record.quantity + "</td>";
                        html += "<td>" + record.total + "</td>";
                        html += "</tr>";
                    }
                    html += "</table";
                    $("#jqxWidget").html(html);
                }
            });
            dataAdapter.dataBind();
        });
    </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' >
    </div>
</body>
</html>

The result of the above code is:

Dynamic Data Refresh

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Adapter bound to XML data.</title>
    <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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var generateData = function () {
                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 < 20; 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"] = new Number(price * quantity).toFixed(2);
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                localdata: generateData(),
                datatype: "array"
            };
            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'>First Name</th><th align='left'>Last Name</th><th align='left'>Product</th><th align='left'>Price</th><th align='left'>Quantity</th><th align='left'>Total</th></tr>";
                    for (var i = 0; i < length; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.firstname + "</td>";
                        html += "<td>" + record.lastname + "</td>";
                        html += "<td>" + record.productname + "</td>";
                        html += "<td>" + record.price + "</td>";
                        html += "<td>" + record.quantity + "</td>";
                        html += "<td>" + record.total + "</td>";
                        html += "</tr>";
                    }
                    html += "</table";
                    $("#jqxWidget").html(html);
                }
            });
            dataAdapter.dataBind();
            // refresh data adapter.
            $("#RefreshButton").click(function () {
                source.localdata = generateData(),
                dataAdapter.dataBind();
            });
        });
    </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'>
    <input size="margin-bottom: 10px;" id="RefreshButton" value="Refresh Data" type="button" />
    <div id='jqxWidget' >
    </div>
</body>
</html>

The result of the above code is:

Binding to JSON using PHP

Let's see how to get data in JSON format from a file called data.php.

data.php

<?php
	$firstNames = array("Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian","Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene");
	$lastNames = array("Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling","Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier");
	$productNames = array("Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espressocon Panna", "Peppermint Mocha Twist", "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha");
	$priceValues = array("2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0","1.75","3.25","4.0", "2.25", "1.5", "3.0", "3.3", "4.5", "3.6");
	$data = array();
	$i=0;
	while($i < count($productNames))
	{    
	  $row = array();
	  $productindex = $i;
	  $price = $priceValues[$productindex];
	  $quantity = rand(1, 10);
	  $row["firstname"] = $firstNames[$i];
	  $row["lastname"] = $lastNames[$i];
	  $row["productname"] = $productNames[$productindex];
	  $row["price"] = $price;
	  $row["quantity"] = $quantity;
	  $row["total"] = $price * $quantity;
	  $data[$i] = $row;
	  $i++;
	}
	 
	echo "{\"data\":" .json_encode($data). "}";
?>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Adapter bound to JSON data.</title>
    <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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'firstname' },
                    { name: 'lastname' },
                    { name: 'productname' },
                    { name: 'quantity', type: 'int' },
                    { name: 'price', type: 'float' },
                    { name: 'total', type: 'float' }
                ],
                id: 'id',
                url: 'data.php',
                root: 'data'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            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'>First Name</th><th align='left'>Last Name</th><th align='left'>Product</th><th align='left'>Price</th><th align='left'>Quantity</th><th align='left'>Total</th></tr>";
                    for (var i = 0; i < length; i++) {
                        var record = records[i];
                        html += "<tr>";
                        html += "<td>" + record.firstname + "</td>";
                        html += "<td>" + record.lastname + "</td>";
                        html += "<td>" + record.productname + "</td>";
                        html += "<td>" + record.price + "</td>";
                        html += "<td>" + record.quantity + "</td>";
                        html += "<td>" + record.total + "</td>";
                        html += "</tr>";
                    }
                    html += "</table";
                    $("#jqxWidget").html(html);
                }
            });
            // perform data binding operation.
            dataAdapter.dataBind();
        });
    </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' >
    </div>
</body>
</html>

The result of the above code is:

Data Binding to Nested JSON

In order to use a nested JSON as a data source, you will have to do the following:

1. Add the sub-collection to the dataFields array and set its type to "array". In the code below, the sub-collection's name is children.
2. Add a hierarchy object as a member of the source object.
3. Add a member called root to the hierarchy object.
4. Set the root to the sub-collection name. 
var employees = [
    {
        "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
        children: [
        { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
        { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
        { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
        { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
        {
            "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
            children: [
                    { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                    { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                    { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
            ]
        }
        ]
    }
];
// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Country', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        root: 'children'
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);

Data Binding to Nested XML

In order to use a nested XML as a data source, you will have to do the following:

1. Set the root, record and id members of the source object. For more information about these members, visit: jquery-data-adapter.htm.
2. Add a hierarchy object as a member of the source object.
3. Add root and record members to the hierarchy object to specify the nested sequence.

XML Data - employees.xml

<?xml version="1.0"?>
<Employees>
  <Employee EmployeeID="2">
    <LastName>Fuller</LastName>
    <FirstName>Andrew</FirstName>
    <Title>Vice President, Sales</Title>
    <TitleOfCourtesy>Dr.</TitleOfCourtesy>
    <BirthDate>1952-02-19</BirthDate>
    <HireDate>1992-08-14</HireDate>
    <Address>908 W. Capital Way</Address>
    <City>Tacoma</City>
    <Region>WA</Region>
    <PostalCode>98401</PostalCode>
    <Extension>3457</Extension>
    <Notes>Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.</Notes>
    <Employees>
      <Employee EmployeeID="8">
        <LastName>Callahan</LastName>
        <FirstName>Laura</FirstName>
        <Title>Inside Sales Coordinator</Title>
        <TitleOfCourtesy>Ms.</TitleOfCourtesy>
        <BirthDate>1958-01-09</BirthDate>
        <HireDate>1994-03-05</HireDate>
        <Address>4726 - 11th Ave. N.E.</Address>
        <City>Seattle</City>
        <Region>WA</Region>
        <PostalCode>98105</PostalCode>
        <Extension>2344</Extension>
        <Notes>Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.</Notes>
      </Employee>
      <Employee EmployeeID="1">
        <LastName>Davolio</LastName>
        <FirstName>Nancy</FirstName>
        <Title>Sales Representative</Title>
        <TitleOfCourtesy>Ms.</TitleOfCourtesy>
        <BirthDate>1948-12-08</BirthDate>
        <HireDate>1992-05-01</HireDate>
        <Address>
          507 - 20th Ave. E.
          Apt. 2A
        </Address>
        <City>Seattle</City>
        <Region>WA</Region>
        <PostalCode>98122</PostalCode>
        <Extension>5467</Extension>
        <Notes>Education includes a BA in psychology from Colorado State University in 1970.  She also completed "The Art of the Cold Call."  Nancy is a member of Toastmasters International.</Notes>
      </Employee>
      <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>
        <Extension>3453</Extension>
        <Notes>Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management."  He is fluent in French.</Notes>
        <Employees>
          <Employee EmployeeID="9">
            <LastName>Dodsworth</LastName>
            <FirstName>Anne</FirstName>
            <Title>Sales Representative</Title>
            <TitleOfCourtesy>Ms.</TitleOfCourtesy>
            <BirthDate>1966-01-27</BirthDate>
            <HireDate>1994-11-15</HireDate>
            <Address>7 Houndstooth Rd.</Address>
            <City>London</City>
            <Region/>
            <PostalCode>WG2 7LT</PostalCode>
            <Extension>452</Extension>
            <Notes>Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.</Notes>
          </Employee>
          <Employee EmployeeID="7">
            <LastName>King</LastName>
            <FirstName>Robert</FirstName>
            <Title>Sales Representative</Title>
            <TitleOfCourtesy>Mr.</TitleOfCourtesy>
            <BirthDate>1960-05-29</BirthDate>
            <HireDate>1994-01-02</HireDate>
            <Address>
              Edgeham Hollow
              Winchester Way
            </Address>
            <City>London</City>
            <Region/>
            <PostalCode>RG1 9SP</PostalCode>
            <Extension>465</Extension>
            <Notes>Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993.</Notes>
          </Employee>
          <Employee EmployeeID="6">
            <LastName>Suyama</LastName>
            <FirstName>Michael</FirstName>
            <Title>Sales Representative</Title>
            <TitleOfCourtesy>Mr.</TitleOfCourtesy>
            <BirthDate>1963-07-02</BirthDate>
            <HireDate>1993-10-17</HireDate>
            <Address>
              Coventry House
              Miner Rd.
            </Address>
            <City>London</City>
            <Region/>
            <PostalCode>EC2 7JR</PostalCode>
            <Extension>428</Extension>
            <Notes>Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.</Notes>
          </Employee>
        </Employees>
      </Employee>
      <Employee EmployeeID="3">
        <LastName>Leverling</LastName>
        <FirstName>Janet</FirstName>
        <Title>Sales Representative</Title>
        <TitleOfCourtesy>Ms.</TitleOfCourtesy>
        <BirthDate>1963-08-30</BirthDate>
        <HireDate>1992-04-01</HireDate>
        <Address>722 Moss Bay Blvd.</Address>
        <City>Kirkland</City>
        <Region>WA</Region>
        <PostalCode>98033</PostalCode>
        <Extension>3355</Extension>
        <Notes>Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.</Notes>
      </Employee>
      <Employee EmployeeID="4">
        <LastName>Peacock</LastName>
        <FirstName>Margaret</FirstName>
        <Title>Sales Representative</Title>
        <TitleOfCourtesy>Mrs.</TitleOfCourtesy>
        <BirthDate>1937-09-19</BirthDate>
        <HireDate>1993-05-03</HireDate>
        <Address>4110 Old Redmond Rd.</Address>
        <City>Redmond</City>
        <Region>WA</Region>
        <PostalCode>98052</PostalCode>
        <Extension>5176</Extension>
        <Notes>Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.</Notes>
      </Employee>
    </Employees>
  </Employee>
</Employees>
var source =
{
    dataType: "xml",
    dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'ReportsTo', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'City', type: 'string' },
        { name: 'Address', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'BirthDate', type: 'date' }
    ],
    hierarchy:
    {
        // defines the root and record of each hiearchy level.
        root: 'Employees',
        record: 'Employee'
    },
    id: 'EmployeeID',
    root: 'Employees',
    record: 'Employee',
    url: "employees.xml"
};
var dataAdapter = new $.jqx.dataAdapter(source);

Data Binding to Observable Array

var observableArray = new $.jqx.observableArray(array, function (changed) {
});
var source =
{
    localdata: observableArray,
    datatype: "obserableArray",
    datafields:
    [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' },
        { name: 'total', type: 'number' }
    ]
};
var dataAdapter = new $.jqx.dataAdapter(source);
Please visit: javascript-observable-array.htm for more information about observable arrays.

Methods and Properties

  • dataBind - performs data binding.
  • records - gets the array of the loaded data records when the data binding is completed.
  • beginUpdate - begins data update operation. If you need to update multiple records at once, call this method before the update.
  • endUpdate(refresh) - ends the data update operation. Performs data refresh by default, if you call the method without params or with true parameter.
  • getRecordsHierarchy - gets the array of the loaded data records and builds a data tree. 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. 
    var data = [
    { "id": "2",
        "parentid": "1",
        "text": "Hot Chocolate"
    }, {
        "id": "3",
        "parentid": "1",
        "text": "Peppermint Hot Chocolate"
    }, {
        "id": "4",
        "parentid": "1",
        "text": "Salted Caramel Hot Chocolate"
    }, {
        "id": "5",
        "parentid": "1",
        "text": "White Hot Chocolate"
    }, {
        "text": "Chocolate Beverage",
        "id": "1",
        "parentid": "-1"
    }, {
        "id": "6",
        "text": "Espresso Beverage",
        "parentid": "-1"
    }, {
        "id": "7",
        "parentid": "6",
        "text": "Caffe Americano"
    }, {
        "id": "8",
        "text": "Caffe Latte",
        "parentid": "6"
    }, {
        "id": "9",
        "text": "Caffe Mocha",
        "parentid": "6"
    }, {
        "id": "10",
        "text": "Cappuccino",
        "parentid": "6"
    }, {
        "id": "11",
        "text": "Pumpkin Spice Latte",
        "parentid": "6"
    }, {
        "id": "12",
        "text": "Frappuccino",
        "parentid": "-1"
    }, {
        "id": "13",
        "text": "Caffe Vanilla Frappuccino",
        "parentid": "12"
    }, {
        "id": "15",
        "text": "450 calories",
        "parentid": "13"
    }, {
        "id": "16",
        "text": "16g fat",
        "parentid": "13"
    }, {
        "id": "17",
        "text": "13g protein",
        "parentid": "13"
    }, {
        "id": "14",
        "text": "Caffe Vanilla Frappuccino Light",
        "parentid": "12"
    }]
    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'parentid' },
            { name: 'text' }
        ],
        id: 'id',
        localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get records.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
  • getGroupedRecords - gets the array of the loaded data records and groups them. 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. 
                                                                             
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'CompanyName', map: 'm\\:properties&gt;d\\:CompanyName' },
            { name: 'ContactName', map: 'm\\:properties&gt;d\\:ContactName' },
            { name: 'ContactTitle', map: 'm\\:properties&gt;d\\:ContactTitle' },
            { name: 'City', map: 'm\\:properties&gt;d\\:City' },
            { name: 'PostalCode', map: 'm\\:properties&gt;d\\:PostalCode' },
            { name: 'Country', map: 'm\\:properties&gt;d\\:Country' }
        ],
        root: "entry",
        record: "content",
        id: 'm\\:properties&gt;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' }]);
  • getAggregatedData - gets an array of aggregated data. 
    &lt;&gt;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;
    "yyyyy"-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.
  • formatDate

    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

    var formattedDate = dataAdapter.formatDate(new Date(), 'D')
  • formatNumber

    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

    var formattedNumber = dataAdapter.formatNumber(10, 'c2')