Configuration

This section describes options that configure the CustomStore.

byKey

Specifies a custom implementation of the byKey(key) method.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

A key value.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the data item is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var store = new DevExpress.data.CustomStore({
    // ...
    byKey: function (key) {
        var d = new $.Deferred();
        $.get("http://mydomain.com/MyDataService?id=" + key)
            .done(function (dataItem) {
                d.resolve(dataItem);
            });
        return d.promise();
    }
});
Angular
TypeScript
import { ..., Inject } from '@angular/core';
import CustomStore from "devextreme/data/custom_store";
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/toPromise';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(Http) http: Http) {
        this.store = new CustomStore({
            // ...
            byKey: (key) => {
                return http.get("http://mydomain.com/MyDataService?id=" + key)
                    .toPromise()
                    .then(response => {
                        return {
                            data: response.json().data
                        };
                    });
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpModule 
    ],
    // ...
})

cacheRawData

Specifies whether raw data should be saved in the cache. Applies only if loadMode is "raw".

Type:

Boolean

Default Value: true

Data caching allows the CustomStore to decrease the number of data requests. On the downside, cached data and data in your source may become out of sync. If keeping them synchronized is crucial in your scenario, disable data caching by setting the cacheRawData option to false. In this case, the CustomStore will send a request for data on every call of the load, byKey and totalCount functions.

See Also

errorHandler

Specifies the function called when the Store causes an error.

Type:

function

The function passed to this option takes on the JavaScript Error object as a parameter.

JavaScript
var storeConfig = {
    errorHandler: function(error) {
        console.log(error.message);
    }
};

insert

Specifies a custom implementation of the insert(values) method.

Type:

function

Function parameters:
values:

Object

The data item to be inserted.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the data item is inserted. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var store = new DevExpress.data.CustomStore({
    // ...
    insert: function (values) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity",
            method: "POST",
            data: values
        })
    }
});
Angular
TypeScript
import { ..., Inject } from '@angular/core';
import CustomStore from "devextreme/data/custom_store";
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/toPromise';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(Http) http: Http) {
        this.store = new CustomStore({
            // ...
            insert: (values) => {
                return http.post("http://mydomain.com/MyDataService/myEntity", values)
                    .toPromise();
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpModule 
    ],
    // ...
})

key

Specifies the key property or properties.

Type:

String

|

Array<String>

The key configuration option is required if you create a Store for read-write data access. An appropriate getter specifies the key property. If you need to specify a compound key property, assign an array of getters to this option.

The following example demonstrates how to set id and code key properties:

JavaScript
var storeConfig = {
    key: ["id", "code"]
}

load

Specifies a custom implementation of the load(options) method.

Type:

function

Function parameters:
options:

LoadOptions

Data processing settings.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

This function's implementation has certain specifics depending on the widget in which you use the CustomStore. Refer to the Custom Sources topic of a specific widget for details:

See Also

loadMode

Specifies how data returned by the load function is treated.

Type:

String

Default Value: 'processed'
Accepted Values: 'processed' | 'raw'

Specify this option depending on the behavior you implemented for the load function. If this function sends data shaping options to the server and fetches processed data, then loadMode should be "processed". If the load function simply fetches raw, unprocessed data from the server, set loadMode to "raw". In this case, the raw data will be processed on the client automatically.

See Also

onInserted

A handler for the inserted event.

Type:

function

Function parameters:
values:

Object

The inserted item.

key:

Object

|

String

|

Number

The item's key.

Assign a function to perform a custom action after a data item is added.

onInserting

A handler for the inserting event.

Type:

function

Function parameters:
values:

Object

The item to be inserted.

Assign a function to perform a custom action before a data item is added.

onLoaded

A handler for the loaded event.

Type:

function

Function parameters:
result:

Array<any>

The loaded data.

Assign a function to perform a custom action after data is loaded.

onLoading

A handler for the loading event.

Type:

function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

Assign a function to perform a custom action before data is loaded.

onModified

A handler for the modified event.

Type:

function

Assign a function to perform a custom action after data is modified.

onModifying

A handler for the modifying event.

Type:

function

Assign a function to perform a custom action before the data is modified.

onRemoved

A handler for the removed event.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The removed item's key.

Assign a function to perform a custom action after a data item has been removed.

onRemoving

A handler for the removing event.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The key of the item to be removed.

Assign a function to perform a custom action before a data item is removed.

onUpdated

A handler for the updated event.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The updated item's key.

values:

Object

New item values.

Assign a function to perform a custom action after a data item has been updated.

onUpdating

A handler for the updating event.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The key of the item to be updated.

values:

Object

New item values.

Assign a function to perform a custom action before a data item is updated.

remove

Specifies a custom implementation of the remove(key) method.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be removed.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the data item is removed. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var store = new DevExpress.data.CustomStore({
    // ...
    remove: function (key) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity" + encodeURIComponent(key),
            method: "DELETE",
        })
    }
});
Angular
TypeScript
import { ..., Inject } from '@angular/core';
import CustomStore from "devextreme/data/custom_store";
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/toPromise';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(Http) http: Http) {
        this.store = new CustomStore({
            // ...
            remove: (key) => {
                return http.delete("http://mydomain.com/MyDataService" + encodeURIComponent(key))
                    .toPromise();
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpModule 
    ],
    // ...
})

totalCount

Specifies a custom implementation of the totalCount(options) method.

Type:

function

Function parameters:
loadOptions:

Object

Filtering and grouping settings.

Object structure:
filter:

Object

Data filtering settings.

group:

Object

Data grouping settings.

Return Value:

Promise<Number> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

update

Specifies a custom implementation of the update(key, values) method.

Type:

function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be updated.

values:

Object

An object with new values for the data item.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the data item is updated. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var store = new DevExpress.data.CustomStore({
    // ...
    update: function (key, values) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity" + encodeURIComponent(key),
            method: "PUT",
            data: values
        })
    }
});
Angular
TypeScript
import { ..., Inject } from '@angular/core';
import CustomStore from "devextreme/data/custom_store";
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/toPromise';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(Http) http: Http) {
        this.store = new CustomStore({
            // ...
            update: (key, values) => {
                return http.put("http://mydomain.com/MyDataService/myEntity" + encodeURIComponent(key), values)
                    .toPromise();
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpModule 
    ],
    // ...
})

useDefaultSearch

Specifies whether the store combines the search and filter expressions. Defaults to true if the loadMode is "raw" and false if it is "processed".

Type:

Boolean

Default Value: undefined