Getting Started

jqxGrid

The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and
editing.

Grid Features
 Data Binding - our Grid supports the following data binding options:
o Local Data - load the javascript data grid from a local array of objects.
o Xml Data - load the javascript data grid from XML data source using AJAX.
o JSON Data - load the javascript data grid from JSON data source using AJAX.
o CSV Data - load the javascript data grid from CSV.
o Tab Data - load the javascript data grid from Tab-Delimited (TSV).
o Remote Data - load the javascript data grid using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an
effective cross-domain communication technique frequently used to bypass the same-origin policy limitations.
o Virtual Data - jqxGrid can be populated with data on demand when the user scrolls or changes the current page.
 Outlook-Style Grouping - the Grid can group data by dragging Grid columns into a toolbar above the Grid. Grouping can be achieved through API as well.
 Sorting - one-click automatic sorting, selection of sort option from a context menu and sorting through API calls. The data grid automatically chooses the most
appropriate comparison. Users can also implement and use a custom sort comparer functions. The sorting works well with all possible configurations
including rows grouping and paging.
 Filtering - users can filter data in two ways - through a context menu integrated in the Grid, or via a filter row.
 Paging
 Editing and Validation
 Nested Grids
 Row Details
 Localization
 Column Types
 Columns Resizing
 Columns Reorder
 Columns Hierarchy
 Pinned Columns
 Foreign Columns
 Cells Formatting
 Custom Grid Filters
  Custom Cells Rendering
 Custom Cell Editors
 Rows and Cells Selection
 Aggregates
 Export to Excel, XML, HTML, CSV, TSV, PDF and JSON
 Printing
 Responsive Size with Fluid dimensions
 Accessibility
 Keyboard Navigation
 State Maitenance

Getting Started

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxGrid widget requires the following files:

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />

<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
jqxGrid uses jQuery for basic JavaScript tasks like elements selection and events handling. You need to include the jQuery javascript file, the jQWidgets core
framework file - jqxcore.js, the jQWidgets data binding file - jqxdata.js, the main jqxGrid plug-in file - jqxgrid.js file, the jQWidgets Scrollbar plug-in - jqxbutton.js and
jqxscrollbar.js(used for the Grid scrolling), the jQWidgets Menu plug-in - jqxmenu.js(used for the Grid Columns menu), jQWidgets DropDownList plug-in(used in the
Grid Pager and Filtering panel) - jqxlistbox.js and jqxdropdownlist.js, and the base jQWidgets stylesheet - jqx.base.css:

Grid Modules
 jqxgrid.js - Base Grid.
 jqxgrid.grouping.js - This module adds a grouping feature into the Grid(optional).
 jqxgrid.sort.js - This module adds a sorting feature into the Grid(optional).
 jqxgrid.filter.js - This module adds a filtering feature into the Grid(optional).
 jqxgrid.pager.js - This module adds a paging feature into the Grid(optional).
 jqxgrid.columnsresize.js - This module adds a columns resizing feature into the Grid(optional).
 jqxgrid.columnsreorder.js - This module adds a columns reorder feature into the Grid(optional).
 jqxgrid.selection.js - This module adds a rows selection feature into the Grid(optional).
 jqxgrid.edit.js - This module adds a cell editing feature into the Grid(optional).
 jqxgrid.aggregates.js - This module adds an option to display aggregates in the Grid(optional).
 jqxgrid.storage.js - This module adds an option to save and load the Grid's state(optional).
 jqxgrid.export.js and jqxdata.export.js - This module adds an option to export the Grid's data to Excel, XML, CSV, TSV, HTML and JSON(optional).

The next step is to create a DIV element within the body of the html document.
<div id="jqxgrid">
</div>

The last step is to initialize the widget. In order to initialize the Grid, you need to set its source and columns properties. Add the following script to the html
document:
// 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 < 1000; 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, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
]
});

To set a property(option), you need to pass the property name and value(s) in the jqxGrid's constructor.
$("#grid").jqxGrid({ disabled: true});

To get a property(option), you need to pass the property name to the jqxGrid's constructor.
var disabled = $("#grid").jqxGrid('disabled');

To call a function, you need to pass the function name and parameters(if any).
$("#jqxgrid").jqxGrid('selectrow', 1);

To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get when the user selects a row. The example code below
demonstrates how to bind to the ‘rowselect’ event of jqxGrid.
$("#jqxgrid").on('rowselect', function (event) {
var rowindex = event.args.rowindex;
});

Basic Grid Sample

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to create a Grid from Array data.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript">
$(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 < 100; 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, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
 { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

Grid Data Sources

jqxGrid
The Grid plugin can be bound to multiple types of data collections including arrays, xml, json, tsv, csv or remote data. To data bind the Grid to a data source
you need to set its source property to point to an instance of jqxDataAdapter.
The source object represents a set of key/value pairs.
 url: A string containing the URL to which the request is sent.
 data: Data to be sent to the server.
 localdata: data array or data string pointing to a local data source.
 datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
 type: The type of request to make ("POST" or "GET"), default is "GET".
 id: A string containing the Id data field.
 root: A string describing where the data begins and all other loops begin from this element.
 record: A string describing the information for a particular record.
var source =
{
 datatype: "xml",
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties&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: 'orders.xml'
};

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

XML
<content type="application/xml">
<m:properties>
<d:CustomerID>ALFKI</d:CustomerID>
<d:CompanyName>Alfreds Futterkiste</d:CompanyName>
<d:ContactName>Maria Anders</d:ContactName>
<d:ContactTitle>Sales Representative</d:ContactTitle>
<d:Address>Obere Str. 57</d:Address>
<d:City>Berlin</d:City>
<d:Region m:null="true" />
<d:PostalCode>12209</d:PostalCode>
<d:Country>Germany</d:Country>
<d:Phone>030-0074321</d:Phone>
<d:Fax>030-0076545</d:Fax>
</m:properties>
</content>
Example with nested JSON data.
var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'empName' },
{ name: 'age' },
{ name: 'id', map: 'department&gt;id' },
{ name: 'name', map: 'department&gt;name' },
{ name: 'author' }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

Example #2 with XML Attributes Let's load the following data into the Grid from a file named customers.xml.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<Customers>
<Customer CustomerID="1" Name="Customer 1"></Customer>
<Customer CustomerID="2" Name="Customer 2"></Customer>
</Customers>

Initialize the jqxDataAdapter plug-in.

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

Initialize the jqxGrid.

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

Example #3 with nested JSON data.

var data = [
{
"state": {
"id": "x526",
"city": {
"name": "Beverly Hills",
"id": 90210,
"value": "Beverly Hills"
}
}
}
];
var source = {
datatype: 'json',
localdata: data,
datafields:
[
{
name: 'cityName', map: 'state&gt;city&gt;name'
}
 ]
};
var dataAdapter = new $.jqx.dataAdapter(source);

o values - determines the foreign collection associated to the data field.

Example with "values" This functionality allows you to join two or more data sources.
var employeesSource =
{
datatype: "xml",
datafields: [
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' }
],
root: "Employees",
record: "Employee",
id: 'EmployeeID',
url: "../sampledata/employees.xml",
async: false
};
var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
// update the loaded records. Dynamically add EmployeeName and EmployeeID fields.
for (var i = 0; i < records.length; i++) {
var employee = records[i];
employee.EmployeeName = employee.FirstName + " " + employee.LastName;
employee.EmployeeID = employee.uid;
data.push(employee);
}
return data;
}
});
// prepare the data
var ordersSource =
{
 datatype: "xml",
datafields: [
// name - determines the field's name.
// value - the field's value in the data source.
// values - specifies the field's values.
// values.source - specifies the foreign source. The expected value is an array.
// values.value - specifies the field's name in the foreign source.
// values.name - specifies the field's value in the foreign source.
// When the ordersAdapter is loaded, each record will have a field called "EmployeeName". The "EmployeeName"
for each record comes from the employeesAdapter where the record's "EmployeeID" from orders.xml matches to the
"EmployeeID" from employees.xml.
{ name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value:
'EmployeeID', name: 'EmployeeName' } },
{ name: 'EmployeeID', map: 'm\\:properties&gt;d\\:EmployeeID' },
{ name: 'ShippedDate', map: 'm\\:properties&gt;d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties&gt;d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties&gt;d\\:ShipName' },
{ name: 'ShipAddress', map: 'm\\:properties&gt;d\\:ShipAddress' },
{ name: 'ShipCity', map: 'm\\:properties&gt;d\\:ShipCity' },
{ name: 'ShipCountry', map: 'm\\:properties&gt;d\\:ShipCountry' }
],
root: "entry",
record: "content",
id: 'm\\:properties&gt;d\\:OrderID',
url: "../sampledata/orders.xml",
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};
var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
 pagenum - determines the initial page number when paging is enabled.
 pagesize - determines the page size when paging is enabled.
 pager - callback function called when the current page or page size is changed.
