row group

Row grouping divides data rows based on the values of one or more specified columns and displays them in a hierarchical structure. If you drag a column header to the panel area, grouping is performed by that column. Alternatively, you can group by calling the GridView.groupBy() function.

Grouping

If you drag a column header to the panel area, grouping is performed by that column. Alternatively, you can group by calling the GridView.groupBy() function.

gridView.groupPanel.visible = false;
 
gridView.groupPanel.visible = true;
 
gridView.groupBy(["Gender", "Monetary"]);

Display of group header and footer

When in the rowGrouping state, you can set the display method of the group footer and group header depending on the expanded or collapsed state of the group.

expandedAdornments: Specifies whether to display the group header and footer when the row group is expanded.
collapsedAdornments: Specifies whether to display the group header and footer when the row group is not expanded.

gridView.setRowGroup({
   expandedAdornments: $(':radio[name="expanded"]:checked').val()
   collapsedAdornments: $(':radio[name="collapsed"]:checked').val()
});

Grouping event

When row grouping occurs, the onGrouping and onGrouped events of the Javascript grid are triggered.

gridView.onGrouping = function(grid) {
   alert("onGrouping event occurred. Returns true. If it returns false, grouping will not occur.");
   return true;
};
 
gridView.onGrouped = function(grid) {
   alert(
     "onGrouped : isGrouped = " +
       grid.isGrouped() +
       ", isMergedGrouped = " +
       grid.isMergedGrouped()
   );
};

Display summary values in footer and group footer

If dataType is "number", summary values can be displayed. Check SummaryType for summary values that can be displayed.

In the demo below, the age column is calculated as the average value and the maturity amount is calculated as the sum.

var columns = [
   ...
   {
     name: "Age",
     fieldName: "Age",
     width: "40",
     header: {
       text: "Age"
     },
     groupFooter: {
       expression: "avg",
       numberFormat: "#,##0.0",
       styleName: "right-column"
     },
     footer: {
       expression: "avg",
       numberFormat: "#,##0.0",
       styleName: "right-column"
     },
     styleName: "right-column"
   },
   {
     name: "SaveMaturity",
     fieldName: "SaveMaturity",
     width: "80",
     numberFormat: "#,##0",
     header: {
       text: "Maturity amount"
     },
     groupFooter: {
       expression: "sum",
       numberFormat: "#,##0",
       styleName: "right-column"
     },
     footer: {
       expression: "sum",
       numberFormat: "#,##0",
       styleName: "right-column"
     },
     styleName: "right-column"
   },
   ...
];
 
gridView.setColumns(columns);

Dynamic calculation of group footer

If the developer wants to calculate and display the summary displayed in the group footer, set it to column.groupFooter.valueCallback. (Proceed by returning the value you want to display.)

The fourth argument, group, contains information about the group. (ex: children contains information about the children of the group.)

var columns = [
   ...
   {
     name: "Age",
     fieldName: "Age",
     width: "40",
     header: {
       text: "Age",
       styleName: "orange-column"
     },
     groupFooter: {
       valueCallback: function (grid, column, groupFooterIndex, group, value) {
         //Return the value you want to display after calculation
         var groupModel = grid.getGroupModel(group.index);
         return grid.getGroupSummary(groupModel, "Age").count + 'gun';
       },
       styleName: "right-column"
     },
     styleName: "right-column"
   },
   ...
];
 
gridView.setColumns(columns);

Dynamic calculation of group footer 2

Below is an example where only the sum of the ages of the values with the gender of "male" in each group is output.

var columns = [
   ...
   {
     name: "Age",
     fieldName: "Age",
     width: "40",
     header: {
         text: "Age",
         styleName: "orange-column",
     },
     groupFooter: {
         valueCallback: function (grid, column, groupFooterIndex, group, value) {
             let tot_cnt = 0;
             console.log(group)
             group.rows.forEach(function (row) {
                 if (row != -1) {
                     if (dataProvider.getValue(row, "Gender") === "Male") {
                         tot_cnt += dataProvider.getValue(row, column.fieldName);
                     }
                 }
             });
             return tot_cnt;
         },
         styleName: "orange-column",
     },
     styleName: "right-column",
   },
   ...
];
 
