Grouping is a way to group data by diffrent criteria. jqGrid support currently one level grouping.

The simple way to group in jqGrid is to enable grouping with the grid option grouping:true and define a field name on which grouping occur. The name should correspondent of the name in colModel The definituion is done with array groupField which is a part of another grid option groupingView.

It is important to note that if you want grouping to be correct, then the data should come from server to grid sorted by that field. When we are in local mode (the data is array) the data is grouped (sorted) automatically so there is no need to define additional sort column.

In order to inform the server that we want to have a grouped data, jqGrid add to the sidx parameter the groupField name on which we group. This done only if we have enabled the grouping and the data is remote.

For example if the grouping configuration is defined as:

jQuery("#grid").jqGrid({ 
  ...
  grouping:true, 
  groupingView : { 
     groupField : ['name'],
     groupDataSorted : true 
  }, 
  caption: "Grouping" 
});

then the request send to the server will look like this (using FireBug)

We should get this information from the request, perform the appropriate sorting server side and return the requested data to the grid. The grid then get the data and do the grouping adding the appropriate (defined) headers and footers.

1. Currently only one level grouping is supported.
2. When the grouping is enabled, the following options will be set explicit into the code:

• scroll = false;
• rownumbers = false;
• subGrid = false;
• treeGrid = false;
• gridview = true;

Please refer in grid options for detailed information on what these options mean

All options in grouping are set as grid options and can be changed dynamically using the setGridParam method. Two options are related to grouping

1. grouping
2. groupingView

The first option grouping is Boolean and enables or disables the grouping feature into the grid. The default values of this option is false. To enable grouping set it to true - i.e grouping : true

The groupingView option is actually a object and consist a lot of other options. Below is a example on how this should be used:

jQuery("#grid").jqGrid({ 
  ...
  groupingView : { 
     groupField : ['name'],
     groupDataSorted : true 
  }
  ...
});

Below is the list of the options that are part of groupingView option