DevExtreme jQuery - 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.
jQuery
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)
)
}
});
});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
],
// ...
})To collapse or expand a specific group programmatically, call the collapseGroup(groupIndex) or expandGroup(groupIndex) method.
jQuery
JavaScript
var list = $("#listContainer").dxList("instance");
list.collapseGroup(0); // collapses the group with index 0
list.expandGroup(4); // expands the group with index 4Angular
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- List - Grouping in the Data Source
- List API Reference
Feedback