pager: function (pagenum, pagesize, oldpagenum) {
}
 sortcolumn - determines the initial sort column. The expected value is a data field name.
 sortdirection - determines the sort order. The expected value is 'asc' for (A to Z) sorting or 'desc' for (Z to A) sorting.
 sort - callback function called when the sort column or sort order is changed.
sort: function (column, direction) {
}
 filter - callback function called when a filter is applied or removed.
filter: function (filters, recordsArray)
{
}
 addrow - callback function, called when a new row is/are added. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids
and rows.
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server - send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
}
 deleterow - callback function, called when a row is deleted. If multiple rows are deleted, the rowid parameter is an array of row ids.

deleterow: function (rowid, commit) {

// synchronize with the server - send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
}
 updaterow - callback function, called when a row is updated. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and
rows.
Example:
updaterow: function (rowid, newdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
 processdata - extend the default data object sent to the server.
var source =
 {
datatype: "jsonp",
datafields: [
{ name: 'countryName' },
{ name: 'name' },
{ name: 'population', type: 'float' },
{ name: 'continentCode' }
],
url: "http://ws.geonames.org/searchJSON",
processdata: function (data) {
data.featureClass = "P";;
data.style = "full";
data.maxRows = 50;
}
};
 formatdata - Before the data is sent to the server, you can fully override it by using the 'formatdata' function of the source object. The result that the
'formatdata' function returns is actually what will be sent to the server.
var source =
{
datatype: "jsonp",
datafields: [
{ name: 'countryName' },
{ name: 'name' },
{ name: 'population', type: 'float' },
{ name: 'continentCode' }
],
url: "http://ws.geonames.org/searchJSON",
data: {
featureClass: "P",
style: "full",
maxRows: 50
},
formatdata: function (data) {
return "my data";
}
};
 contenttype: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".
The example code below illustrates how to create jqxDataAdapter from a source object.
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data)
{
// data is loaded.
},
loadError: function (xhr, status, error)
{
// data is not loaded.
}
});

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

Example with 'ready' callback:

var url = "../sampledata/beverages.txt";
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'name' },
{ name: 'type' },
{ name: 'calories', type: 'int' },
{ name: 'totalfat' },
{ name: 'protein' }
],
id: 'id',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
 width: 400,
source: dataAdapter,
ready: function () {
$("#jqxgrid").jqxGrid('hidecolumn', 'name');
},
columnsresize: true,
columns: [
{ text: 'Name', datafield: 'name', width: 250 },
{ text: 'Beverage Type', datafield: 'type', width: 250 },
{ text: 'Calories', datafield: 'calories', width: 180 },
{ text: 'Total Fat', datafield: 'totalfat', width: 120 },
{ text: 'Protein', datafield: 'protein', minwidth: 120 }
]
});
Example with 'bindingcomplete':
var url = "../sampledata/beverages.txt";
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'name' },
{ name: 'type' },
{ name: 'calories', type: 'int' },
{ name: 'totalfat' },
{ name: 'protein' }
],
id: 'id',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").bind('bindingcomplete', function (event) {
$("#jqxgrid").jqxGrid('hidecolumn', 'name');
});
$("#jqxgrid").jqxGrid(
{
width: 400,
source: dataAdapter,
 columnsresize: true,
columns: [
{ text: 'Name', datafield: 'name', width: 250 },
{ text: 'Beverage Type', datafield: 'type', width: 250 },
{ text: 'Calories', datafield: 'calories', width: 180 },
{ text: 'Total Fat', datafield: 'totalfat', width: 120 },
{ text: 'Protein', datafield: 'protein', minwidth: 120 }
]
});
Initialize a Grid with the source property specified.

Bind the Grid to an array.

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

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid populated from Array.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin",
"Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
 [
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson",
"Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha",
"Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 50; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
 width: 670,
source: dataAdapter,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

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

To refresh the Grid, you need to simply set its 'source' property again.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid populated from Array.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var generatedata = function (rowscount) {
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 < rowscount; 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;
}
 return data;
}
var source =
{
localdata: generatedata(50),
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
]
});
// refresh Grid data.
$('input').click(function () {
source.localdata = generatedata(50);
$("#jqxgrid").jqxGrid({ source: source });
});
});
</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 id="jqxgrid"></div>
 <input type="button" value="Refresh Data" />
</div>
</body>
</html>

Bind the Grid to XML data.

In the source initialization, you need to set the following:

- url of a xml file.
- id field.
- root data record.
- record - this is the data record which will be displayed as a row in the Grid.
- datatype - 'xml'
- datafields - the record's member names. You can also specify the mapping to the member's data.

Code Example:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

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

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to create a Grid from XML data.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = "customers.xml";

// prepare the data

