Getting Started


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

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:

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
The next step is to create a DIV element within the body of the html document.

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:

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

The result of the above code is:

Our Grid demos are available on: jQuery Grid demos