Angular TreeList - 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 property to false may cause filtering issues in the TreeList. See this property'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.