Angular List - Expand and Collapse a Group

If the user should be able to collapse or expand a group in the List, set the collapsibleGroups property to true. In this case, the user can collapse or expand a group with a click on the group header.

HTML
TypeScript
  • <dx-list
  • [dataSource]="fruitsVegetables"
  • [grouped]="true"
  • [collapsibleGroups]="true">
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • fruitsVegetables = [{
  • key: "Fruits",
  • items: [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 }
  • ]
  • }, {
  • // ...
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

View Demo

To collapse or expand a specific group programmatically, call the collapseGroup(groupIndex) or expandGroup(groupIndex) method.

TypeScript
  • import { ..., ViewChild } from "@angular/core";
  • import { DxListModule, DxListComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxListComponent) list: DxListComponent;
  • collapseGroup (groupIndex) {
  • this.list.instance.collapseGroup(groupIndex);
  • }
  • expandGroup (groupIndex) {
  • this.list.instance.expandGroup(groupIndex);
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
See Also