All docs
V20.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Web API, PHP, MongoDB

NOTE
This article describes how to bind a DevExtreme widget to a remote data service in jQuery, Angular, Vue, and React. For information on data binding in ASP.NET MVC Controls, refer to docs.devexpress.com.

DevExtreme provides the following extensions for binding to Web API, PHP, and MongoDb services:

These extensions enable server-side filtering, sorting, grouping, and other data shaping operations according to the protocol that DevExtreme widgets use. Follow the links above for information on how to configure the extensions on the server.

To access the server from the client, configure the CustomStore as described in the Custom Data Sources article or use the createStore method. This method is part of DevExtreme.AspNet.Data, but it can also be used with the other extensions. The code below demonstrates how to use it.

NOTE
Configure remoteOperations in the DataGrid, TreeList, and PivotGridDataSource or remoteFiltering in the Scheduler to notify the widgets of the server's data shaping operations. Other DevExtreme widgets do not need this setting.
jQuery
index.js
$(function() {
    var serviceUrl = "https://mydomain.com/MyDataService";

    $("#dataGridContainer").dxDataGrid({
        dataSource: DevExpress.data.AspNet.createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        }),
        remoteOperations: { groupPaging: true }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid
    [dataSource]="remoteDataSource">
    <dxo-remote-operations
        [groupPaging]="true">
    </dxo-remote-operations>
</dx-data-grid>
import { Component } from '@angular/core';
import { createStore } from 'devextreme-aspnet-data-nojquery';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    remoteDataSource: any;

    constructor() {
        const serviceUrl: String = 'https://mydomain.com/MyDataService';
        this.remoteDataSource = createStore({
            key: 'ID',
            loadUrl: serviceUrl + '/GetAction',
            insertUrl: serviceUrl + '/InsertAction',
            updateUrl: serviceUrl + '/UpdateAction',
            deleteUrl: serviceUrl + '/DeleteAction'
        });
    }
}
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="remoteDataSource">
        <DxRemoteOperations :group-paging="true" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxRemoteOperations
} from 'devextreme-vue/data-grid';

import { createStore } from 'devextreme-aspnet-data-nojquery';

const serviceUrl = 'https://mydomain.com/MyDataService';

const remoteDataSource = createStore({
    key: 'ID',
    loadUrl: serviceUrl + '/GetAction',
    insertUrl: serviceUrl + '/InsertAction',
    updateUrl: serviceUrl + '/UpdateAction',
    deleteUrl: serviceUrl + '/DeleteAction'
});

export default {
    components: {
        DxDataGrid,
        DxRemoteOperations
    },
    data() {
        return {
            remoteDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    RemoteOperations
} from 'devextreme-react/data-grid';

import { createStore } from 'devextreme-aspnet-data-nojquery';

const serviceUrl = 'https://mydomain.com/MyDataService';

const remoteDataSource = createStore({
    key: 'ID',
    loadUrl: serviceUrl + '/GetAction',
    insertUrl: serviceUrl + '/InsertAction',
    updateUrl: serviceUrl + '/UpdateAction',
    deleteUrl: serviceUrl + '/DeleteAction'
});

class App extends React.Component {
    render() {
        return (
            <DataGrid
                dataSource={remoteDataSource}>
                <RemoteOperations groupPaging={true} />
            </DataGrid>
        );
    }
}
export default App;
See Also