DevExtreme Angular - JSON Data

To bind the TreeList to data in the JSON format, assign the data's URL to the dataSource option.

HTML
TypeScript
  • <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().

HTML
TypeScript
  • <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.

TypeScript
HTML
  • import { ..., Inject } from '@angular/core';
  • import { Http, HttpModule } from '@angular/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(Http) http: Http) {
  • this.treeListDataSource = new DataSource({
  • load: function () {
  • return http.get('https://mydomain.com/MyDataService', {
  • header1: "customHeader1",
  • header2: "customHeader2",
  • // ...
  • })
  • .toPromise()
  • .then(response => {
  • // Here, you can process the response
  • return response.json()
  • });
  • }
  • })
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule,
  • HttpModule
  • ],
  • // ...
  • })
  • <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