Documentation

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.

Basic Grid with Grouping

The result of the above code is:

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.