TreeList

The TreeList is a widget that represents data from a local or remote source in the form of a multi-column tree view. This widget offers such features as sorting, filtering, editing, selection, etc.

Module: ui/tree_list
Export: default
TreeList interactive configuration
Copy Code
Copy to Codepen
$("#treelist").dxTreeList({
});

You can create this widget using one of the following approaches.

jQuery
JavaScript
HTML
$(function () {
    $("#treeList").dxTreeList({
        dataSource: customers,
        columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
    });
});
<div id="treeList"></div>
Angular
HTML
TypeScript
<dx-tree-list [dataSource]="customers">
    <dxi-column dataField="CompanyName"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="State"></dxi-column>
    <dxi-column dataField="Phone"></dxi-column>
    <dxi-column dataField="Fax"></dxi-column>
</dx-tree-list>
export class AppComponent {
    customers = [
        // ...   
    ];
}
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-tree-list="{
        dataSource: customers,
        columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.customers = [
            // ...   
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxTreeList: {
    dataSource: customers,
    columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
}"></div>
var viewModel = {
    customers: [
        // ...
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().TreeList()
    .ID("treeList")
    .DataSource(Customers)
    .Columns(columns => {
        columns.Add().DataField("CompanyName");
        columns.Add().DataField("City");
        columns.Add().DataField("State");
        columns.Add().DataField("Phone");
        columns.Add().DataField("Fax");
    })
)
@(Html.DevExtreme().TreeList() _
    .ID("treeList") _
    .DataSource(Customers) _
    .Columns(Sub(columns)
        columns.Add().DataField("CompanyName")
        columns.Add().DataField("City")
        columns.Add().DataField("State")
        columns.Add().DataField("Phone")
        columns.Add().DataField("Fax")
    End Sub)
)

Note that DevExtreme widgets require linking the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information about linking these libraries to your project, refer to the topics in the Installation section.

View Demo Watch Video

See Also

Configuration

An object defining configuration options for the TreeList widget.

Methods

This section describes methods that you can use to manipulate the TreeList widget in code.

Events

This section describes events raised by this widget.

See Also

Node

A TreeList node's structure.

You can access nodes using the getRootNode() method and within some event handlers, for example, onNodesInitialized.

Row

The TreeList row object's structure.

A row is a visual representation of a node. Row objects can be accessed using the getVisibleRows() method and within some event handlers, for example, onCellClick or onRowClick.