Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Data_Layer/LocalStore/Methods/ below:

DevExtreme Vue - LocalStore Methods

This section describes methods that control the LocalStore.

Gets a data item with a specific key.

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.LocalStore({
    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.LocalStore({
    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
});

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    singleKeyStore: LocalStore;
    compositeKeyStore: LocalStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new LocalStore({
            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 LocalStore({
            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 */ }
        );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

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

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

export default {
    data() {
        return {
            singleKeyStore,
            compositeKeyStore
        }
    },
    mounted() {
        // Gets the data item with "field1" being equal to 1
        singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Gets the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        // Gets the data item with "field1" being equal to 1
        singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Gets the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
    // ...
}
export default App;

Removes data from the local storage.

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

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

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

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.clear();
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        store.clear();
    }
    // ...
}
export default App;

Creates a Query for the underlying array.

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

var query = store.createQuery();

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();
    }
}

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ArrayStore is configured here
});

const query = store.createQuery();

export default {
    data() {
        return {
            store, query
        }
    }
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ArrayStore is configured here
});

const query = store.createQuery();

class App extends React.Component {
    // ...
}
export default App;

• Query Concept

Adds a data item to the store.

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.

var store = new DevExpress.data.LocalStore({
    // LocalStore 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
     });

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(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

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

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

The key property's value.

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

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

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"
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: 'ProductID'
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        this.keyProps = store.key(); // returns "ProductID"
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: 'ProductID'
});

class App extends React.Component {
    constructor(props) {
        super(props);

        this.keyProps = store.key(); // returns "ProductID"
    }
    // ...
}
export default App;

Gets a data item's key value.

The data item's key value.

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

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

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
    };
}

// ...
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: 'id'
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        this.key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: 'id'
});

class App extends React.Component {
    constructor(props) {
        super(props);

        this.keyProps = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    }
    // ...
}
export default App;

Starts loading data.

Data processing settings.

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
     });

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 */ }
            );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        let options = {
            // Data processing settings are specified here
        };
        store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        let options = {
            // Data processing settings are specified here
        };
        store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

Detaches all event handlers from a single event.

The object for which this method is called.

Detaches a particular event handler from a single event.

The event's name.

The event's handler.

The object for which this method is called.

Subscribes to an event.

The event's name.

The event's handler.

The object for which this method is called.

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

Subscribes to events.

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

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.

Pushes data changes to the store and notifies the DataSource.

Data changes to be pushed.

Each data change is an object that can have the following fields:

• type: String
  Data change type: "insert", "update", or "remove".

• data: Object
  Changes that should be applied to the store's data.

• key: any
  The key of the data item being updated or removed.

• index: Number
  The position at which to display a new data item in a UI component bound to the store. To display the new data item first, set the index to 0. To add it to the end of the current page, set the index to -1.

  The index field is optional. If you do not specify it, the new data item is added to the end of the dataset. However, if data is grouped or split into pages, this item does not appear in the UI component until data is reshaped. In this case, specify the index to show the pushed item immediately.

  The index field is ignored if reshapeOnPush is enabled (see the note below).

The following code shows how to use the push(changes) method for each change type:

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

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

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

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.push([{ type: "insert", data: dataObj, index: index }]);
        store.push([{ type: "update", data: dataObj, key: key }]);
        store.push([{ type: "remove", key: key }]);
    }
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.push([{ type: "insert", data: dataObj, index: index }]);
        store.push([{ type: "update", data: dataObj, key: key }]);
        store.push([{ type: "remove", key: key }]);
    }
    // ...
}
export default App;

• The DataSource does not automatically sort, group, filter, or otherwise shape pushed data. For this reason, the DataSource and the UI component bound to it can be out of sync. To prevent this, enable the reshapeOnPush property. We also recommend specifying the pushAggregationTimeout property to reduce the number of updates and recalculations.
• The push method does not raise data source modification events (for instance, onInserted, onRemoved, onUpdated). Handle the onPush event to perform actions when data changes are pushed to a store.
• The push method does not modify the remote data source. It is used to push changes from the data source to the local store without reloading data.

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

View on GitHub

• Integration with Push Services
• API Reference.WidgetName.repaintChangesOnly, for example, API Reference.DataGrid.repaintChangesOnly

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

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.LocalStore({
    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.LocalStore({
    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
});

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    singleKeyStore: LocalStore;
    compositeKeyStore: LocalStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new LocalStore({
            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 LocalStore({
            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 */ }
        );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

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

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

export default {
    data() {
        return {
            singleKeyStore,
            compositeKeyStore
        }
    },
    mounted() {
        // Removes the data item with "field1" being equal to 1
        singleKeyStore.remove(1).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Removes the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.remove({
            field1: 1,
            field2: 1
        }).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        // Removes the data item with "field1" being equal to 1
        singleKeyStore.remove(1).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Removes the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.remove({
            field1: 1,
            field2: 1
        }).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
    // ...
}
export default App;

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

Filtering and grouping properties.

Object structure:

Object

A filtering expression; described in the Filtering section.

Object

A grouping expression; described in the Grouping section.

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
     });

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 */ }
            );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // LocalStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

Updates a data item with a specific key.

A data item's key value.

An object with new values for the data item.

In the following code, dataObj is a data object updated in 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 update method.

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

// Updates the data item with "field1" being equal to 1
singleKeyStore.update(1, { name: "John Smith" })
    .done(function (dataObj, key) {
        // Process the key and data object here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

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

// Updates the data item with both "field1" and "field2" being equal to 1
compositeKeyStore.update(
    { field1: 1, field2: 1 },
    { name: "John Smith" }
).done(function (dataObj, key) {
    // Process the key and data object here
})
.fail(function (error) {
    // Handle the "error" here
});

import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    singleKeyStore: LocalStore;
    compositeKeyStore: LocalStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new LocalStore({
            key: "field1",
            // ...
        });
        // Updates the data item with "field1" being equal to 1
        this.singleKeyStore.update(1, { name: "John Smith" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );

        // The key consists of several data fields
        this.compositeKeyStore = new LocalStore({
            key: [ "field1", "field2" ],
            // ...
        });
        // Updates the data item with both "field1" and "field2" being equal to 1
        this.compositeKeyStore.update(
            { field1: 1, field2: 1 },
            { name: "John Smith" }
        ).then(
            (dataObj) => { /* Process the data object here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

<script>
import LocalStore from 'devextreme/data/local_store';

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

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

export default {
    data() {
        return {
            singleKeyStore,
            compositeKeyStore
        }
    },
    mounted() {
        // Updates the data item with "field1" being equal to 1
        singleKeyStore.update(1, { name: "John Smith" }).then(
            (dataObj) => { /* Process the data object here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Updates the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.update(
            { field1: 1, field2: 1 },
            { name: "John Smith" }
        ).then(
            (dataObj) => { /* Process the data object here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

// ...
import LocalStore from 'devextreme/data/local_store';

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        // Updates the data item with "field1" being equal to 1
        singleKeyStore.update(1, { name: "John Smith" }).then(
            (dataObj) => { /* Process the data object here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Updates the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.update(
            { field1: 1, field2: 1 },
            { name: "John Smith" }
        ).then(
            (dataObj) => { /* Process the data object here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
    // ...
}
export default App;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4