OData Service

To bind the TreeList to data provided by an OData service, use the ODataStore. 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.ODataStore({
            url: "https://examples.com/odata/Products",
            key: "Product_ID",
            onLoaded: function () {
                // Event handling commands go here
            }
        })
    });
});
Angular
TypeScript
HTML
import 'devextreme/data/odata/store';
// ...
export class AppComponent {
    productStore = new ODataStore({
        url: "https://examples.com/odata/Products",
        key: "Product_ID",
        onLoaded: function () {
            // Event handling commands go here
        }
    });
}
<dx-tree-list
    [dataSource]="productStore">
</dx-tree-list>

Data kept in the ODataStore can be processed in the DataSource. For example, the DataSource can filter data.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: "https://examples.com/odata/Products",
                key: "Product_ID"
            },
            filter: ["Product_Available", "=", true]
        })
    });
});
Angular
TypeScript
HTML
import 'devextreme/data/odata/store';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
    productDataSource = new DataSource({
        store: {
            type: "odata",
            url: "https://examples.com/odata/Products",
            key: "Product_ID"
        },
        filter: ["Product_Available", "=", true]
    });
}
<dx-tree-list
    [dataSource]="productDataSource">
</dx-tree-list>
See Also