DevExtreme Vue - Custom Sources
Access to a custom data source is configured using the CustomStore component. DevExtreme provides ASP.NET and PHP extensions that help configure it and implement server-side data processing. You can also use the third-party extension for MongoDB. If these extensions are not suitable for your data source, follow the instructions below to configure the CustomStore manually.
The CustomSource's configuration differs depending on whether data is processed on the client or server. In the former case, switch the CustomStore to the raw mode and load all data from the server using the load function as shown in the following example:
jQuery
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.DataSource({ store: new DevExpress.data.CustomStore({ key: "ID", loadMode: "raw", load: function() { return $.getJSON('https://mydomain.com/MyDataService'); } }) }) }); });
Angular
import { ..., Inject } from "@angular/core"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import DataSource from "devextreme/data/data_source"; import { DxLookupModule } from "devextreme-angular"; import CustomStore from "devextreme/data/custom_store"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { lookupDataSource: any = {}; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.lookupData = new DataSource({ store: new CustomStore({ key: "ID", loadMode: "raw", load: () => { return httpClient.get('https://mydomain.com/MyDataService') .toPromise(); } }) }) } } @NgModule({ imports: [ // ... DxLookupModule, HttpClientModule ], // ... })
<dx-lookup dataSource="lookupData"> </dx-lookup>
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 (paging, filtering, sorting, etc.) that you have enabled in the DataSource. The following settings are relevant for the Lookup:
Paging settings: take and skip
Present if paginate is true and pageSize is set in the DataSource.Sorting settings: sort
Present if the DataSource's sort option is set.Filtering settings: filter
Present if the DataSource's filter option is set or searching is enabled in the widget.Searching settings: searchExpr, searchOperation, and searchValue
Present if corresponding options are set in the DataSource.Grouping settings: group
Present if the DataSource's group option is set.
After receiving these settings, the server should apply them to data and send back an object with the following structure:
{ data: [{ key: "Group 1", items: [ ... ] // result data objects }, ... ] }
If the group setting is absent, the object structure is different:
{ data: [ ... ] // result data objects }
If you specify the Lookup's value beforehand, the CustomStore should implement the byKey operation as well. Below is a generalized CustomStore configuration for the Lookup widget.
jQuery
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.DataSource({ key: "ID", load: function(loadOptions) { var d = $.Deferred(), params = {}; [ "skip", "take", "sort", "filter", "searchExpr", "searchOperation", "searchValue", "group" ].forEach(function(i) { if(i in loadOptions && isNotEmpty(loadOptions[i])) params[i] = JSON.stringify(loadOptions[i]); }); $.getJSON("http://mydomain.com/MyDataService", params) .done(function(result) { // Here, you can perform operations unsupported by the server d.resolve(result.data); }); return d.promise(); }, byKey: function(key) { var d = new $.Deferred(); $.get('https://mydomain.com/MyDataService?id=' + key) .done(function(result) { d.resolve(result); }); return d.promise(); } }) }); }); function isNotEmpty(value) { return value !== undefined && value !== null && value !== ""; }
Angular
import { ..., Inject } from "@angular/core"; import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http"; import { DxLookupModule } 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 { lookupData: any = {}; constructor(@Inject(HttpClient) httpClient: HttpClient) { _this = this; this.lookupData = new DataSource({ store: new CustomStore({ key: "ID", load: (loadOptions) => { let params: HttpParams = new HttpParams(); [ "skip", "take", "sort", "filter", "searchExpr", "searchOperation", "searchValue", "group" ].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 return result.data; }); }, byKey: function(key) { return httpClient.get('https://mydomain.com/MyDataService?id=' + key) .toPromise(); } }) }); } isNotEmpty(value: any): boolean { return value !== undefined && value !== null && value !== ""; } } @NgModule({ imports: [ // ... DxLookupModule, HttpClientModule ], // ... })
<dx-lookup [dataSource]="lookupData"> </dx-lookup>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.