DevExtreme Angular - Custom Sources
You can use the CustomStore component to configure access to a custom data source. DevExtreme provides ASP.NET and PHP extensions to configure it and implement server-side data processing. You can also use a third-party extension for MongoDB.
To access a server that uses another technology, configure the CustomStore manually. In this case, data can be processed on the client or server. In the former case, switch the CustomStore to the raw mode and load all data from the server in the load function as shown in the following example:
- import { ..., Inject } from "@angular/core";
- import { HttpClient, HttpClientModule } from "@angular/common/http";
- import { DxSankeyModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- import CustomStore from "devextreme/data/custom_store";
- import "rxjs/add/operator/toPromise";
- // ...
- export class AppComponent {
- sankeyDataSource: any = {};
- constructor(@Inject(HttpClient) httpClient: HttpClient) {
- this.sankeyDataSource = new DataSource({
- store: new CustomStore({
- loadMode: "raw",
- load: () => {
- return httpClient.get('http://mydomain.com/MyDataService')
- .toPromise();
- }
- }),
- paginate: false
- });
- }
- }
- @NgModule({
- imports: [
- // ...
- DxSankeyModule,
- HttpClientModule
- ],
- // ...
- })
- <dx-sankey ...
- [dataSource]="sankeyDataSource">
- </dx-sankey>
In the latter case, use the CustomStore's load function to send data processing settings to the server. These settings are passed as a parameter to the load function and depend on the operations (filtering, sorting, and others) you enabled in the DataSource. The following settings apply to the Sankey:
Sorting settings: sort
Present if the DataSource's sort option is set.Filtering settings: filter
Present if the DataSource's filter option is set.Searching settings: searchExpr, searchOperation, and searchValue
Present if corresponding options are set in the DataSource.
After receiving these settings, the server should apply them to data and send back an object with the following structure:
- {
- data: [ ... ] // result data objects
- }
The following example shows how to make a query for data:
- import { ..., Inject } from "@angular/core";
- import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
- import { DxSankeyModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- import CustomStore from "devextreme/data/custom_store";
- import "rxjs/add/operator/toPromise";
- // ...
- export class AppComponent {
- sankeyDataSource: any = {};
- constructor(@Inject(HttpClient) httpClient: HttpClient) {
- function isNotEmpty(value: any): boolean {
- return value !== undefined && value !== null && value !== "";
- }
- this.sankeyDataSource = new DataSource({
- store: new CustomStore({
- load: (loadOptions) => {
- let params: HttpParams = new HttpParams();
- [
- "sort",
- "filter",
- "searchExpr",
- "searchOperation",
- "searchValue"
- ].forEach(function(i) {
- if(i in loadOptions && isNotEmpty(loadOptions[i]))
- params = params.set(i, JSON.stringify(loadOptions[i]));
- });
- return httpClient.get("http://mydomain.com/MyDataService", { params: params })
- .toPromise()
- .then(result => {
- // Here, you can perform operations unsupported by the server
- // or any other operations on the retrieved data
- return result.data;
- });
- }
- }),
- paginate: false
- });
- }
- }
- @NgModule({
- imports: [
- // ...
- DxSankeyModule,
- HttpClientModule
- ],
- // ...
- })
- <dx-sankey ...
- [dataSource]="sankeyDataSource">
- </dx-sankey>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.