DevExtreme Angular - ArrayStore

If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: new DevExpress.data.ArrayStore({
            data: employees,
            onLoaded: function () {
                // Event handling commands go here
            }
        })
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    employees = [
        // ...
    ];
    employeeStore = new ArrayStore({
        data: this.employees,
        onLoaded: function () {
            // Event handling commands go here
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="employeeStore">
</dx-tree-list>

Data kept in the ArrayStore can be processed in the DataSource. For example, the DataSource can sort data.

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

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: new DevExpress.data.DataSource({
            store: employees,
            sort: { getter: "fullName", desc: true }
        })
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    employees = [
        // ...
    ];
    employeeDataSource = new DataSource({
        store: this.employees,
        sort: { getter: "fullName", desc: true }
    });
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="employeeDataSource">
</dx-tree-list>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the TreeList automatically places it into an ArrayStore wrapped in the DataSource that you can get using the getDataSource() method.
See Also