DevExtreme Angular - 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.

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.

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