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.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 });
Angular
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 */ } ); }; }
Vue
<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>
React
// ... 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;
clear()
Depending on the immediate option's value, this method removes data immediately or after a specified delay.
jQuery
var store = new DevExpress.data.LocalStore({ // LocalStore is configured here }); store.clear();
Angular
import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ // LocalStore is configured here }); this.store.clear(); } }
Vue
<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>
React
// ... 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;
createQuery()
jQuery
var store = new DevExpress.data.ArrayStore({ // ArrayStore is configured here }); var query = store.createQuery();
Angular
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(); } }
Vue
<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>
React
// ... 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;
See Also
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.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 });
Angular
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 */ } ); }; }
Vue
<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>
React
// ... 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;
key()
Gets the key property (or properties) as specified in the key option.
jQuery
var store = new DevExpress.data.LocalStore({ // ... key: "ProductID" }); var keyProps = store.key(); // returns "ProductID"
Angular
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" }; }
Vue
<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>
React
// ... 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;
keyOf(obj)
jQuery
var store = new DevExpress.data.LocalStore({ // ... key: "id" }); var key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
Angular
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 }; }
Vue
// ... <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>
React
// ... 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;
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
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
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 */ } ); }; }
Vue
<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>
React
// ... 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;
off(eventName)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
off(eventName, eventHandler)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
push(changes)
Pushes data changes to the store and notifies the DataSource.
Array<any>
There are three possible data change types:
jQuery
var store = new DevExpress.data.LocalStore({ // LocalStore is configured here }); store.push([{ type: "insert", data: data }]); store.push([{ type: "update", data: data, key: key }]); store.push([{ type: "remove", key: key }]);
Angular
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: data }]); this.store.push([{ type: "update", data: data, key: key }]); this.store.push([{ type: "remove", key: key }]); }; }
Vue
<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: data }]); store.push([{ type: "update", data: data, key: key }]); store.push([{ type: "remove", key: key }]); } } </script>
React
// ... 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: data }]); store.push([{ type: "update", data: data, key: key }]); store.push([{ type: "remove", key: key }]); } // ... } export default App;
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.
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.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 });
Angular
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 */ } ); }; }
Vue
<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>
React
// ... 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;
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.LocalStore({ // LocalStore is configured here }); store.totalCount() .done(function (count) { // Process the "count" here }) .fail(function (error) { // Handle the "error" here });
Angular
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 */ } ); }; }
Vue
<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>
React
// ... 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;
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.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 });
Angular
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 */ } ); }; }
Vue
<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>
React
// ... 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.