DevExtreme Angular - 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
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            store: new DevExpress.data.CustomStore({
                key: "ID",
                loadMode: "raw",   
                load: function () {
                    return $.getJSON('https://mydomain.com/MyDataService');
                }
            })
        })
    });
});
Angular
TypeScript
HTML
import { ..., Inject } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import DataSource from 'devextreme/data/data_source';
import { DxSelectBoxModule } from 'devextreme-angular';
import CustomStore from 'devextreme/data/custom_store';
import 'rxjs/add/operator/toPromise';
// ...
export class AppComponent  {
    selectBoxData: any = {};
    constructor(@Inject(Http) http: Http) {
        this.selectBoxData = new DataSource({
            store: new CustomStore({
                key: "ID",
                loadMode: "raw",   
                load: function () {
                    return http.get('https://mydomain.com/MyDataService')
                                .toPromise()
                                .then(response => {
                                    return response.json();
                                });
                }
            })
        })
    }
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule,
         HttpModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="selectBoxData">
</dx-select-box>
NOTE
We recommend not using this mode with large amounts of data because all data is loaded at once.

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 SelectBox:

  • take: Number
    Restricts the number of top-level data objects that are returned.

  • skip: Number
    Skips some data objects from the start of the result set. skip and take are present if paginate is true and pageSize is set in the DataSource.

  • sort: Array
    Defines sorting parameters. Present if the DataSource's sort option is set. Multiple parameters apply to the data in sequence to implement multi-level sorting. Contains objects of the following structure:

    { selector: "field", desc: true/false }

  • filter: Array
    Defines filtering parameters. Present if the DataSource's filter option is set. Possible variants:

    • Binary filter

      [ "field", "=", 3 ]

    • Unary filter

       [ "!", [ "field", "=", 3 ] ]

    • Complex filter

      [
    [ "field", "=", 10 ],
    "and",
    [
        [ "otherField", "<", 3 ],
        "or",
        [ "otherField", ">", 11 ]
    ]
]

    See the Filtering topic for more details.

  • searchExpr, searchOperation and searchValue: Strings
    Another way to define a filter restricted to one criterion. Present if corresponding options are set in the DataSource.

  • group: Array
    Defines grouping levels to be applied to the data. Present if the DataSource's group option is set. Contains objects of the following structure:

    { selector: "field", desc: true/false }

    See the Grouping topic for more details.

After receiving these settings, the server should apply them to data and send back an object of 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 SelectBox's value beforehand, the CustomStore should implement the byKey operation as well. Below is a generalized CustomStore configuration for the SelectBox widget.

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            key: "ID",
            load: function (loadOptions) {
                var d = $.Deferred();
                $.getJSON("http://mydomain.com/MyDataService", {
                    skip: loadOptions.skip,
                    take: loadOptions.take,
                    sort: loadOptions.sort ? JSON.stringify(loadOptions.sort) : "",
                    filter: loadOptions.filter ? JSON.stringify(loadOptions.filter) : "",
                    searchExpr: loadOptions.searchExpr ? JSON.stringify(loadOptions.searchExpr) : "",
                    searchOperation: loadOptions.searchOperation,
                    searchValue: loadOptions.searchValue,
                    group: loadOptions.group ? JSON.stringify(loadOptions.group) : ""
                }).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();
            }
        })
    });
});
Angular
TypeScript
HTML
import { ..., Inject } from '@angular/core';
import { Http, HttpModule, URLSearchParams } from '@angular/http';
import { DxSelectBoxModule } 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 {
    selectBoxData: any = {};
    constructor(@Inject(Http) http: Http) {
        this.selectBoxData = new DataSource({
            store: new CustomStore({
                key: "ID",
                load: function (loadOptions) {
                    let params: URLSearchParams = new URLSearchParams();
                    params.set("skip", loadOptions.skip);
                    params.set("take", loadOptions.take);
                    params.set("sort", loadOptions.sort ? JSON.stringify(loadOptions.sort) : "");
                    params.set("searchExpr", loadOptions.searchExpr ? JSON.stringify(loadOptions.searchExpr) : "");
                    params.set("searchOperation", loadOptions.searchOperation);
                    params.set("searchValue", loadOptions.searchValue);
                    params.set("filter", loadOptions.filter ? JSON.stringify(loadOptions.filter) : "");
                    params.set("group", loadOptions.group ? JSON.stringify(loadOptions.group) : "");
                    return http.get('http://mydomain.com/MyDataService', {
                                    search: params
                                })
                                .toPromise()
                                .then(response => {
                                    var json = response.json();
                                    // You can process the received data here
                                    return {
                                        data: json.data
                                    }
                                });
                },
                byKey: function (key) {
                    return http.get('https://mydomain.com/MyDataService?id=' + key)
                                .toPromise()
                                .then(response => {
                                    var json = response.json();
                                    return {
                                        data: json.data
                                    };
                                });
                }
            })
        });
    }
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule,
         HttpModule 
     ],
     // ...
 })
<dx-select-box
    [dataSource]="selectBoxData">
</dx-select-box>
See Also