DevExtreme React - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: "https://jsonplaceholder.typicode.com/posts"
    });
});
Angular
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().

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?"
    });
});
Angular
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.

jQuery
JavaScript
$(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
TypeScript
HTML
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