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 - OData Service

Use the ODataStore to bind the TreeList to data an OData service supplies. 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 { DxTreeListModule } from "devextreme-angular";
import ODataStore from "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
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="productStore">
</dx-tree-list>

Data kept in the ODataStore can be processed in the DataSource, for example, it 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 { DxTreeListModule } from "devextreme-angular";
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]
    });
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="productDataSource">
</dx-tree-list>
NOTE
Setting the ODataStore's deserializeDates option to false may cause filtering issues in the TreeList. See this option's description for details.
See Also