New to Kendo UI for Angular? Start a free 30-day trial

Implementing Collapsible Column Groups in Kendo UI for Angular Grid

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

I want to implement collapsible column groups in the Kendo UI for Angular Grid. The Grid contains multiple columns organized into column groups, and users should be able to collapse groups to display a summary column or expand them to show detailed columns.

This Knowledge Base article also answers the following questions:

How can I make column headers collapsible in Angular Grid?
Is it possible to toggle column group visibility in Kendo UI for Angular Grid?
Can I hide or show child columns dynamically in Angular Grid?

Solution

To implement collapsible column groups, use a custom header template for the column group to create a clickable toggle, and apply the hidden property to the child columns to control their visibility.

Track the collapsed state of column groups using a Set that stores their titles:
typescript
```
public collapsedGroups = new Set<string>();
```

Create a method to toggle the collapsed state by checking if a group title exists in the Set:

typescript

public toggleGroup(groupTitle: string): void {
  if (this.collapsedGroups.has(groupTitle)) {
    this.collapsedGroups.delete(groupTitle);
  } else {
    this.collapsedGroups.add(groupTitle);
  }
}

Create a custom clickable header for the column group using the kendoGridHeaderTemplate directive. When the header is clicked, call the toggleGroup() method with the column group title:

html

<kendo-grid-column-group title="Unit">
  <ng-template kendoGridHeaderTemplate let-column>
    <div (click)="toggleGroup(column.title)">
      <kendo-svg-icon
        [icon]="collapsedGroups.has(column.title) ? chevronRightIcon : chevronDownIcon"
      ></kendo-svg-icon>
      {{ column.title }}
    </div>
  </ng-template>
</kendo-grid-column-group>

Define the detail columns that should appear when the group is expanded and set their hidden property to true when the group title is contained in the collapsedGroups set:

html

<kendo-grid-column-group title="Unit">
  <!-- ... -->
  <kendo-grid-column
    field="UnitPrice"
    title="Unit Price"
    [width]="120"
    [hidden]="collapsedGroups.has('Unit')"
  ></kendo-grid-column>
</kendo-grid-column-group>

Add a summary column that appears when the group is collapsed and apply the opposite condition to hide it when the group title is not in the collapsedGroups set. Use a custom cell template to display a combined summary of the detail columns:

html

<kendo-grid-column-group title="Unit">
  <!-- ... -->
  <kendo-grid-column
    [width]="240"
    title="Summary"
    [hidden]="!collapsedGroups.has('Unit')"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem.UnitsInStock }} units ({{ (dataItem.UnitsInStock * dataItem.UnitPrice) }})
    </ng-template>
  </kendo-grid-column>
</kendo-grid-column-group>

The following example demonstrates the proposed approach in action:

Change Theme

Theme

Loading ...

Implementing Collapsible Column Groups in Kendo UI for Angular Grid

Environment

Description

Solution

See Also