All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Array Only

To bind the TreeList to an array, pass this array to the dataSource option.

jQuery
JavaScript
var employees = [
    { id: '1', fullName: "John Heart", position: "CEO" }, 
    { id: '1_1', parentId: '1', fullName: "Samantha Bright",  position: "COO" }, 
    { id: '2_1', parentId: '2', fullName: "Robert Reagan", position: "CMO" }, 
    { id: '2', fullName: "Greta Sims", position: "HR Manager" }
];

$(function(){
    $("#treeListContainer").dxTreeList({
        dataSource: employees
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    employees = [
        { id: '1', fullName: "John Heart", position: "CEO" }, 
        { id: '1_1', parentId: '1', fullName: "Samantha Bright",  position: "COO" }, 
        { id: '2_1', parentId: '2', fullName: "Robert Reagan", position: "CMO" }, 
        { id: '2', fullName: "Greta Sims", position: "HR Manager" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="employees">
</dx-tree-list>

View Demo

If objects in the array need to be processed (sorted or filtered), you can create a Query. For example, in the following code, a Query sorts objects in the employees array in the descending order by the fullName field.

jQuery
JavaScript
var employees = [
    { id: "1", parentId: "0", fullName: "Samantha Bright",  position: "COO" },
    // ...
];

$(function(){
    $("#treeListContainer").dxTreeList({
        dataSource: DevExpress.data.query(employees)
                        .sortBy("fullName", true)
                        .toArray()
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
    employees = [
        { id: "1", parentId: "0", fullName: "Samantha Bright",  position: "COO" },
        // ...
    ];
    getSortedEmployees () {
        return query(this.employees).sortBy("fullName", true).toArray();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="getSortedEmployees()">
</dx-tree-list>
See Also