Expand and Collapse a Group

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

JavaScript
var 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)
            )
        }
    });
});

View Demo

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

JavaScript
var list = $("#listContainer").dxList("instance");
list.collapseGroup(0); // collapses the group with index 0
list.expandGroup(4); // expands the group with index 4
See Also