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. 
$("#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>

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.