Read-Only Data in JSON Format
NOTE
This article describes how to bind a DevExtreme UI component 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 UI component to JSON data, pass the data URL to the UI component's dataSource property.
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 UI component 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 UI components, 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¶m2=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¶m2=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;Feedback