General Information

.NET Subscription

What's Included

DevExpress Installation

DevExpress Code Examples

Common Tools

Project Converter

Assembly Deployment Tool

Localization Service

Quality Assurance and Productivity

CodeRush for Visual Studio (FREE)

TestCafe Studio

Desktop

Controls

WinForms

WPF

VCL

WinUI

Tools

WinForms Skin Editor

WPF Theme Designer

WPF Theme Editor (Legacy)

Coded UI Test Extension

Frameworks and Libraries

XAF - Cross-Platform .NET App UI

XPO - .NET ORM Library (FREE)

XPO Profiler

Core Libraries

Drawing Graphics Library

.NET App Security & Web API Service (FREE)

Web

Mobile

Xamarin UI Controls (FREE)

.NET MAUI (FREE)

Enterprise and Analytic Tools

Reporting

Report and Dashboard Server

BI Dashboard

Office File API

End-User Documentation

Interface Elements for Desktop

Interface Elements for Web

Dashboard for Desktop

Dashboard for Web

DevExtreme jQuery/JS - Read-Only Data in JSON Format

To bind a UI component to JSON data, pass the data URL to the UI component's dataSource property.

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

React

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:

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 { lastValueFrom } from 'rxjs';
 
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 lastValueFrom(this.http.get('https://mydomain.com/MyDataService', { 
                        params: params
                    }))
                    .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

React

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery/JS - Read-Only Data in JSON Format