DevExtreme jQuery - 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>
<dx-data-grid
:data-source="remoteDataSource">
<dx-remote-operations :group-paging="true" />
</dx-data-grid>
</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
Feedback