DevExtreme jQuery/JS - Expand and Collapse Nodes

Initially

If a node is supposed to be expanded initially, set its expanded field to true. This is a conventional field name defined by the Default Item Template pattern. If another field specifies whether a node is expanded or collapsed, assign its name to the expandedExpr option as shown in the following code.

jQuery
JavaScript
var hierarchicalData = [{
    name: 'Fruits',
    isExpanded: true,
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    isExpanded: true,
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'name',
        displayExpr: 'name',
        expandedExpr: 'isExpanded'
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    expandedExpr="isExpanded">
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    hierarchicalData = [{
        name: 'Fruits',
        isExpanded: true,
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        isExpanded: true,
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Using the API

To expand or collapse a node programmatically, call the expandItem(itemElement) or collapseItem(itemElement) method passing the key of the node as a parameter.

jQuery
JavaScript
$("#treeViewContainer").dxTreeView("expandItem", nodeKey);
// $("#treeViewContainer").dxTreeView("collapseItem", nodeKey);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeViewModule, DxTreeViewComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    expandNode (key) {
        this.treeView.instance.expandItem(key);
    }
    collapseNode (key) {
        this.treeView.instance.collapseItem(key);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Events

To execute certain commands when a node is expanded or collapsed, handle the itemExpanded or itemCollapsed event. Assign event handling functions to the onItemExpanded or onItemCollapsed option when you configure the widget if these functions are going to remain unchanged.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        onItemExpanded: function (e) {
            // Handler of the "itemExpanded" event
        },
        onItemCollapsed: function (e) {
            // Handler of the "itemCollapsed" event
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    (onItemExpanded)="onItemExpanded($event)"
    (onItemCollapsed)="onItemCollapsed($event)">
</dx-tree-view>
import { DxTreeViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onItemExpanded (e) {
        // Handler of the "itemExpanded" event
    }
    onItemCollapsed (e) {
        // Handler of the "itemCollapsed" event
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

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.

JavaScript
var itemCollapsedEventHandler1 = function (e) {
    // First handler of the "itemCollapsed" event
};

var itemCollapsedEventHandler2 = function (e) {
    // Second handler of the "itemCollapsed" event
};

$("#treeViewContainer").dxTreeView("instance")
    .on("itemCollapsed", itemCollapsedEventHandler1)
    .on("itemCollapsed", itemCollapsedEventHandler2);
See Also