All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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
    });
});
Angular
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList
        :data-source="fruitsVegetables"
        :grouped="true"
        :collapsible-groups="true"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';

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

export default {
    components: {
        DxList
    },
    data() {
        return {
            fruitsVegetables
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';

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

export default function App() {
    return (
        <List
            dataSource={fruitsVegetables}
            grouped={true}
            collapsibleGroups={true}
        />
    );
}

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        :ref="listRefKey"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';

const listRefKey = "my-list";
// ...
export default {
    components: {
        DxList
    },
    data() {
        return {
            // ...
            listRefKey
        }
    },
    methods: {
        collapseGroup(groupIndex) {
            this.list.collapseGroup(groupIndex);
        },
        expandGroup(groupIndex) {
            this.list.expandGroup(groupIndex);
        }
    },
    computed: {
        list: function() {
            return this.$refs[listRefKey].instance;
        }
    }
}
</script>
React
App.js
import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';
// ...
export default function App() {
    const list = useRef(null);
    const collapseGroup = (groupIndex) => {
        list.current.instance.collapseGroup(groupIndex);
    };
    const expandGroup = (groupIndex) => {
        list.current.instance.expandGroup(groupIndex);
    };
    return (
        <List ...
            ref={list}
        />
    );
}
See Also