A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Read-Only Data in JSON Format

NOTE
This article describes how to bind a DevExtreme widget to JSON data in jQuery, Angular, Vue, and React. For information on data binding in ASP.NET MVC Controls, refer to docs.devexpress.com.

To bind a widget to JSON data, pass the data URL to the widget's dataSource option. We recommend that you also use the keyExpr option (if the widget has it) to specify the key field.

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        dataSource: "https://jsonplaceholder.typicode.com/posts",
        keyExpr: "id"
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid
    [dataSource]="jsonUrl"
    keyExpr="id">
</dx-data-grid>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    jsonUrl: String = 'https://jsonplaceholder.typicode.com/posts'
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <dx-data-grid
        :data-source="jsonUrl"
        key-expr="id"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            jsonUrl: 'https://jsonplaceholder.typicode.com/posts'
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

const jsonUrl = 'https://jsonplaceholder.typicode.com/posts';

class App extends React.Component {
    render() {
        return (
            <DataGrid
                dataSource={jsonUrl}
                keyExpr="id"
            />
        );
    }
}
export default App;

This configuration enables the widget to request data objects. To customize the request or process response data, use a CustomStore. Implement its load function and enable the raw loadMode (except in the DataGrid, TreeList, PivotGrid, and Scheduler widgets, in which this mode is already enabled).

The following code shows a CustomStore configuration in which the load function sends custom parameters with the request:

jQuery
index.js
$(function() {
    $("#listContainer").dxList({
        dataSource: new DevExpress.data.CustomStore({
            key: "id",
            loadMode: "raw", // omit in the DataGrid, TreeList, PivotGrid, and Scheduler
            load: function() {
                var d = $.Deferred();
                return $.getJSON("https://mydomain.com/MyDataService", { 
                        "param1": "value1",
                        "param2": "value2"
                    })
                    .done(function(result) {
                        // You can process the response here
                        d.resolve(result);
                    })
                    .fail(function() {
                        throw "Data loading error";
                    });
            }
        })
    });
});
Angular
app.component.ts
app.module.ts
app.component.html
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import CustomStore from 'devextreme/data/custom_store';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    jsonDataSource: CustomStore;

    constructor(private http: HttpClient) {
        this.jsonDataSource = new CustomStore({
            key: 'id',
            loadMode: 'raw', // omit in the DataGrid, TreeList, PivotGrid, and Scheduler
            load: () => {
                let params: HttpParams = new HttpParams();
                params.set('param1', 'value1')
                      .set('param2', 'value2');
                return this.http.get('https://mydomain.com/MyDataService', { 
                        params: params
                    })
                    .toPromise()
                    .then(result => {
                        // You can process the response here
                        return result;
                    })
                    .catch(() => { throw 'Data loading error' });
            }
        });
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import { DxListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        DxListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
<dx-list
    [dataSource]="jsonDataSource">
</dx-list>
Vue
App.vue
<template>
    <dx-list
        :data-source="jsonDataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';
import CustomStore from 'devextreme/data/custom_store';
import 'whatwg-fetch';

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

const jsonDataSource = new CustomStore({
    key: 'id',
    loadMode: 'raw', // omit in the DataGrid, TreeList, PivotGrid, and Scheduler
    load: () => {
        let params = '?param1=value1&param2=value2';
        return fetch('https://mydomain.com/MyDataService' + params)
            .then(handleErrors)
            .then(response => response.json())
            .then(result => {
                // You can process the response here
                return result;
            })
            .catch(() => { throw 'Network error' });
    }
});

export default {
    components: {
        DxList
    },
    data() {
        return {
            jsonDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';
import CustomStore from 'devextreme/data/custom_store';
import 'whatwg-fetch';

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

const jsonDataSource = new CustomStore({
    key: 'id',
    loadMode: 'raw', // omit in the DataGrid, TreeList, PivotGrid, and Scheduler
    load: () => {
        let params = '?param1=value1&param2=value2';
        return fetch('https://mydomain.com/MyDataService' + params)
            .then(handleErrors)
            .then(response => response.json())
            .then(result => {
                // You can process the response here
                return result;
            })
            .catch(() => { throw 'Network error' });
    }
});

class App extends React.Component {
    render() {
        return (
            <List
                dataSource={jsonDataSource}
            />
        );
    }
}
export default App;