var source =
{
datatype: "xml",
datafields: [
{ name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
{ name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
{ name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
{ name: 'City', map: 'm\\:properties>d\\:City' },
{ name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
{ name: 'Country', map: 'm\\:properties>d\\:Country' }
],
root: "entry",
record: "content",
id: 'm\\:properties>d\\:CustomerID',
 url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// Create jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 250 },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'City', datafield: 'City', width: 120 },
{ text: 'Postal Code', datafield: 'PostalCode', width: 90 },
{ text: 'Country', datafield: 'Country', width: 100 }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

You can also set the datafield's type in the source object initialization.
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: url,
sortcolumn: 'ShipName',
sortdirection: 'asc'
};

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

Bind the Grid to JSON data.

When you bind the Grid to JSON data, you need to set the source object's datatype to 'json'.
Sample JSON data:
[
{"id": "1","name": "Hot Chocolate","type": "Chocolate Beverage","calories": "370","totalfat": "16g","protein": "14g"},
{"id": 2, "name": "Peppermint Hot Chocolate","type": "Chocolate Beverage","calories": "440","totalfat": "16g","protein": "13g"},
{"id": "3","name": "Salted Caramel Hot Chocolate","type": "Chocolate Beverage","calories": "450","totalfat": "16g","protein": "13g"},
{"id": "4","name": "White Hot Chocolate","type": "Chocolate Beverage","calories": "420","totalfat": "16g","protein": "12g"},
{"id": "5","name": "Caffe Americano","type": "Espresso Beverage","calories": "15","totalfat": "0g","protein": "1g"},
{"id": "6","name": "Caffe Latte","type": "Espresso Beverage","calories": "190","totalfat": "7g","protein": "12g"},
{"id": "7","name": "Caffe Mocha","type": "Espresso Beverage","calories": "330","totalfat": "15g","protein": "13g"},
{"id": "8","name": "Cappuccino","type": "Espresso Beverage","calories": "120","totalfat": "4g","protein": "8g"},
{"id": "9","name": "Caramel Brulee Latte", "type": "Espresso Beverage","calories": "420","totalfat": "9g","protein": "8g"},
{"id": "10","name": "Caramel Macchiato","type": "Espresso Beverage","calories": "240","totalfat": "11g","protein": "10g"},
{"id": "11","name": "Peppermint Hot Chocolate","type": "Espresso Beverage","calories": "440","totalfat": "10g","protein": "13g"},
{"id": "12","name": "Cinnamon Dolce Latte","type": "Espresso Beverage","calories": "260","totalfat": "6g","protein": "10g"},
{"id": "13","name": "Eggnog Latte","type": "Espresso Beverage","calories": "460","totalfat": "16g","protein": "13g"},
{"id": "14","name": "Espresso","type": "Espresso Beverage","calories": "5","totalfat": "1g","protein": "1g"},
{"id": "15","name": "Espresso Con Panna","type": "Espresso Beverage","calories": "30","totalfat": "1g","protein": "0g"},
{"id": "16","name": "Espresso Macchiato","type": "Espresso Beverage","calories": "100","totalfat": "1g","protein": "0g"},
{"id": "17","name": "Flavored Latte","type": "Espresso Beverage","calories": "250","totalfat": "6g","protein": "12g"},
{"id": "18","name": "Gingerbread Latte","type": "Espresso Beverage","calories": "320","totalfat": "13g","protein": "12g"},
{"id": "19","name": "White Chocolate Mocha","type": "Espresso Beverage","calories": "470","totalfat": "18g","protein": "15g"},
{"id": 20, "name": "Skinny Peppermint Mocha","type": "Espresso Beverage","calories": 130, "totalfat": "15g","protein": "13g"},
{"id": "21","name": "Skinny Flavored Latte","type": "Espresso Beverage","calories": "120","totalfat": "0g","protein": "12g"},
{"id": "22","name": "Pumpkin Spice Latte","type": "Espresso Beverage","calories": "380","totalfat": "13g","protein": "14g"},
{"id": "23","name": "Caffe Vanilla Frappuccino","type": "Frappuccino Blended Beverage","calories": "310","totalfat": "3g","protein": "3g"},
{"id": "24","name": "Caffe Vanilla Frappuccino L","type": "Frappuccino Blended Beverage","calories": "180","totalfat": "0g","protein": "3g"},
{"id": "25","name": "Caramel Brulee Frappuccino","type": "Frappuccino Blended Beverage","calories": "410","totalfat": "13g","protein": "4g"},
{"id": "26","name": "Caramel Brulee Frappuccino L","type": "Frappuccino Blended Beverage","calories": "190","totalfat": "0g","protein": "3g"},
{"id": "27","name": "Eggnog Frappuccino","type": "Frappuccino Blended Beverage","calories": "420","totalfat": "18g","protein": "7g"},
{"id": "28","name": "Mocha Frappuccino","type": "Frappuccino Blended Beverage","calories": "400","totalfat": "15g","protein": "5g"},
{"id": "29","name": "Tazo Green Tea Frappuccino","type": "Frappuccino Blended Beverage","calories": "430","totalfat": "16g","protein": "6g"}
]

Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid populated from JSON.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = "beverages.txt";
// prepare the data
var source =
{
datatype: "json",
datafields: [{ name: 'name' },{ name: 'type' },{ name: 'calories' },{ name: 'totalfat' },{ name: 'protein' },],
id: 'id',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columns: [
{ text: 'Name', datafield: 'name', width: 250 },
{ text: 'Beverage Type', datafield: 'type', width: 250 },
{ text: 'Calories', datafield: 'calories', width: 180 },
{ text: 'Total Fat', datafield: 'totalfat', width: 120 },
{ text: 'Protein', datafield: 'protein', width: 120 }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
 <div id="jqxgrid"></div>
</div>
</body>
</html>
If you want to bind the Grid to JSONP data, then you need to set the source object's datatype to 'jsonp'.

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

When you bind the Grid to TSV data, you need to set the source object's datatype to 'tab'.
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to create a Grid from Tab-delimited text also known as tab-separated values
(TSV).</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "tab",
datafields: [
{ name: 'Year', type: 'int' },
{ name: 'HPI', type: 'float' },
{ name: 'BuildCost', type: 'float' },
 { name: 'Population', type: 'float' },
{ name: 'Rate', type: 'float' }
],
url: 'homeprices.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150 },
{ text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100 },
{ text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'c2', width: 180 },
{ text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100 },
{ text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
</div>
</body>
</html>

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

When you bind the Grid to CSV data, you need to set the source object's datatype to 'csv'.
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to create a Grid from Tab-delimited text also known as tab-separated values
(TSV).</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "tab",
datafields: [
{ name: 'Year', type: 'int' },
{ name: 'HPI', type: 'float' },
{ name: 'BuildCost', type: 'float' },
{ name: 'Population', type: 'float' },
{ name: 'Rate', type: 'float' }
],
url: 'homeprices.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150 },
 { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100 },
{ text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'c2', width: 180 },
{ text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100 },
{ text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
</div>
</body>
</html>

Additional properties of the source object:

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

Grid Sorting
(requires jqxgrid.sort.js)

The sortable property enables or disables the data sorting. The Grid sorting logic is implemented in the jqxgrid.sort.js and you need to reference that
javascript file. In the code example below, the Grid data sorting is enabled.

$("#jqxgrid").jqxGrid(
{
width: 670,
height: 450,
source: source,
theme: theme,
sortable: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
]
});

To enable or disable the sorting of a Grid column, you can set its sortable property to false. In the code example below, the sorting of the "ShipName" column
is disabled.

$("#jqxgrid").jqxGrid(
{width: 670, height: 450, source: source, theme: theme, sortable: true, columns:
[
{ text: 'Ship Name', datafield: 'ShipName', width: 250, sortable: false },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
 { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
]
});

When the sorting data type is Date, Number or Boolean, the 'type' property in the 'datafields' array should be set.
In this code example, the data type of the ShippedDate column is Date and the "type" property is set to "date". The Freight column displays floating-point
numbers and the 'type' property is set to 'float'.

var source =
{
datatype: "xml",
datafields: [
{ name: 'ShippedDate', type: 'date' },
{ name: 'Freight', type: 'float' },
{ name: 'ShipName' },
{ name: 'ShipAddress'},
{ name: 'ShipCity'},
{ name: 'ShipCountry' }
],
root: "entry",
record: "content",
id: 'OrderID',
url: url,
sortcolumn: 'ShipName',
sortdirection: 'asc'
};
The 'sortcolumn' property specifies the default Grid sort column, i.e. when the grid is displayed, the data will be sorted. The 'sortdirection' property specifies
the sort order of the sort column.

Sorting with the Grid API.

The sortby function can be used to sort the Grid through the API. This function should be called when the grid data is fully loaded. The first parameter is the
Column's DataField. The second parameter is the sort order - 'asc' or 'desc'.

$("#jqxgrid").bind('bindingcomplete', function()
{
$("#jqxgrid").jqxGrid('sortby', 'ShipName', 'asc');
});

To remove the sorting, call the "removesort" function.

When the data is sorted, the Grid raises the 'sort' event.

$("#jqxgrid").bind("sort", function (event) {

var sortinformation = event.args.sortinformation;
var sortdirection = sortinformation.sortdirection;
var sortcolumn = sortinformation.sortcolumn;
});

By default, when the sorting is enabled and the user clicks a column's header, the sort order is changed. The jqxGrid 'sorttogglestates' property can be used
to modify this behavior. The possible values of this property are:

0 - disables toggling. The Grid is sortable only through the API.

1 - enables togging. Click on a column header toggles the sort direction. In this mode, there are 2 possible sort direction values - 'asc', and 'desc'.
2 - default toggle mode. Click on a column header toggles the sort direction. In this mode, there are 3 possible sort direction values - 'asc', 'desc' and null.
When the sort direction is null, the sorting is cleared.

Custom Sorting

To override the default sorting logic, you need to set the 'sort' member of the Grid's source object to a custom sorting function. The Grid will pass two
parameters to this function - the sort column's datafield and the sort direction.

var customsortfunc = function (column, direction) {

var sortdata = new Array();
if (direction == 'ascending') direction = true;
if (direction == 'descending') direction = false;
if (direction != null) {
for (i = 0; i < data.length; i++) {
sortdata.push(data[i]);
}
}
else sortdata = data;
 var tmpToString = Object.prototype.toString;
Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
if (direction != null) {
sortdata.sort(compare);
if (!direction) {
sortdata.reverse();
}
}
source.localdata = sortdata;
$("#jqxgrid").jqxGrid('databind', source);
Object.prototype.toString = tmpToString;
}
// custom comparer.
var compare = function (value1, value2) {
value1 = String(value1).toLowerCase();
value2 = String(value2).toLowerCase();
try {
var tmpvalue1 = parseFloat(value1);
if (isNaN(tmpvalue1)) {
if (value1 < value2) { return -1; }
if (value1 > value2) { return 1; }
}
else {
var tmpvalue2 = parseFloat(value2);
if (tmpvalue1 < tmpvalue2) { return -1; }
if (tmpvalue1 > tmpvalue2) { return 1; }
}
}
catch (error) {
var er = error;
}
return 0;
};
var source =
{
localdata: data,
sort: customsortfunc,
datatype: "array"
};
For Server-Side sorting, see the Server-side processing with PHP and MySQL help topic.

Grid Filtering
(requires jqxgrid.filter.js)

To enable the filtering feature, you need to set the 'filterable' property to true and add a reference to the jqxgrid.filter.js file. When the value of the filterable
property is true, the Grid displays a filtering panel in the columns popup menus. jqxGrid has several methods that allow you to handle the data filtering –
addfilter, removefilter, applyfilters and clearfilters. The first method adds a filter to a grid column. The ‘removefilter’ method removes a filter from a grid
column. The ‘applyfilters’ method applies all filters to the grid and refreshes its contents. The last method clears the filtering.

Let’s see how to add a filter:

1. The first step is to create a filter group. The filter group is a group of one or more filtering criterias.

var filtergroup = new $.jqx.filter();

2. The next step is to create the filters. Each filter must have a filter value – this is the value we compare each cell value with. The filter condition specifies how
the filter will compare each cell value with the filter value. The filter condition value depends on the filter’s type(jqxGrid supports string, numeric and date
filters). If you want to get the list of the supported grid filtering conditions, you can use the ‘getoperatorsbyfiltertype’ method of filter group.The createfilter
method is used to create the filter.

var filtervalue = 'Beate';

var filtercondition = 'contains';
// possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN',
'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
// possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN',
'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
3. The third step is to add the filters to the filter group. In the code example below, we added two filters in the filter group with operator ‘or’. This means that
each cell value will be evaluated by filter1 and filter2 and the evaluation result will be true, if the filter1′s returned value is true or filter2′s returned value is
true.

var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
4. In the final step, we add the filter group to the first column and apply the filters by calling the ‘applyfilters’ method.

// add the filters.

$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
If you want to remove the filter, call the ‘removefilter’ method and then the ‘applyfilters’ method.

$("#jqxgrid").jqxGrid('removefilter', 'firstname');
$("#jqxgrid").jqxGrid('applyfilters');
If you want to clear all filters, use the ‘clearfilters’ method.

$("#jqxgrid").jqxGrid('clearfilters');
For Server-Side filtering, see the Server-side processing with PHP and MySQL help topic.

Custom Filter Conditions

To customzie the filter conditions, you need to do the following:
1. Update the Localization Strings. The filter conditions displayed in the filter dropdowns are loaded from the jqxGrid's localization object. *Bind to the
bindingcomplete event before the Grid's initialization.

$("#jqxgrid").bind('bindingcomplete', function () {
var localizationobj = {};
filterstringcomparisonoperators = ['empty', 'not empty', 'contains', 'contains(match case)',
'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'];
filternumericcomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than
or equal', 'null', 'not null'];
filterdatecomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or
equal', 'null', 'not null'];
filterbooleancomparisonoperators = ['equal', 'not equal'];
 localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators;
localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators;
localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators;
localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators;
// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);
});
2. The second step is to update the conditions within the Filter object. In order to achieve that, you need to add a function called "updatefilterconditions".
That function is invoked by jqxGrid with 2 parameters - the type of the filter and the default filter conditions. As a result, the function should return an array
of strings depending on the filter's type. That array will be used by the filter object..

$("#jqxgrid").jqxGrid(
{
source: source,
filterable: true,
sortable: true,
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'];
var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN',
'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN',
'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
switch (type) {
case 'stringfilter':
return stringcomparisonoperators;
case 'numericfilter':
return numericcomparisonoperators;
case 'datefilter':
return datecomparisonoperators;
case 'booleanfilter':
return booleancomparisonoperators;
}
},
autoshowfiltericon: true,
columns: [
 { text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
]
});

Add filters to multiple columns through the API.

var data = generatedata(500);
var source = {localdata: data, datatype: "array"};
var addfilter = function () {
// create a filter group for the FirstName column.
var fnameFilterGroup = new $.jqx.filter();
// operator between the filters in the filter group. 1 is for OR. 0 is for AND.
var filter_or_operator = 1;
// create a string filter with 'contains' condition.
var filtervalue = 'Beate';
var filtercondition = 'contains';
var fnameFilter1 = fnameFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
// create second filter.
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var fnameFilter2 = fnameFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
// add the filters to the filter group.
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter1);
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter2);
// add the filter group to the 'firstname' column in the Grid.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', fnameFilterGroup);
// create a filter group for the Quantity column.
var quantityFilterGroup = new $.jqx.filter();
// create a filter.
var filter_or_operator = 1;
var filtervalue = 3;
var filtercondition = 'less_than';
 var quantityFilter1 = quantityFilterGroup.createfilter('numericfilter', filtervalue, filtercondition);
quantityFilterGroup.addfilter(filter_or_operator, quantityFilter1);
// add the filter group to the 'quantity' column in the Grid.
$("#jqxgrid").jqxGrid('addfilter', 'quantity', quantityFilterGroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 670, source: adapter, filterable: true, sortable: true, ready: function () {addfilter();},autoshowfiltericon: true,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', width: 90 },
{ text: 'Product', datafield: 'productname', width: 170 },
{ text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
]
});
*generatedata function is implemented in the generatedata.js. The file is included in the download package and can be found in the
installation_folder/demos/jqxgrid folder.

By default the filter groups are combined with 'AND' operator. That means that the Grid will display records if they meet the criteria of the filter group applied
to column 1 and the filter group applied to column 2, etc. You can create any combination of filter groups using 'AND' and 'OR'.
The example below illustrates how:

var data = generatedata(500);

var source =
{
localdata: data,
datatype: "array"
};
var addfilter = function () {
// create a filter group for the FirstName column.
var fnameFilterGroup = new $.jqx.filter();
 fnameFilterGroup.operator = 'or';
// operator between the filters in the filter group. 1 is for OR. 0 is for AND.
var filter_or_operator = 1;
// create a string filter with 'contains' condition.
var filtervalue = 'Beate';
var filtercondition = 'contains';
var fnameFilter1 = fnameFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
// create second filter.
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var fnameFilter2 = fnameFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
// add the filters to the filter group.
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter1);
fnameFilterGroup.addfilter(filter_or_operator, fnameFilter2);
// add the filter group to the 'firstname' column in the Grid.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', fnameFilterGroup);
// create a filter group for the Quantity column.
var quantityFilterGroup = new $.jqx.filter();
quantityFilterGroup.operator = 'or';
// create a filter.
var filter_or_operator = 1;
var filtervalue = 3;
var filtercondition = 'less_than';
var quantityFilter1 = quantityFilterGroup.createfilter('numericfilter', filtervalue, filtercondition);
quantityFilterGroup.addfilter(filter_or_operator, quantityFilter1);
// add the filter group to the 'quantity' column in the Grid.
$("#jqxgrid").jqxGrid('addfilter', 'quantity', quantityFilterGroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: adapter,
filterable: true,
sortable: true,
ready: function () {
addfilter();
 },
autoshowfiltericon: true,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', width: 90 },
{ text: 'Product', datafield: 'productname', width: 170 },
{ text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
]
});
Using te above code, jqxGrid will display any record which meets at least one of the filtering criterias i.e a record is displayed, if it meets the condition of the
'FirstName' column's filter group or the one of the 'Quantity' column's filter group.

Paging
(requires jqxgrid.pager.js)

The Grid plugin has a built-in paging capability that supports paging functionality. The paging functionality is implemented in the jqxgrid.pager.js and is
enabled when the 'pageable' property is set to true. The code example below illustrates how to enable the paging functionality.

$("#jqxgrid").jqxGrid(
{
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
]
});
When a page is changed or the page size is changed, the Grid raises the pagechanged or pagesizechanged events.
$("#jqxgrid").bind("pagechanged", function (event) {
var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;
});
$("#jqxgrid").bind("pagesizechanged", function (event) {
var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;
});

Basic Grid with Paging

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example illustrates how to customize the Grid plugin's Pager.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 < 100; 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 pagerrenderer = function () {
var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
for (i = 0; i < paginginfo.pagescount; i++) {
// add anchor tag with the page number for each page.
var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
 anchor.appendTo(element);
anchor.click(function (event) {
// go to a page.
var pagenum = parseInt($(event.target).text());
$("#jqxgrid").jqxGrid('gotopage', pagenum);
});
}
return element;
}
$("#jqxgrid").jqxGrid(
{width: 670, source: source, pageable: true, autoheight: true, pagerrenderer: pagerrenderer,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
</body>
</html>

The Grid Page Size options are displayed in a DropDownList plugin in the pager area. By default, the size options are 5, 10 and 20. The 'pagesizeoptions'
property enables you to set new size options.

$('#grid').jqxGrid({ pagesizeoptions: ['10', '20', '30']});

The 'pagesize' property sets the default page size when the paging functionality is enabled. By default the Grid displays 10 rows in a page.

The 'pagerrenderer' property allows you to customize the UI of the Grid pager. In the sample below, we create a pagerrenderer function and inside the
function, we build a DIV element with anchor tags. Each anchor tag has a page number as text. When the user clicks an anchor tag, the Grid calls the
'gotopage' function to navigate to a page. The 'pagerrenderer' function returns the DIV element as a result. This element is then internally appended to the
Grid's pager area.

Grid with custom Paging

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example illustrates how to customize the Grid plugin's Pager.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 < 100; 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 pagerrenderer = function () {
var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
for (i = 0; i < paginginfo.pagescount; i++) {
// add anchor tag with the page number for each page.
var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
anchor.appendTo(element);
anchor.click(function (event) {
 // go to a page.
var pagenum = parseInt($(event.target).text());
$("#jqxgrid").jqxGrid('gotopage', pagenum);
});
}
return element;
}
$("#jqxgrid").jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
pagerrenderer: pagerrenderer,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
</body>
</html>

To navigate to a page with the Grid API, use the 'gotopage' function.
$("#jqxgrid").jqxGrid('gotopage', 1);

The 'gotoprevpage' function navigates with 1 page before the current page.
The 'gotonextpage' function navigates with 1 page after the current page.

For Server-Side paging, see the Server-side processing with PHP and MySQL help topic.

Grid Rows Grouping

(requires jqxgrid.grouping.js)

The Grid plugin supports data grouping against one or more columns.

Grouping is allowed if the 'groupable' property is set to true and there's a reference to the jqxgrid.grouping.js file. End-users can group data by dragging
column headers to the Group Panel. This panel's visibility is controlled by the showgroupsheader property.

The code example below initializes a Grid with one grouping column.

$("#jqxgrid").jqxGrid(
{
source: source,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry' }
],
groupable: true,
groups: ['ShipCity']
});

Basic Grid with Grouping

<!DOCTYPE html>
<html lang="en">
<head>
 <title id='Description'>This example illustrates how to enable the jQuery Grid Grouping functionality.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin",
"Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson",
"Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha",
"Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 50; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
 var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
$("#jqxgrid").jqxGrid(
{
height: 300,
source: source,
groupable: true,
columns: [
{ text: 'First Name', datafield: 'firstname' },
{ text: 'Last Name', datafield: 'lastname' },
{ text: 'Product', datafield: 'productname' }
],
groups: ['productname']
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>
To hide the grouping panel, set the 'showgroupsheader' property to false.

$("#jqxgrid").jqxGrid('showgroupsheader', false);

The 'addgroup', 'insertgroup', 'removegroup' and 'removegroupat' functions enable groups manipulation with the Grid API.

$("#jqxgrid").jqxGrid('addgroup', 'lastname');

*The functions should be called after the Grid data is loaded. When the data is loaded and the Grid is ready, the 'bindingcomplete' event is raised.
The 'closeablegroups' property enables or disables the close buttons displayed in each group header.

$("#jqxgrid").jqxGrid('closeablegroups', false);

The 'expandgroup' and 'collapsegroup' functions expand or collapse a group at a specific index. The code below expands the second group:

$("#jqxgrid").jqxGrid('expandgroup', 1);

The 'expandallgroups' and 'collapseallgroups' functions expand or collapse all groups in the Grid.

$("#jqxgrid").jqxGrid('expandallgroups');

When a group is expanded or collapsed, the 'groupexpand' or 'groupcollapse' event is raised.

$("#jqxgrid").on('groupexpand', function (event) {

var args = event.args;
var group = args.group;
var level = args.level;
});
The 'groupsexpandedbydefault' Boolean property specifies the default state of the groups when displayed in the Grid. By default all groups are collapsed.

Grid Localization
jqxGrid
The Grid plugin can localize all the displayed strings by passing a localization object to the 'localizestrings' function.

var localizationobj = {};

localizationobj.pagergotopagestring = "Gehe zu:";
localizationobj.pagershowrowsstring = "Zeige Zeile:";
localizationobj.pagerrangestring = " von ";
localizationobj.pagernextbuttonstring = "voriger";
localizationobj.pagerpreviousbuttonstring = "nächster";
localizationobj.sortascendingstring = "Sortiere aufsteigend";
localizationobj.sortdescendingstring = "Sortiere absteigend";
localizationobj.sortremovestring = "Entferne Sortierung";
// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);

Grid Localization Sample

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid with localization.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 < 100; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
var date = new Date();
date.setDate(Math.floor(Math.random() * 27));
date.setMonth(Math.floor(Math.random() * 12));
row["name"] = firstNames[Math.floor(Math.random() * firstNames.length)] + ' ' +
lastNames[Math.floor(Math.random() * lastNames.length)];
row["date"] = date;
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
$("#jqxgrid").jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: 'Name', datafield: 'name', width: 130 },
{ text: 'Order Date', datafield: 'date', cellsformat: 'D' },
{ text: 'Product', datafield: 'productname', width: 160 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
]
});
var localizationobj = {};
localizationobj.pagergotopagestring = "Gehe zu:";
localizationobj.pagershowrowsstring = "Zeige Zeile:";
localizationobj.pagerrangestring = " von ";
localizationobj.pagernextbuttonstring = "voriger";
localizationobj.pagerpreviousbuttonstring = "nächster";
localizationobj.sortascendingstring = "Sortiere aufsteigend";
localizationobj.sortdescendingstring = "Sortiere absteigend";
localizationobj.sortremovestring = "Entferne Sortierung";
localizationobj.firstDay = 1;
localizationobj.percentsymbol = "%";
localizationobj.currencysymbol = "€";
localizationobj.currencysymbolposition = "before";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";
var days = {
// full day names
names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
// abbreviated day names
namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
 // shortest day names
namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober",
"November", "Dezember", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
};
localizationobj.months = months;
// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);
});
</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 style="overflow: hidden;" class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

