DevExtreme React - ArrayStore 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

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.ArrayStore({
    key: "field1",
    // ...
});

// Gets the data item with "field1" being equal to 1
singleKeyStore.byKey(1)
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

// The key consists of several data fields
var compositeKeyStore = new DevExpress.data.ArrayStore({
    key: [ "field1", "field2" ],
    // ...
});

// Gets the data item with both "field1" and "field2" being equal to 1
compositeKeyStore.byKey({
    field1: 1,
    field2: 1
}).done(function (dataItem) {
    // Process the "dataItem" here
})
.fail(function (error) {
    // Handle the "error" here
});

Angular

TypeScript

import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    singleKeyStore: ArrayStore;
    compositeKeyStore: ArrayStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new ArrayStore({
            key: "field1",
            // ...
        });
        // Gets the data item with "field1" being equal to 1
        this.singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // The key consists of several data fields
        this.compositeKeyStore = new ArrayStore({
            key: [ "field1", "field2" ],
            // ...
        });
        // Gets the data item with both "field1" and "field2" being equal to 1
        this.compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

clear()

Clears all the ArrayStore's associated data.

jQuery

JavaScript

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

store.clear();

Angular

TypeScript

import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    store: ArrayStore;
    constructor() {
        this.store = new ArrayStore({
            // ArrayStore 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 a data item is added. It is a native Promise or a jQuery.Promise when you use jQuery.

In the following code, dataObj is a data object added to the database and returned from the server. If the server returns nothing or the store works with local data, dataObj contains the data object passed to the insert method.

jQuery

JavaScript

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

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

Angular

TypeScript

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

NOTE

The data item's key value should be unique, otherwise, the insertion will fail.

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.ArrayStore({
    // ...
    key: "ProductID"
});

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

Angular

TypeScript

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

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

Angular

TypeScript

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

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

Angular

TypeScript

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

DataGrid Real-Time Updates Demo DataGrid SignalR Demo Chart SignalR Demo DataGrid Collaborative Editing Demo

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.

push(changes)

Pushes data changes to the store and notifies the DataSource.

Parameters:

changes:

Array<any>

Data changes to be pushed.

There are three possible data change types:

jQuery

JavaScript

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

store.push([{ type: "insert", data: data }]);
store.push([{ type: "update", data: data, key: key }]);
store.push([{ type: "remove", key: key }]);

Angular

TypeScript

import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    store: ArrayStore;
    constructor() {
        this.store = new ArrayStore({
            // ArrayStore is configured here
        });
        this.store.push([{ type: "insert", data: data }]);
        this.store.push([{ type: "update", data: data, key: key }]);
        this.store.push([{ type: "remove", key: key }]);
    };
}

The DataSource does not automatically sort, group, filter, or otherwise shape pushed data. If it should, enable the reshapeOnPush option. We also recommend specifying the pushAggregationTimeout to reduce the number of updates and recalculations.

When data is grouped or paginated, the widget bound to the DataSource ignores inserted data items until data is reshaped. Disable grouping and paging or enable reshapeOnPush for the inserted data items to appear immediately after they are pushed. The DataGrid and TreeList widgets have individual grouping and paging options. Use them instead of the corresponding DataSource options.

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

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.ArrayStore({
    key: "field1",
    // ...
});

// Removes the data item with "field1" being equal to 1
singleKeyStore.remove(1)
    .done(function (key) {
        // Process the "key" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

// The key consists of several data fields
var compositeKeyStore = new DevExpress.data.ArrayStore({
    key: [ "field1", "field2" ],
    // ...
});

// Removes the data item with both "field1" and "field2" being equal to 1
compositeKeyStore.remove({
    field1: 1,
    field2: 1
}).done(function (key) {
    // Process the "key" here
})
.fail(function (error) {
    // Handle the "error" here
});

Angular

TypeScript

import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    singleKeyStore: ArrayStore;
    compositeKeyStore: ArrayStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new ArrayStore({
            key: "field1",
            // ...
        });
        // Removes the data item with "field1" being equal to 1
        this.singleKeyStore.remove(1)
            .then(
                (key) => { /* Process the "key" here */ },
                (error) => { /* Handle the "error" here */ }
            );

        // The key consists of several data fields
        this.compositeKeyStore = new ArrayStore({
            key: [ "field1", "field2" ],
            // ...
        });
        // Removes the data item with both "field1" and "field2" being equal to 1
        this.compositeKeyStore.remove({
            field1: 1,
            field2: 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.

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

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

Angular

TypeScript

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