gridView.setColumns(columns);

Display Group Footer in multiple lines

To display the Group Footer in two lines, set it with setFooters as shown below.

//display in two lines
gridView.rowGroup.setFooters([{},{}])
 
//To display in three lines, set it to [{},{},{}].

Individual configuration codes can be processed in column.groupFooters.

The demo below displays sum in the first group footer and avg in the second group footer.

gridView.rowGroup.setFooters([{},{}])
 
var vc = function (grid, column, groupFooterIndex, group, value) {
   var groupModel = grid.getGroupModel(group.index);
  
   //Display sum in the first group footer and avg in the second group footer.
   if (groupFooterIndex == 0) {
     return grid.getGroupSummary(groupModel, "Age").sum;
   } else if (groupFooterIndex == 1) {
     return grid.getGroupSummary(groupModel, "Age").avg;
   }
};
 
var columns = [
   ...
     {
     name: "Gender",
     fieldName: "Gender",
     width: "50",
     header: {
       text: "Gender",
       styleName: "orange-column"
     },
     groupFooters: [{
       text: "Total: ",
       styleName: "orange-column"
     }, {
       text: "Average: ",
       styleName: "orange-column"
     }],
   },
   {
     name: "Age",
     fieldName: "Age",
     width: "40",
     header: {
       text: "Age",
       styleName: "orange-column"
     },
     groupFooters: [{
       valueCallback: vc,
       numberFormat: "#,##0.#",
       styleName: "orange-column"
     }, {
       valueCallback: vc;
       numberFormat: "#,##0.#",
       styleName: "orange-column"
     }],
     styleName: "right-column"
   },
   ...
];
 
gridView.setColumns(columns);

Display group footer values

Depending on the settings of the options below, each row group can display a ‘group footer’. The text displayed in the group footer is specified by the footerStatement value of the settings object passed to the GridView.setRowGroup function. You can also specify the types of values that can be displayed in the footer of each row group through SummaryMode.

gridView.setRowGroup({
   footerStatement: "${groupValue}"
});

Show group header values

Depending on the settings of the options below, each row group can display a ‘group header’. The text displayed in the group header is specified by the headerStatement value of the settings object passed to the GridView.setRowGroup function. The default value of headerStatement is "${groupField}: ${groupValue} - ${rowCount} rows".

You can set the following values as the headerStatement property.

groupField: Displays the field name of the grouped field.
fieldHeader: Displays the header set in the grouped field.
groupColumn: Displays the header of the grouped column.
columnHeader: Displays the header of the grouped column.
columnFooter: Displays the footer value of the grouped column.
groupValue: Displays the value for each group.
rowCount: Displays the number of rows for each group.

gridView.setRowGroup({
   headerStatement: "${groupField}: ${groupValue} - ${rowCount} rows"
});

rowGroup.Bar visibility setting

You can set whether or not the rowGroup.Bar area is visible by setting rowGroup.indentVisible. If indentVisible is false, the expand icon disappears, so you can't collapse and expand it.

gridView.rowGroup.indentVisible = false;

Group rows by date

You can use the valueForGroupCallback property of a row group to apply row grouping based on a specific date unit. ※ Not applicable to row merge grouping (mergeMode: true).

gridView.rowGroup.valueForGroupCallback = function(grid, dataRow, fieldName, value) {
 
     if (grid.getDataSource().getOrgFieldName(dataProvider.getFieldIndex(fieldName)) === "StartDate" && value) {
         return new Date(2000, value.getMonth());
     }
     return value;
   }
 
   gridView.columnByName("StartDate").groupFooter.valueCallback = function(grid, column, footerIndex, group) {
     var row = group.firstDataItem.dataRow;
     var val = grid.getDataSource().getValue(row, column.fieldName);
     return val.getFullYear() + " - " + (val.getMonth()+1) + " Total"
   };
 
   // Additional things
   gridView.rowGroup.indentVisible = false;
   gridView.rowGroup.expandedAdornments = "footer";

row height grouping API