DevExtreme jQuery - Read-Only Data in JSON Format
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
$(function() { $("#dataGridContainer").dxDataGrid({ dataSource: "https://jsonplaceholder.typicode.com/posts", keyExpr: "id" }); });
Angular
<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
<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
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
$(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
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
<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¶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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.