jQuery Grid widget - Getting Started documentation

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:
- Local Data - load the javascript data grid from a local array of objects.
- Xml Data - load the javascript data grid from XML data source using AJAX.
- JSON Data - load the javascript data grid from JSON data source using AJAX.
- CSV Data - load the javascript data grid from CSV.
- Tab Data - load the javascript data grid from Tab-Delimited (TSV).
- 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.
- 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>

The result of the above code is:

Our Grid demos are available on: jQuery Grid demos