Default Localization Members

{
// 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"
},
percentsymbol: "%",
currencysymbol: "$",
currencysymbolposition: "before",
decimalseparator: '.',
thousandsseparator: ',',
pagergotopagestring: "Go to page:",
pagershowrowsstring: "Show rows:",
pagerrangestring: " of ",
pagerpreviousbuttonstring: "previous",
pagernextbuttonstring: "next",
groupsheaderstring: "Drag a column and drop it here to group by that column",
sortascendingstring: "Sort Ascending",
sortdescendingstring: "Sort Descending",
sortremovestring: "Remove Sort",
groupbystring: "Group By this column",
groupremovestring: "Remove from groups",
filterclearstring: "Clear",
filterstring: "Filter",
filtershowrowstring: "Show rows where:",
filtershowrowdatestring: "Show rows where date:",
filterorconditionstring: "Or",
filterandconditionstring: "And",
filterselectallstring: "(Select All)",
filterchoosestring: "Please Choose:",
filterstringcomparisonoperators: ['empty', 'not empty', 'contains', 'contains(match case)',
'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
 filternumericcomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or
equal', 'null', 'not null'],
filterdatecomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or
equal', 'null', 'not null'],
filterbooleancomparisonoperators: ['equal', 'not equal'],
validationstring: "Entered value is not valid",
emptydatastring: "No data to display",
filterselectstring: "Select Filter",
loadtext: "Loading...",
clearstring: "Clear",
todaystring: "Today"
};

German Localization Members

{
firstDay: 1,
days: {
// full day names
names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
// abbreviated day names
namesAbbr: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
// shortest day names
namesShort: "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
},
months: {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember",
""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez", ""]
},
// 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: ["Vormittag", "vormittag", "Vormittag"],
PM: ["Nachmittag", "nachmittag", "Nachmittag"],
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": "n. Chr.", "start": null, "offset": 0 }
],
twoDigitYearMax: 2100,
patterns: {
// short date pattern
d: "dd.MM.yyyy",
// long date pattern
D: "dddd, am dd.MM.yyyy",
// short time pattern
t: "hh:mm tt",
// long time pattern
T: "hh: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"
},
percentsymbol: "%",
currencysymbol: "€",
currencysymbolposition: "after",
decimalseparator: ',',
thousandsseparator: '.',
pagergotopagestring: "Gehe zu:",
pagershowrowsstring: "Zeige Zeile:",
pagerrangestring: " von ",
pagerpreviousbuttonstring: "voriger",
pagernextbuttonstring: "nächster",
groupsheaderstring: "Ziehen Sie eine Spalte hierher um eine Gruppe zu erstellen",
sortascendingstring: "Sortiere aufsteigend",
sortdescendingstring: "Sortiere absteigend",
sortremovestring: "Entferne Sortierung",
groupbystring: "Gruppiere nach dieser Spalte",
groupremovestring: "Entferne Gruppierung",
filterclearstring: "Aufheben",
filterstring: "Filter",
filtershowrowstring: "Zeige Zeilen wo:",
filterorconditionstring: "Oder",
filterandconditionstring: "Und",
filterstringcomparisonoperators: ['leer', 'nicht leer', 'enthält', 'enthält(Klein-/Großschreibung beachten)',
'enthält nicht', 'enthält nicht(Klein-/Großschreibung beachten)', 'startet mit', 'startet mit(Klein-/Großschreibung beachten)',
'endet mit', 'endet mit(Klein-/Großschreibung beachten)', 'gleich', 'gleich(Klein-/Großschreibung beachten)', 'undefiniert',
'nicht undefiniert'],
filternumericcomparisonoperators: ['gleich', 'ungleich', 'kleiner als', 'kleiner gleich', 'größer als', 'größer gleich',
'undefiniert', 'nicht undefiniert'],
filterdatecomparisonoperators: ['gleich', 'ungleich', 'früher als', 'früher gleich', 'später als', 'später gleich',
'undefiniert', 'nicht undefiniert']
validationstring: "Der eingegebene Wert ist nicht gültig"
};

Grid Cells Rendering

jqxGrid
The Grid plugin allows custom cells rendering by providing a rendering function to a grid column. In the sample below, the "cellsrendering" function is applied
to the "Quantity" and "Unit Price" columns. The function returns a html string which is applied to the Grid cells. The Grid passes several parameters to the
function providing the row index, column, cell value, default html string and additional properties of the rendering column such as column width, cells
alignment and cells format.

Grid Cells Rendering Sample

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid with custom cells rendering.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 < 100; 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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value < 20) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value +
'</span>';
}
else {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value +
'</span>';
}
}
$("#jqxgrid").jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
 { text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer,
cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
</body>
</html>

Grid Cells Rendering Sample

You can also use the custom cells rendering feature to center the text in the Grid cells and columns.

Grid Cells with Custom Alignment

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This example shows how to change the Center the Grid Columns and Cells.</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin",
"Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson",
"Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha",
"Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 50; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
 row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = new Number(price * quantity).toFixed(2);
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var cellsrenderer = function (row, column, value) {
return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
}
var columnrenderer = function (value) {
return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
}
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'First Name', dataField: 'firstname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width:
100 },
{ text: 'Last Name', dataField: 'lastname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width:
100 },
{ text: 'Product', dataField: 'productname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width:
180 },
{ text: 'Quantity', dataField: 'quantity', renderer: columnrenderer, cellsrenderer: cellsrenderer, width:
80 },
{ text: 'Unit Price', dataField: 'price', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 90},
{ text: 'Total', dataField: 'total', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 90}
]
});
});
</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 id="jqxgrid"></div>
</div>
</body>
</html>

Grid Cells Editing

(requires jqxgrid.edit.js)

jqxGrid Cell Editing feature much resembles the data entering experience in an Excel Spreadsheet – once you select a grid cell, you can enter data when you
start typing text. In order to use the Cells Editing feature, you need to reference the jqxgrid.edit.js in your project and also to include the javascript files
required by some of the editors. The Grid's 'editable' property specifies whether the editing is enabled or not.

Mouse Edit Actions

 Single mouse click: Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value.
 Single mouse click on a selected cell: Marks the cell as selected and shows the editor.
 Double mouse click on a cell: Marks the cell as selected and shows the editor. The editor’s value is equal to the cell’s value..

Keyboard Edit Actions and Navigation

If the user starts typing text, the cell’s content is replaced with the text entered from the user.
 Left Arrow key is pressed - Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Right Arrow key is pressed - Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Up Arrow key is pressed - Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Down Arrow key is pressed - Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Page Up/Down is pressed - Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Home/End is pressed - Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
 Enter key is pressed - Shows the selected cell’s editor. If the cell is in edit mode, hides the cell’s editor and saves the new value. The editor’s value is
equal to the cell’s value.
  Esc key is pressed - Hides the cell’s editor and cancels the changes.
 Tab key is pressed - Selects the right cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the right cell and opens its
editor.
 Shift+Tab keys are pressed - Selects the left cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the left cell and opens its
editor.
 F2 key is pressed - shows the selected cell's editor.
 Space key is pressed - Toggles the checkbox editor’s check state when the selected cell’s column is a checkbox column.

Programmatic Editing
The Grid have APIs for showing and hiding the cell editors. The 'begincelledit' method allows you to put a specific cell into edit mode.
$("#jqxgrid").jqxGrid('begincelledit', 0, 'firstname');

The 'endcelledit' method ends the edit operation and confirms or cancels the changes. The following code cancels the changes.
$("#jqxgrid").jqxGrid('endcelledit', 0, 'firstname', true);

The following code confirms the changes.

$("#jqxgrid").jqxGrid('endcelledit', 0, 'firstname', false);

To set a new value to a Grid cell, you can use the 'setcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
// the third parameter is the new cell's value.
$("#jqxgrid").jqxGrid('setcellvalue', 0, 'lastname', 'My Value');

To get the value of a Grid cell, you can use the 'getcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
var value = $("#jqxgrid").jqxGrid('getcellvalue', 0, 'lastname');

The 'cellbeginedit' and 'cellendedit' events are raised when the edit operation begins or ends.
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
var columnDataField = args.datafield;
var rowIndex = args.rowindex;
var cellValue = args.value;
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
var columnDataField = args.datafield;
var rowIndex = args.rowindex;
var cellValue = args.value;
var oldValue = args.oldvalue;
});

Editor Types
jqxGrid supports the following types of editors:
 TextBox
 CheckBox(uses the jqxCheckBox widget)
 NumberInput(uses the jqxNumberInput widget and edits currency, percentange and any type of numeric information)
 DateTimeInput(uses the jqxDateTimeInput widget and edits date and time values)
 DropDownList(uses the jqxDropDownList widget and selects a single value from a list of values)
To specify the column's editor, you should set the column's 'columntype' property to 'textbox', 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput'.
To disable the editing of a specific grid column, you can set the column's editable property to false. The 'initeditor' function is called when the editor's widget
is initialized. It allows you to use the properties of the widget and make it best fit your application's scenario.
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 65 },
{ text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd'},
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0 });
}
},
 { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}
}
]
});

Please note that in order to use the 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput' editors you need to include the necessary javascript files.

Validation
The Grid will display a validation popup message when the new cell’s value is not valid. The developers are able to set a custom validation logic and error
messages for each grid column. The Grid will stay in edit mode until a correct value is entered or the user presses the “Esc” key.

In following code, the "Ship Date", "Quantity" and "Price" columns define custom validation functions. Each function has 2 parameters - the edit cell and its
value. Depending on your logic, you can validate the value and return true if the value is correct or false, if the value is not correct. You can also return an
object with 2 members - result and message. The message member represents the message that your users will see, if the validation fails.
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 65 },
{ text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: "Ship Date should be before 1/1/2013" };
}
return true;
 }
},
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
validation: function (cell, value) {
if (value < 0 || value > 100) {
return { result: false, message: "Quantity should be in the 0-100 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0 });
}
},
{ text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
validation: function (cell, value) {
if (value < 0 || value > 15) {
return { result: false, message: "Price should be in the 0-15 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}
}
]
});

For Server-Side cells editing, see the Server-side processing with PHP and MySQL help topic.

Grid Cells and Rows Selection

(requires jqxgrid.selection.js)

jqxGrid supports 10 selection modes - 'none', 'singlerow', 'multiplerows', 'multiplerowsextended', 'multiplerowsadvanced', 'singlecell', multilpecells',
'multiplecellsextended', 'multiplecellsadvanced' and 'checkbox' The cells and rows selection is implemented in the jqxgrid.selection.js. The default selection
mode is set to 'singlerow'. In order to change the selection mode, you need to set the Grid's 'selectionmode' property.
  none - disables the selection
 singlerow - allows you to select only one row via a mouse click on a grid row or by using the keyboard arrow keys, page up/down, home and end keys.
 multiplerows - this selection mode allows you to select multiple rows via a mouse click. Clicking an already selected row will unselect it.
 multiplerowsextended - this selection mode allows you to select multiple rows via a drag and drop. The selection behavior resembles the selection of
icons on your desktop.
 multiplerowsadvanced - this selection mode allows you to select multiple rows by holding Shift or Ctrl keys while clicking on Grid rows.
 checkbox - this selection mode allows you to select multiple rows by clicking checkboxes.
 singlecell - allows you to select only one cell via a mouse click on a grid cell or by using the keyboard arrow keys, page up/down, home and end keys.
 multiplerows - this selection mode allows you to select multiple cells via a mouse click. Clicking an already selected cell will unselect it.
 multiplecellsextended - this selection mode allows you to select multiple cells via a drag and drop. The selection behavior resembles the selection of
icons on your desktop.
 multiplecellsadvanced - this selection mode allows you to select multiple cells via a drag and drop. The selection behavior resembles the selection in
MS Excel.
The following code sets the Grid's 'selectionmode':
$("#jqxgrid").jqxGrid({selectionmode: 'multiplecellsextended'});

Rows Selection API - when the selection mode is set to 'singlerow', 'multiplerows', 'checkbox', 'multiplerowsadvanced'
or 'multiplerowsextended'.
- selectrow, unselectrow, getselectedrowindex and getselectedrowindexes. The rowselect and rowunselect events are raised
when the user selects or unselects a row.

The following code will select the tenth row:

// @param Number. The row index.

$('#grid').jqxGrid('selectrow', 10);

To unselect it, use the code below:

// @param Number. The row index.

$('#grid').jqxGrid('unselectrow', 10);
The following code shows how to subscribe to the 'rowselect' and 'rowunselect' events:

$("#jqxgrid").bind('rowselect', function (event) {

var selectedRowIndex = event.args.rowindex;
});
$("#jqxgrid").bind('rowunselect', function (event) {
 var unselectedRowIndex = event.args.rowindex;
});

Cells Selection API - when the selection mode is set to 'singlecell', 'multiplecells', 'multiplecellsadvanced' or
'multiplecellsextended'.
- selectcell, unselectcell, getselectedcell and getselectedcells. The cellselect and cellunselect events are raised when
the user selects or unselects a cell.

The following code will select a cell which is in the tenth row and in a column with 'firstname' datafield.

// @param Number. The row index.

// @param String. The column datafield.
$('#grid').jqxGrid('selectcell', 10, 'firstname');

To unselect a cell, use the code below:

// @param Number. The row index.
// @param String. The column datafield.
$('#grid').jqxGrid('unselectcell', 10, 'firstname');

The following code shows how to subscribe to the 'cellselect' and 'cellunselect' events:

$("#jqxgrid").on('cellselect', function (event) {

var datafield = event.args.datafield;
var row = event.args.rowindex;
var columntext = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
});
$("#jqxgrid").on('cellunselect', function (event) {
var datafield = event.args.datafield;
var row = event.args.rowindex;
var columntext = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
});

The 'clearselection' method allows you to clear the selection - removes the selection in all selected rows and cells.

$("#jqxgrid").jqxGrid('clearselection');
Keyboard Navigation

 Left Arrow key is pressed - selects the left cell

 Right Arrow key is pressed - selects the right cell
 Up Arrow key is pressed - selects the cell above
 Down Arrow key is pressed - selects the cell below
 Page Up/Down key is pressed - navigates one page up or down
 Home/End key is pressed - navigates to the first or last Grid row
 Tab key is pressed - selects the right cell
 Shift+Tab keys are pressed - selects the left cell
The keyboard navigation is enabled by default. However, if you want to disable it, you need to set the
'keyboardnavigation' property to false.
The following code disables the keyboard navigation:

$("#jqxgrid").jqxGrid({keyboardnavigation: false});

JSONP for a cross domain data source

The same-origin policy prevents a script loaded from one domain from getting or manipulating properties of a document from another domain. That is, the
domain of the requested URL must be the same as the domain of the current Web page. This basically means that the browser isolates content from
different origins to guard them against manipulation. JSONP (JSON with Padding) represents a JSON data wrapped in a function call. JSONP is an effective
cross-domain communication technique, by-passing the same-origin policy limitations. In this help article, we will show you how to bind the jQuery Grid to
JSONP data. We will use the Geonames JSONP Service to populate our Grid with data.

1. Add references to the javascript and css files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">

<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
2. Add a DIV tag to the document’s body. We will later select this DIV tag to render the Grid inside.

<div id="jqxgrid"></div>

3. Create the source object and a new instance of the jqxDataAdapter plug-in. In the source object, set the "url" to point to the JSONP service. The members
and their values defined in the data object will be sent to the server. The "datatype" member should be set to ‘jsonp’ and we also specify the datafields array.
Each datafield name is a name of a member in the data source. The jqxDataAdapter's "formatData" callback function is called when the Grid is preparing to
send a new Ajax request to the server. The result of that function determines the parameters sent to the server.

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

4. The final step is to initialize the Grid. We achieve this by selecting the jqxgrid DIV tag and calling the jqxGrid constructor. In the constructor, we set the
source property to point to the source object. We also initialize the Grid columns by setting the displayed text, datafield which points to a datafield in the
source object and the column’s width.
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Country Name', datafield: 'countryName', width: 200 },
{ text: 'City', datafield: 'name', width: 170 },
{ text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
{ text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
]
});

