Similarly as Group By of the relational database, Row Grouping is the way of displaying the sum by binding the rows who have the same specified field values. In SMART datagrid GridView, it displays the bound rows as the neighboring Grid Rows. In addition, it can display the group header or footer before and after binding.
The user can drag the column header connected to the field to be grouped and set Row Grouping. The list of the current group fields will be displayed in the grouping panel, and it can be removed from the grouping by clicking the close button on the right side of the field view.
In addition, the row grouping runs based on DataField rather than Columns, while the column header connected to the field will be displayed in the grouping panel.
In the script, it calls groupBy to set the row grouping. And, if the state of the row grouping is changed, GridView.onGrouped event will be fired. Just before the change, onGrouping event will be fired.
If explicitly return false within onGrouping event, the change of grouping will not be proceeded.
Release the existing grouping.
Grouping with "Country" and "Flow" fields.
Exclude the selected column from the row grouping.
// It will be fired if the grouping is changed.
grdMain.onGrouped = function () {
console.log('Row grouping is changed.');
});
// Release group by.
grdMain.clearGroupBy();
// Group by.
grdMain.groupBy(['country', 'flow']);
You can specify callback function which specifies whether to create the group footer in RowGroup.createCallback property. If explicitly return Boolean false in the callback, the footer will not be created.
The footer will be displayed only in 1 level group.
In the footer cell of each group, it will calculate and display the total property specified by expression or callback property of column groupFooter. In the example above, "Trade" column has used expression, and "Weight" has used callback. Especially, "Weight" column has enabled to display a negative value depending on the "Flow" state of the group row.
The value or style displayed in the group footer by each row group can be specified through groupFooter property of the column. And, the style of the group fields displayed in the group panel can be specified through RowGroupPanel.itemStyles, etc.
grdMain.loadStyles({
groupPanel: {
background: "#fffad2",
item: {
background: "#eee8aa"
},
head: {
background: "#eeeea8"
}
}
});
Export to an Excel file