DevExtreme React - LocalStore 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.LocalStore({
    // LocalStore 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 LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore 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 */ }
        );
    };
}

clear()

Removes data from the local storage.

Depending on the immediate option's value, this method removes data immediately or after a specified delay.

jQuery

JavaScript

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

Angular

TypeScript

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore is configured here
        });
        this.store.clear();
    }
}

createQuery()

Creates a Query for the underlying array.

Return Value:

The Query object.

jQuery

JavaScript

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

var query = store.createQuery();

Angular

TypeScript

import ArrayStore from "devextreme/data/array_store";
import DevExpress from "devextreme/bundles/dx.all";
// ...
export class AppComponent {
    store: ArrayStore;
    query: DevExpress.data.Query;
    constructor() {
        this.store = new ArrayStore({
            // ArrayStore is configured here
        });
        this.query = this.store.createQuery();
    }
}

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.LocalStore({
    // LocalStore 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 LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore 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.LocalStore({
    // ...
    key: "ProductID"
});

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

Angular

TypeScript

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            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.LocalStore({
    // ...
    key: "id"
});

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

Angular

TypeScript

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            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.LocalStore({
    // LocalStore is configured here
});

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

Angular

TypeScript

import LocalStore from "devextreme/data/local_store";
import DevExpress from "devextreme/bundles/dx.all";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore 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.LocalStore({
    // LocalStore 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 LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore 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.LocalStore({
    // LocalStore is configured here
});

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

Angular

TypeScript

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // LocalStore 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: