Angular TreeList - JSON Data
To bind the TreeList to data in the JSON format, assign the data's URL to the dataSource property.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ dataSource: "https://jsonplaceholder.typicode.com/posts" }); });
Angular
<dx-tree-list dataSource="https://jsonplaceholder.typicode.com/posts"> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Note that you can also use a JSONP callback parameter supported by jQuery.ajax().
jQuery
$(function() { $("#treeListContainer").dxTreeList({ dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?" }); });
Angular
<dx-tree-list dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
If you need to specify request headers or process response data, use the CustomStore - a flexible instrument that allows you to configure data access manually. Implement its load function as shown in the code below to add custom headers to the request. Note that you can specify CustomStore members directly in the DataSource object instead of declaring them explicitly.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ dataSource: new DevExpress.data.DataSource({ load: function () { var d = $.Deferred(); return $.getJSON('https://mydomain.com/MyDataService', { header1: "customHeader1", header2: "customHeader2", // ... }) .done(function(result) { // Here, you can process the response d.resolve(result); }); } }) }); });
Angular
import { ..., Inject } from "@angular/core"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import { DxTreeListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; import "devextreme/data/custom_store"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { treeListDataSource: any = {}; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.treeListDataSource = new DataSource({ load: function () { return httpClient.get('https://mydomain.com/MyDataService', { headers: { "header1": "customHeader1", "header2": "customHeader2", // ... } }) .toPromise() .then(result => { // Here, you can process the response return result; }); } }) } } @NgModule({ imports: [ // ... DxTreeListModule, HttpClientModule ], // ... })
<dx-tree-list ... [dataSource]="treeListDataSource"> </dx-tree-list>
The CustomStore requires requires thorough configuration if data is processed on the server. See the Custom Sources topic for more details.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.