DevExtreme Vue - CustomStore Methods
byKey(key)
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
// The key consists of a single data field var singleKeyStore = new DevExpress.data.CustomStore({ 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.CustomStore({ 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
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { singleKeyStore: CustomStore; compositeKeyStore: CustomStore; constructor() { // The key consists of a single data field this.singleKeyStore = new CustomStore({ 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 CustomStore({ 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 */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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;
clearRawDataCache()
Deletes data from the cache. Takes effect only if the cacheRawData property is true.
jQuery
var store = new DevExpress.data.CustomStore({ // CustomStore is configured here cacheRawData: true }); store.clearRawDataCache();
Angular
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(); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore is configured here cacheRawData: true }); export default { data() { return { store } }, mounted() { store.clearRawDataCache(); }, // ... } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore is configured here cacheRawData: true }); class App extends React.Component { constructor(props) { super(props); store.clearRawDataCache(); } // ... } export default App;
insert(values)
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
var store = new DevExpress.data.CustomStore({ // CustomStore 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
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( (dataObj) => { /* Process the data object here */ }, (error) => { /* Handle the "error" here */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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;
key()
Gets the key property (or properties) as specified in the key property.
jQuery
var store = new DevExpress.data.CustomStore({ // ... key: "ProductID" }); var keyProps = store.key(); // returns "ProductID"
Angular
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" }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... key: 'ProductID' }); export default { data() { return { store } }, mounted() { this.keyProps = store.key(); // returns "ProductID" }, // ... } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... key: 'ProductID' }); class App extends React.Component { constructor(props) { super(props); this.keyProps = store.key(); // returns "ProductID" } // ... } export default App;
keyOf(obj)
jQuery
var store = new DevExpress.data.CustomStore({ // ... key: "id" }); var key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
Angular
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 }; }
Vue
// ... <script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... key: 'id' }); export default { data() { return { store } }, mounted() { this.key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1 }, // ... } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... 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;
load()
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
load(options)
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
const 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
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 */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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;
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
push(changes)
Pushes data changes to the store and notifies the DataSource.
Array<any>
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 theindex
to 0. To add it to the end of the current page, set theindex
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 theindex
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:
jQuery
var store = new DevExpress.data.CustomStore({ // CustomStore 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 }]);
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ // CustomStore 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 }]); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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
See Also
- Integration with Push Services
- API Reference.WidgetName.repaintChangesOnly, for example, API Reference.DataGrid.repaintChangesOnly
remove(key)
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
// The key consists of a single data field var singleKeyStore = new DevExpress.data.CustomStore({ 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.CustomStore({ 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
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { singleKeyStore: CustomStore; compositeKeyStore: CustomStore; constructor() { // The key consists of a single data field this.singleKeyStore = new CustomStore({ 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 CustomStore({ 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 */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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;
totalCount(options)
Gets the total count of items the load() function returns.
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
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
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 */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore is configured here }); export default { data() { return { store } }, mounted() { store.totalCount() .then( (count) => { /* Process the "count" here */ }, (error) => { /* Handle the "error" here */ } ); }, // ... } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // CustomStore 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;
update(key, values)
A Promise that is resolved after the data item is updated. It is a native Promise or a jQuery.Promise when you use jQuery.
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.
jQuery
// The key consists of a single data field var singleKeyStore = new DevExpress.data.CustomStore({ 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.CustomStore({ 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 });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { singleKeyStore: CustomStore; compositeKeyStore: CustomStore; constructor() { // The key consists of a single data field this.singleKeyStore = new CustomStore({ 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 CustomStore({ 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 */ } ); }; }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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>
React
// ... import CustomStore from 'devextreme/data/custom_store'; // The key consists of a single data field const singleKeyStore = new CustomStore({ key: "field1", // ... }); // The key consists of several data fields const compositeKeyStore = new CustomStore({ 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.