API
All rows are collapsed by default. Assign an array of keys to the expandedRowKeys option to expand specific rows initially. If a to-be-expanded row lies deep in the hierarchy, make sure to include keys of all its parent rows as well. Set the autoExpandAll option to true if all rows should be expanded initially.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
expandedRowKeys: [1, 5, 18],
// autoExpandAll: true
});
});Angular
<dx-tree-list ...
[expandedRowKeys]="[1, 5, 18]">
<!-- autoExpandAll: true -->
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})Call the expandRow(key) or collapseRow(key) method to respectively expand or collapse a row at runtime. You can check a row's current state by calling the isRowExpanded(key) method.
jQuery
function toggleRow (key) {
var treeList = $("#treeListContainer").dxTreeList("instance");
if (treeList.isRowExpanded(key)) {
treeList.collapseRow(key);
} else {
treeList.expandRow(key);
}
}Angular
import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
@ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
// Prior to Angular 8
// @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
toggleRow (key) {
if (this.treeList.instance.isRowExpanded(key)) {
this.treeList.instance.collapseRow(key);
} else {
this.treeList.instance.expandRow(key);
}
}
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TreeList Demos
Events
To execute certain commands before or after a row was expanded or collapsed, handle the rowExpanding, rowExpanded, rowCollapsing or rowCollapsed event. Assign event handling functions to the corresponding onEventName options when you configure the widget if these functions are going to remain unchanged.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
onRowExpanding: function (e) {
// Handler of the "rowExpanding" event
},
onRowExpanded: function (e) {
// Handler of the "rowExpanded" event
},
onRowCollapsing: function (e) {
// Handler of the "rowCollapsing" event
},
onRowCollapsed: function (e) {
// Handler of the "rowCollapsed" event
}
});
});Angular
<dx-tree-list ...
(onRowExpanding)="onRowExpanding($event)"
(onRowExpanded)="onRowExpanded($event)"
(onRowCollapsing)="onRowCollapsing($event)"
(onRowCollapsed)="onRowCollapsed($event)">
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
onRowExpanding (e) {
// Handler of the "rowExpanding" event
},
onRowExpanded (e) {
// Handler of the "rowExpanded" event
},
onRowCollapsing (e) {
// Handler of the "rowCollapsing" event
},
onRowCollapsed (e) {
// Handler of the "rowCollapsed" event
}
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
var rowCollapsedEventHandler1 = function (e) {
// First handler of the "rowCollapsed" event
};
var rowCollapsedEventHandler2 = function (e) {
// Second handler of the "rowCollapsed" event
};
$("#treeListContainer").dxTreeList("instance")
.on("rowCollapsed", rowCollapsedEventHandler1)
.on("rowCollapsed", rowCollapsedEventHandler2);See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TreeList Demos