Web API, PHP, MongoDB

NOTE

This article describes how to bind a DevExtreme UI component 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 UI components 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 UI components of the server's data shaping operations. Other DevExtreme UI components 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.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.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;

Web API, PHP, MongoDB

jQuery

Angular

Vue

React

See Also