JavaScript/jQuery TreeList - Expand and Collapse Rows

API

All rows are collapsed by default. Assign an array of keys to the expandedRowKeys property 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 property to true if all rows should be expanded initially.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        expandedRowKeys: [1, 5, 18],
        // autoExpandAll: true
    });
});
Angular
HTML
TypeScript
<dx-tree-list ...
    [expandedRowKeys]="[1, 5, 18]">
    <!-- [autoExpandAll]="true" -->
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ...
        :expanded-row-keys="[1, 5, 18]">
        <!-- :auto-expand-all="true" -->
    </DxTreeList>
</template>

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

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

export default {
    components: {
        DxTreeList
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    return (
        <TreeList ...
            defaultExpandedRowKeys={[1, 5, 18]}>
            <!-- autoExpandAll={true} -->
        </TreeList>
    );
}

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
JavaScript
function toggleRow (key) {
    var treeList = $("#treeListContainer").dxTreeList("instance");
    if (treeList.isRowExpanded(key)) {
        treeList.collapseRow(key);
    } else {
        treeList.expandRow(key);
    }
}
Angular
TypeScript
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ref="treeListRefKey">
        <!-- ... -->
    </DxTreeList>
</template>

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

import DxTreeList, {
    // ...
} from 'devextreme-vue/tree-list';

const treeListRefKey = "my-tree-list";

export default {
    components: {
        DxTreeList,
        // ...
    },
    data: function() {
        return {
            treeListRefKey
        };
    },
    methods: {
        toggleRow (key) {
            if (this.treeList.isRowExpanded(key)) {
                this.treeList.collapseRow(key);
            } else {
                this.treeList.expandRow(key);
            }
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>
React
App.js
import React, { useRef, useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    // ...
} from 'devextreme-react/tree-list';

export default function App() {
    const treeList = useRef(null);
    const toggleRow = (key) => {
        if (treeList.current.instance.isRowExpanded(key)) {
            treeList.current.instance.collapseRow(key);
        } else {
            treeList.current.instance.expandRow(key);
        }
    };

    return (
        <TreeList ref="treeList">
            {/* ... */}
        </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