Working Example
Below is the example's full source code:

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example the Grid is bound to a Remote Data.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 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://ws.geonames.org/searchJSON"
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
$.extend(data, {
featureClass: "P",
style: "full",
username: "jqwidgets",
maxRows: 50
});
return data;
}
}
);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Country Name', datafield: 'countryName', width: 200 },
{ text: 'City', datafield: 'name', width: 170 },
{ text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
{ text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
 <div id="jqxgrid"></div>
</div>
</body>
</html>

Add extra HTTP variables

This help article illustrates how to send data to the server. The Grid builds a Data object to be sent to the server which contains data about the Grid's current
page number, sort columns, sort order, etc. You can also add your custom data to be sent. The data object is automatically converted to a query string by
jQuery and it is appended to the url.

In the following example code, we define a data object with three members. The members and their values defined in the data object will be sent to the
server.
// prepare the data
var source =
{
datatype: "jsonp",
datafields: [
{ name: 'countryName' },
{ name: 'name' },
{ name: 'population', type: 'float' },
{ name: 'continentCode' }
],
url: "http://ws.geonames.org/searchJSON",
data: {
featureClass: "P",
style: "full",
maxRows: 50
}
};

The data is converted into a query string using jQuery.param() before it is sent. The above code is appropriate for static data sent to the server.

By default, the Grid sends the following data to the server:

 sortdatafield - the sort column's datafield.
 sortorder - the sort order - 'asc', 'desc' or ''
  pagenum - the current page's number when the paging feature is enabled.
 pagesize - the page's size which represents the number of rows displayed in the view.
 recordstartindex - the index in the view's first visible record.
 recordendindex - the index in the view's last visible record
 groupscount - the number of groups in the Grid
 group - the group's name. The group's name for the first group is 'group0', for the second group is 'group1' and so on.
 filterscount - the number of filters applied to the Grid
 filtervalue - the filter's value. The filtervalue name for the first filter is "filtervalue0", for the second filter is "filtervalue1" and so on.
 filtercondition - the filter's condition. The condition can be any of these: "CONTAINS", "DOES_NOT_CONTAIN", "EQUAL", "EQUAL_CASE_SENSITIVE",
NOT_EQUAL","GREATER_THAN", "GREATER_THAN_OR_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "STARTS_WITH",
"STARTS_WITH_CASE_SENSITIVE", "ENDS_WITH", "ENDS_WITH_CASE_SENSITIVE", "NULL", "NOT_NULL", "EMPTY", "NOT_EMPTY"
 filterdatafield - the filter column's datafield
 filteroperator - the filter's operator - 0 for "AND" and 1 for "OR"
Before the data is sent to the server, you can use the 'formatData' function of the jqxDataAdapter. The result that the 'formatData' function returns
determines the parameters which will be sent to the server. The 'formatData' function is appropriate for scenarios with dynamic parameters. Here's how to
override the data object and send the "my data" string 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;
 }
}
);

The parameter passed to the 'formatData' function represents the data object which includes all settings defined by you in the source object's data member
and all settings by the Grid('sortdatafield', 'sortorder', etc.).

Sending data to the server when using the jqxGrid with PHP
jQuery will automatically convert the data object into a string and send in the following format:
"pagenum=0&pagesize=10&featureClass=P&style=full&maxRows=50"

Then, in your PHP code, you can get the values of the pagenum and pagesize by using this code:
$pagenum = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];

Sending data to the server when using the jqxGrid with ASP .NET
ASP.NET AJAX script services and page methods understand and expect input parameters to be serialized as JSON strings. These parameters are parsed out
of the POST data and used as arguments to the method you’ve called.
However, as the Grid provides a JSON object as a data parameter for an $.ajax call, jQuery will convert the object into a query string using jQuery.param().
Take this sample request, for example where data is defined as {featureClass: "P", style: "full", maxRows: 50};:
$.ajax({
type: "POST",
url: "WebService.asmx/WebMethodName",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json"
});

