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"
  • });
  • });

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";
  • });
  • }
  • })
  • });
  • });