DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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.

jQuery
JavaScript
const fruitsVegetables = [{
    key: "Fruits",
    items: [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 }
    ]
}, {
    // ...
}];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruitsVegetables,
        grouped: true,
        collapsibleGroups: true,
        itemTemplate: function(data, _, element) {
            element.append(
                $("<p>").text(data.name + " | " + data.count).css("margin", 0)
            )
        }
    });
});
Angular
HTML
TypeScript
<dx-list
    [dataSource]="fruitsVegetables"
    [grouped]="true"
    [collapsibleGroups]="true">
    <div *dxTemplate="let data of 'item'">
        <p style="margin:0px">{{data.name}} | {{data.count}}</p>
    </div>
</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.

jQuery
JavaScript
const list = $("#listContainer").dxList("instance");
list.collapseGroup(0); // collapses the group with index 0
list.expandGroup(4); // expands the group with index 4
Angular
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