DevExtreme Angular - CustomStore Methods

|

|

Number

A data item's 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({
    // CustomStore is configured here
});

// Getting the data item with key 1
store.byKey(1)
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // CustomStore is configured here
        });
        // Getting the data item with key 1
        this.store.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

clearRawDataCache()

Deletes data from the cache. Takes effect only if the cacheRawData option is true.

jQuery

var store = new DevExpress.data.CustomStore({
    // CustomStore is configured here
    cacheRawData: true
});

store.clearRawDataCache();

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor( ... ) {
        this.store = new CustomStore({
            // CustomStore is configured here
            cacheRawData: true
        });
        this.store.clearRawDataCache();
    };
}

insert(values)

Adds a data item to the store.

Parameters:

values:

A data item.

Return Value:

Promise<any> (jQuery or native)

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

jQuery

JavaScript

var store = new DevExpress.data.CustomStore({
    // CustomStore is configured here
});

store.insert({ id: 1, name: "John Doe" })
     .done(function (dataItem, key) {
         // Process the "key" and "dataItem" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // CustomStore is configured here
        });
        this.store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataItem) => { /* Process the "dataItem" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

NOTE

The data item's key value should be unique or the insertion fails.

key()

Gets the key property (or properties) as specified in the key option.

Return Value: any

The key option's value.

jQuery

JavaScript

var store = new DevExpress.data.CustomStore({
    // ...
    key: "ProductID"
});

var keyProps = store.key(); // returns "ProductID"

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // ...
            key: "ProductID"
        });
        let keyProps = this.store.key(); // returns "ProductID"
    };
}

keyOf(obj)

Gets a data item's key value.

Parameters:

obj:

A data item.

Return Value: any

The data item's key value.

jQuery

JavaScript

var store = new DevExpress.data.CustomStore({
    // ...
    key: "id"
});

var key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // ...
            key: "id"
        });
        let key = this.store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    };
}

load()

Starts loading data.

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.

load(options)

Starts loading data.

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.

jQuery

JavaScript

var store = new DevExpress.data.CustomStore({
    // CustomStore is configured here
});

store.load(options)
     .done(function (data) {
         // Process "data" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
import DevExpress from "devextreme/bundles/dx.all";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // CustomStore is configured here
        });
        let options: DevExpress.data.LoadOptions = {
            // Data processing settings are specified here
        };
        this.store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

off(eventName)

Detaches all event handlers from a single event.

Parameters:

eventName:

The event's name.

Return Value:

The object for which this method is called.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

on(eventName, eventHandler)

Subscribes to an event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

on(events)

Subscribes to events.

Parameters:

events:

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

remove(key)

Removes a data item with a specific key from the store.

Parameters:

key:

|

|

Number

A data item's key value.

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({
    // CustomStore is configured here
});

// Removing the data item with key 1
store.remove(1)
     .done(function (key) {
         // Process the "key" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // CustomStore is configured here
        });
        // Removing the data item with key 1
        this.store.remove(1)
            .then(
                (key) => { /* Process the "key" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

totalCount(options)

Gets the total count of items the load() function returns.

Parameters:

obj:

Filtering and grouping options.

Object structure:

Name	Type	Description
filter	Object	A filtering expression; described in the Filtering section.
group	Object	A grouping expression; described in the Grouping section.

Name

Type

Description

filter

A filtering expression; described in the Filtering section.

group

A grouping expression; described in the Grouping section.

Return Value:

Promise<Number> (jQuery or native)

A Promise that is resolved after the total item count is obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

var store = new DevExpress.data.CustomStore({
    // CustomStore is configured here
});

store.totalCount()
     .done(function (count) {
         // Process the "count" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // CustomStore is configured here
        });
        this.store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

update(key, values)

Updates a data item with a specific key.

Parameters:

key:

|

|

Number

A data item's key value.

values: