Angular TreeList - Expand and Collapse Rows

TreeList allows you to configure expanded rows on initialization, and expand/collapse rows programmatically.

API

All TreeList rows are initially collapsed. If you enable autoExpandAll, all rows are initially expanded. Specify the expandedRowKeys array to expand specific rows. To expand a nested row, include all parent row keys (in addition to the nested row key) in expandedRowKeys.

jQuery
index.js
// Expand specific rows
$("#tree-list").dxTreeList({
    expandedRowKeys: [1, 5, 18],
});

// Expand all rows
$("#tree-list").dxTreeList({
    autoExpandAll: true
});
Angular
app.component.html
app.component.ts
<!-- Expand specific rows -->
<dx-tree-list ...
    [expandedRowKeys]="[1, 5, 18]"
>
    <!-- ... -->
</dx-tree-list>

<!-- Expand all rows -->
<dx-tree-list ...
    [autoExpandAll]="true"
>
    <!-- ... -->
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";

// ...
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
})
Vue
App.vue
<template>
    <!-- Expand specific rows -->
    <DxTreeList ...
        :expanded-row-keys="[1, 5, 18]"
    />

    <!-- Expand all rows -->
    <DxTreeList ...
        :auto-expand-all="true"
    />
</template>

<script setup lang="ts">
import { DxTreeList } from 'devextreme-vue/tree-list';

</script>
React
App.tsx
import { TreeList } from 'devextreme-react/tree-list';

function App() {
    return (
        {/* Expand specific rows */}
        <TreeList ...
            defaultExpandedRowKeys={[1, 5, 18]}
        />

        {/* Expand all rows */}
        <TreeList ...
            autoExpandAll={true}
        />
    );
}

To expand/collapse rows at runtime, call expandRow(key)/collapseRow(key) or modify the expandedRowKeys array. To collapse all rows, set expandedRowKeys to an empty array ([]).

To toggle a row between expanded and collapsed states, you can implement the isRowExpanded(key) method as follows:

jQuery
index.js
const treeList = $("#tree-list").dxTreeList("instance");

function toggleRow(key) {
    if (treeList.isRowExpanded(key)) {
        treeList.collapseRow(key);
    } else {
        treeList.expandRow(key);
    }
}
Angular
app.component.ts
import { ViewChild } from "@angular/core";
import { DxTreeListComponent } from "devextreme-angular/ui/tree-list";

// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList!: DxTreeListComponent;

    toggleRow(key) {
        if (this.treeList.instance.isRowExpanded(key)) {
            this.treeList.instance.collapseRow(key);
        } else {
            this.treeList.instance.expandRow(key);
        }
    }
}
Vue
App.vue
<template>
    <DxTreeList ...
        ref="treeListRef"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxTreeList } from 'devextreme-vue/tree-list';

const treeListRef = ref(null);

function toggleRow(key) {
    if (treeList.value.instance.isRowExpanded(key)) {
        treeList.value.instance.collapseRow(key);
    } else {
        treeList.value.instance.expandRow(key);
    }
}
</script>
React
App.tsx
import React, { useRef } from 'react';
import { TreeList } from 'devextreme-react/tree-list';

function App() {
    const treeList = useRef(null);

    function toggleRow(key) {
        if (treeList.current.instance().isRowExpanded(key)) {
            treeList.current.instance().collapseRow(key);
        } else {
            treeList.current.instance().expandRow(key);
        }
    };

    return (
        <TreeList ...
            ref="treeList"
        />
    );
}
See Also
jQuery
Angular
Vue
React

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 properties when you configure the UI component if these functions are going to remain unchanged.

jQuery
JavaScript
$(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
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ...
        @row-expanding="onRowExpanding"
        @row-expanded="onRowExpanded"
        @row-collapsing="onRowCollapsing"
        @row-collapsed="onRowCollapsed">
    </DxTreeList>
</template>

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

import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    // ...
    methods: {
        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
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

const onRowExpanding = (e) => {
    // Handler of the "rowExpanding" event
};
const onRowExpanded = (e) => {
    // Handler of the "rowExpanded" event
};
const onRowCollapsing = (e) => {
    // Handler of the "rowCollapsing" event
};
const onRowCollapsed = (e) => {
    // Handler of the "rowCollapsed" event
};

export default function App() {
    return (
        <TreeList ...
            onRowExpanding={onRowExpanding}
            onRowExpanded={onRowExpanded}
            onRowCollapsing={onRowCollapsing}
            onRowCollapsed={onRowCollapsed}>
        </TreeList>
    );
}
jQuery

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.

JavaScript
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
jQuery
Angular
Vue
React