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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.