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.

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        dataSource: "https://jsonplaceholder.typicode.com/posts"
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid
    [dataSource]="jsonUrl">
</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>
    <DxDataGrid
        :data-source="jsonUrl"
    />
</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}
            />
        );
    }
}
export default App;

This configuration enables the widget to request data objects. To specify the key field, 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>
    <DxList
        :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;