jQuery will automatically convert the object into a string and send it as:
"featureClass=P&style=full&maxRows=50".
This is OK, if you are using the Grid with PHP, but in ASP .NET, the server will respond with "Invalid JSON primitive" error.
The solution in ASP .NET application scenarios is to make sure that you’re passing a string for the data parameter, like this:
$.ajax({
type: "POST",
 url: "WebService.asmx/WebMethodName",
data: "{'featureClass': 'P', 'style': 'full', 'maxRows': '50'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});

With jqxGrid, the above data string can be achieved exactly by using the 'formatData' function.
formatData: function (data) {
return "{'featureClass': 'P', 'style': 'full', 'maxRows': '50'}";
}

To make a GET, we need to set the data object as follows: "{}".

formatData: function (data) {
return "{}";
}

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin,
padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS
file.

Below is the list of CSS classes used by jqxGrid.

 jqxGrid Style

 jqx-widget - applied to the Grid widget.

 jqx-grid - applied to Grid container DIV element.
 jqx-grid-pager - applied to the Grid Pager.
 jqx-grid-header- applied to Grid Columns container element.
 jqx-grid-column-header - applied to a Grid column.
 jqx-widget-header - applied to a Grid column, Toolbar, Statusbar and Groups Header.
 jqx-widget-content - applied to the Grid's content area.
 jqx-grid-content - applied to the Grid's content area.
  jqx-grid-toolbar - applied to the toolbar.
 jqx-grid-statusbar - applied to the statusbar.
 jqx-grid-column-menubutton - applied to a column's menu button.
 jqx-grid-column-sortascbutton - applied to a column's sort button when the sort order is ascending.
 jqx-grid-column-sortdescbutton - applied to a column's sort button when the sort order is descending.
 jqx-grid-column-filterbutton - applied to a column's filter button.
 jqx-grid-sortasc-icon - applied to the sort ascending menu item in the Grid's Context Menu.
 jqx-grid-sortdesc-icon - applied to the sort descending menu item in the Grid's Context Menu.
 jqx-grid-sortremove-icon - applied to the sort remove menu item in the Grid's Context Menu.
 jqx-grid-groupby-icon - applied to the 'group by' menu item in the Grid's Context Menu.
 jqx-grid-groups-header - applied to the Grouping Panel area.
 jqx-grid-group-column - applied to the grouping columns in the Grouping Panel.
 jqx-grid-cell - applied to the grid cells.
 jqx-grid-cell-sort - applied to the grid cells in the sort column.
 jqx-grid-cell-filter - applied to the grid cells in the filter column.
 jqx-grid-group-cell - applied to the cells in a grouping row.
 jqx-grid-details-cell - applied to the cells in a details row.
 jqx-grid-cell-alt - alternating cells style. This is applied to the cells in the alternating rows.
 jqx-grid-cell-pinned - applied to the cells in a pinned column.
 jqx-grid-cell-selected - applied to a selected cell..
 jqx-fill-state-pressed - applied to a selected cell.
 jqx-grid-cell-hover - applied to a hovered.
 jqx-fill-state-hover - applied to a hovered cell.
 jqx-grid-group-collapse - applied to the collapse button of a grouping row.
 jqx-grid-group-collapse-rtl - applied to the collapse button of a grouping row when "rtl" is enabled.
 jqx-grid-group-expand - applied to the expand button of a grouping row.
 jqx-grid-group-expand-rtl - applied to the expand button of a grouping row when "rtl" is enabled.
 jqx-grid-column-resizeline - applied to the column's resize line.
 jqx-grid-column-resizestartline - applied to the column's resize start line.
 jqx-fill-state-disabled - applied to the widget when it is disabled.
 jqx-grid-group-drag-line - applied to the drop line indicators displayed in the grouping header.
 jqx-grid-group-column-line - applied to the lines between the group columns.
When you create a custom style with colors and backgrounds for jqxGrid, you need to do the following:
 Add the above CSS classes related to jqxButtons
 After each CSS class, add your theme name.
For example:
jqx-grid-energyblue
 To apply your custom style to the Grid, you need to set its 'theme' property(option) to point to your theme name string.
 The sample below demonstrates how to set the 'Energy Blue' theme to the Grid.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>GridView Styling Sample</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 < 100; 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"
};
$("#jqxgrid").jqxGrid(
{
width: 500,
source: source,
pageable: true,
autoheight: true,
theme: 'energyblue',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer =
window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-
2FX5PV9DNT');</script></head>
<body style="overflow: hidden;" class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

Properties
Appearance

Name Type Default

altrows Boolean false

altstart Number 1

altstep Number 1

autoshowloadelement Boolean true

autoshowfiltericon Boolean true

autoshowcolumnsmenubutton Boolean true

showcolumnlines boolean true

showrowlines boolean true

showcolumnheaderlines boolean true

adaptive boolean false

compact boolean false

adaptivewidth number 600

clipboard Boolean true

closeablegroups Boolean true

columnsmenuwidth Number 15

columnmenuopening Function null

columnmenuclosing Function null

cellhover Function null

enablekeyboarddelete Boolean true

enableellipsis Boolean true

enablemousewheel Boolean true

enableanimations Boolean true

enabletooltips Boolean false

enablehover Boolean true

enablebrowserselection Boolean false

everpresentrowposition String 'top'

everpresentrowheight Number 30

everpresentrowactions String "add reset"

everpresentrowactionsmode String "popup"

filterrowheight Number 31

filtermode String "default"

groupsrenderer function null

groupcolumnrenderer function null

groupsexpandedbydefault Boolean false

handlekeyboardnavigation function null

pagerrenderer function null

rtl Boolean false

showdefaultloadelement Boolean true

showfiltercolumnbackground Boolean true

showfiltermenuitems Boolean true

showpinnedcolumnbackground Boolean true

showsortcolumnbackground Boolean true

showsortmenuitems Boolean true

showgroupmenuitems Boolean true

showrowdetailscolumn Boolean true

showheader Boolean true

showgroupsheader Boolean true

showaggregates Boolean false

showgroupaggregates Boolean false

showeverpresentrow Boolean false

showfilterrow Boolean false

showemptyrow Boolean true

showstatusbar Boolean false

statusbarheight Number 34

showtoolbar Boolean false

selectionmode String 'singlerow'

theme String ''

toolbarheight Number 34

Layout

Name Type Default

autoheight Boolean false

autorowheight Boolean false

columnsheight Number 30

deferreddatafields Array []

groupsheaderheight Number/String 34

groupindentwidth Number 20

height Number/String 400

pagerheight Number/String 34

rowsheight Number 28

scrollbarsize Number 15

scrollmode String "default"

scrollfeedback function null

width Number/String 600

Behavior

Name Type Default

autosavestate Boolean false

autoloadstate Boolean false

columns Array []
columngroups Array []

columnsmenu Boolean true

columnsresize Boolean false

columnsautoresize Boolean true

columnsreorder Boolean false

disabled Boolean false

editable Boolean false

editmode String 'selectedcell'

filter Function null

filterable Boolean false

groupable Boolean false

groups Array []

horizontalscrollbarstep Number 5

horizontalscrollbarlargestep Number 50

initrowdetails function null

keyboardnavigation Boolean true

pagesize Number 10

pagesizeoptions Array ['5', '10', '20']

pagermode String "default"

pagerbuttonscount Number 5

pageable Boolean false

rowdetails Boolean false

rowdetailstemplate Object null

ready function null

rendered function null

renderstatusbar function null

rendertoolbar function null

rendergridrows function null

sortable Boolean false

selectedrowindex Number -1

selectedrowindexes Array []

source Object {}

sorttogglestates String 2

updatedelay Number 0

virtualmode Boolean false

verticalscrollbarstep Number 5

verticalscrollbarlargestep Number 400

Events
bindingcomplete Event

columnresized Event

columnreordered Event

columnclick Event

cellclick Event

celldoubleclick Event
cellselect Event

cellunselect Event

cellvaluechanged Event

cellbeginedit Event

cellendedit Event

filter Event

groupschanged Event

groupexpand Event

groupcollapse Event

pagechanged Event

pagesizechanged Event

rowclick Event

rowdoubleclick Event

rowselect Event

rowunselect Event

rowexpand Event

rowcollapse Event

sort Event

Methods
Common

autoresizecolumns Method
autoresizecolumn Method

beginupdate Method

clear Method

destroy Method

endupdate Method

ensurerowvisible Method

focus Method

getcolumnindex Method

getcolumn Method

getcolumnproperty Method

getrowid Method

getrowdata Method

getrowdatabyid Method

getrowboundindexbyid Method

getrowboundindex Method

getrows Method

getboundrows Method

getdisplayrows Method

getdatainformation Method

getsortinformation Method

getpaginginformation Method

hidecolumn Method

hideloadelement Method
hiderowdetails Method

iscolumnvisible Method

iscolumnpinned Method

localizestrings Method

pincolumn Method

refreshdata Method

refresh Method

render Method

scrolloffset Method

scrollposition Method

showloadelement Method

showrowdetails Method

setcolumnindex Method

setcolumnproperty Method

showcolumn Method

unpincolumn Method

updatebounddata Method

updating Method

Sorting(requires jqxgrid.sort.js)

getsortcolumn Method

removesort Method

sortby Method

Grouping(requires jqxgrid.grouping.js)
addgroup Method

cleargroups Method

collapsegroup Method

collapseallgroups Method

expandallgroups Method

expandgroup Method

getrootgroupscount Method

getgroup Method

insertgroup Method

iscolumngroupable Method

removegroupat Method

removegroup Method

Filtering(requires jqxgrid.filter.js)

addfilter Method

applyfilters Method

clearfilters Method

getfilterinformation Method

removefilter Method

refreshfilterrow Method

Paging(requires jqxgrid.pager.js)

gotopage Method

gotoprevpage Method

gotonextpage Method
Editing(requires jqxgrid.edit.js)

addrow Method

begincelledit Method

beginrowedit Method

closemenu Method

deleterow Method

endcelledit Method

endrowedit Method

getcell Method

getcellatposition Method

getcelltext Method

getcelltextbyid Method

getcellvaluebyid Method

getcellvalue Method

isBindingCompleted Method

openmenu Method

setcellvalue Method

setcellvaluebyid Method

showvalidationpopup Method

updaterow Method

Selection(requires jqxgrid.selection.js)

clearselection Method

getselectedrowindex Method
getselectedrowindexes Method

getselectedcell Method

getselectedcells Method

selectcell Method

selectallrows Method

selectrow Method

unselectrow Method

unselectcell Method

Aggregates(requires jqxgrid.aggregates.js)

getcolumnaggregateddata Method

refreshaggregates Method

renderaggregates Method

Export(requires jqxdata.export.js and

jqxgrid.export.js)

exportdata Method

Save/Load State(requires jqxgrid.storage.js)

getstate Method

loadstate Method

savestate Method