You can set the value of the allowRowGrouping property only at creation time.
After enabling the row-grouping operation, you will see a panel above the column headers. This panel is the group panel.
Row Grouping through the UI
To allow the user to move columns to the group panel, you must provide an input property named allowColumnDragging. Then, mark the columns you want the DkGrid rows grouped by as draggable and groupable.
Let us group the DkGrid rows by the Country and Gender columns.
Custom templates
As discussed in the Column Definitions section, every column has a default template for displaying the corresponding field value for every row.
Every group row will take the default template for displaying its value after grouping the rows. However, you can change the default template, as you can see in the following code snippet:
When defining a template to use in the group rendering, the related inner component will not pass the row entry object when calling the specified template.
After grouping the DkGrid rows by the Country and Gender columns, you will see the following output:
We have defined a custom pipe named countryFlag to map the country name with its corresponding flag file.
Clearing the group panel
You can remove columns from the group panel one by one or all of them in one action.
You can click on the close icon next to the column name to remove that column from the group panel. The action will move the column from the group panel to the center panel.
Or, you can remove all columns by clicking on the group panel icon at the left of the panel itself. The action will move all the columns from the group panel to the center panel.
You can use the column API to move columns to, from, or inside the group panel, and you can use the rowGrouping API to clear columns from the group panel.
When you group the DkGrid rows by some columns, it is enough to define them as draggable, groupable, and not locked when using the API. Therefore, it does not matter if you do not provide the input property allowColumnDragging.
Before using the API, you must retrieve the corresponding DkGrid instance by querying the component's view.
onGroupBy(): void {
if (this.columnControl.valid) {
const contentPanelColumn = this.columnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(contentPanelColumn, 'groupPanel');
}
}
onMoveColumn(): void {
if (this.groupByColumnControl.valid) {
const groupPanelColumn = this.groupByColumnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(groupPanelColumn, 'centerPanel');
}
}
onClearGroupPanel(): void {
this.dikeGrid.rowGrouping.clearRowGrouping();
}
The previous HTML code generates the following output:
With the previous UI, you can do the following actions:
First, you can choose a column from the Content panels dropdown control. Draggable, groupable, and not locked columns have an icon indicating they can group the DikeGrid rows. After selecting a column, you can click on the Group by button, moving the column to the group panel.
The Group panel dropdown control contains the columns in the group panel. You can choose a column and move it to the center panel by clicking on the related button.
You can click on the Clear group panel button to move all the columns from the group panel to the center panel.
Be aware that we left all the columns from the content panels enabled, even the column group named Complete Name.
You cannot move column groups to the group panel from the UI. Nevertheless, you can use the column API to move column groups to the group panel. The column API takes all the data columns from the given column group and inserts those defined as groupable, draggable, and not locked.
It is essential to notice that we are listening to any change in the DikeGrid's columns, attaching a callback to the contentPanelsColumnsChange and groupPanelColumnsChange events.
onContentColumnsChange(columns: DikeColumnDef[]): void {
this.contentColumns = this.flatColumns(columns);
// Clear the selected column:
this.columnControl.patchValue(null);
}
onGroupColumnsChange(columns: DikeColumnDef[]): void {
this.groupColumns = this.flatColumns(columns);
// Clear the selected column:
this.groupByColumnControl.patchValue(null);
// Update the flag to let us know if the DikeGrid rows are grouped:
this.isDikeGridGroupedBy = columns.length > 0;
}
Every time we receive a new set of columns, we flat them into a single array, invoking the method flatColumns(). So indeed, we are flattening the column groups, traversing them recursively.
If you see the items of the Content panelsdropdown control, you see the columns Employee Id, Country, Complete Name, Name, Surname, etc.
Customizing the group panel
You can change the group panelheight, the height of the columns displayed in the group panel, and the Row-Grouping indent width. Indeed, you can hide the Row-Grouping indent.
onGroupColumnsChange(columns: DikeColumnDef[]): void {
this.groupColumns = this.flatColumns(columns);
// Clear the selected column:
this.groupByColumnControl.patchValue(null);
// Update the flag to let us know if the DikeGrid rows are grouped:
this.isDikeGridGroupedBy = columns.length > 0;
}
onCollapseGroupRowChange(event: DikeGroupRowCollapseEvent<Employee>): void {
console.log('DikeGroupRowCollapseEvent: ', event);
}
Please, open the dev console to see the output of the collapseGroupRowChange event.
Summary
Firstly, you must allow the Row-Grouping operation at the grid scope by providing an input property named allowRowGrouping. Then, to group the DikeGrid rows by a column, you must define that column as draggable, groupable, and not locked.
For row grouping, through the UI, you must provide the input property named allowColumnDragging.
