All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#gridContainer").dxDataGrid({
        dataSource: "https://jsonplaceholder.typicode.com/posts"
    });
});
Angular
HTML
TypeScript
<dx-data-grid
    dataSource="https://jsonplaceholder.typicode.com/posts">
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

jQuery
JavaScript
$(function() {
    $("#gridContainer").dxDataGrid({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?"
    });
});
Angular
HTML
TypeScript
<dx-data-grid
    dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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() {
    $("#dataGridContainer").dxDataGrid({
        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 { DxDataGridModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
import "devextreme/data/custom_store";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    gridDataSource: any = {};
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        this.gridDataSource = 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: [
        // ...
        DxDataGridModule,
        HttpClientModule
    ],
    // ...
})
<dx-data-grid ...
    [dataSource]="gridDataSource">
</dx-data-grid>

The CustomStore requires thorough configuration if data is processed on the server. See the Custom Sources topic for more details.

See Also