Column Grouping
This section describes creating column groups in the component's HTML definition or the TypeScript class file.
Live example
Column Grouping live example.
Groups Definition
To create a column group, you nest a column definition under another column definition. You can nest column definitions as many as you need.
Let us define the following column groups:
Firstly, We have two main groups: Personal Info and Employee Info column groups.
Under the Personal Info group, we have the Complete Name column group, the Gender and Age columns.
Under the Complete Name column group, we have Name and Surname columns.
Lastly, under the Employee Info, we have the Employee Id, Email, and Hire Date columns.
In code, we have:
<dike-grid id="grid-col-grouping" height="600px"
[gridElevation]="gridProperties.matElevation"
[gridElevationValue]="gridProperties.elevationValue"
[striped]="gridProperties.stripeRows"
[verticalRowLines]="gridProperties.verticalRowLines"
(gridColumnDefInstance)="onColumnDefInstance($event)"
[datasource]="dkgDataSource">
<dike-grid-column
fieldName="personalInfoGroup"
headerText="Personal Info"
order="1">
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150">
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150">
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="85">
</dike-grid-column>
</dike-grid-column>
</dike-grid>
As you can see in the previous definition, we create the column groups in the HTML definition and TypeScript code, as we define any column.
You must not provide the dataType
property because column groups can hold any number of columns, even column groups.

Be aware when you create a column group in the TypeScritpt code, the children property is null.
Group Status
Any group could be open or closed. The property displayStatus
stores the group status.
If you want a group could open or close, its child columns must tell the grid which columns are visible in closed status.
Let us define another column under the Employee Info group. This column will be visible when the Employee Info column group is closed, displaying the Total Sales.
<dike-grid>...</dike-grid>
<ng-template #totalSales let-value="fieldValue">
<p>{{ value | currency }}</p>
</ng-template>
In the previous code, we have defined the following:
Firstly, we determined the template for displaying the total sales field.
Then, we create the actual column definition for Total Sales. The
displayOn
property is equal to closed, meaning that the user will see this value when the Employee Info group is closed.

Initial Group Status
By default, the initial status of a group is open. However, you can change this value by providing the closed value to the displayStatus
property.
Let us change the initial status for the Employee Info group to a closed value.
// Lastly, define the Employee Info group:
const employeeInfo = new DikeGroupColumnDef('employeeInfoGroup', 'Employee Info');
employeeInfo.order = 2;
employeeInfo.displayStatus = 'closed';
When you launch the HTML containing the DikeGrid definition, the Employee Info group will appear closed.
If you set a group as closed and none of the child columns has the displayOn
property to a closed value, the group status will be open.
If you set a group as open and all the child columns have the displayOn
property to a closed value, the group status will be open.
Group Status Event
When a column group changes its status, the DikeGrid instance emits an event. The name of the event is columnGroupStatusChange
.
Let us listen to this group status event from the DikeGrid instance directly.
<dike-grid id="grid-col-grouping" height="600px"
(columnGroupStatusChange)="onColumnGroupStatusChange($event)">
</dike-grid>
You can listen to this event from the DikeGridColumnDef
service through the columnGroupStatusChange
property.
Open the Personal Info group and see the event information in the dev console.
Column Chooser Menu
When you navigate to the Column Chooser Menu and open the Employee Info group, you will see a circle with an accent color next to the Total Sales column.
The circle next to the Total Sales column indicates that the column is visible when the parent group is closed.

Summary
In this section, we explored column groups creation and its status. Then, we listen to the event sent when this status has changed and spot a column displayed in a closed position.
Complete code for this section
<dike-grid id="grid-col-grouping" height="600px"
[displayRowId]="gridProperties.displayRowId"
[gridElevation]="gridProperties.matElevation"
[gridElevationValue]="gridProperties.elevationValue"
[striped]="gridProperties.stripeRows"
[verticalRowLines]="gridProperties.verticalRowLines"
(gridColumnDefInstance)="onColumnDefInstance($event)"
(columnGroupStatusChange)="onColumnGroupStatusChange($event)"
[datasource]="dkgDataSource">
<dike-grid-column
fieldName="personalInfoGroup"
headerText="Personal Info"
order="1">
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150">
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150">
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="85">
</dike-grid-column>
</dike-grid-column>
</dike-grid>
<ng-template #totalSales let-value="fieldValue">
<p>{{ value | currency }}</p>
</ng-template>
Last updated