React 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
- ],
- // ...
- })
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.