Skip to content

push(changes).md

Latest commit

 

History

History
145 lines (112 loc) · 6 KB

push(changes).md

File metadata and controls

145 lines (112 loc) · 6 KB
id Store.push(changes)
shortDescription

Pushes data changes to the store and notifies the DataSource.

param(changes): Array

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:

jQuery
<!--JavaScript-->
var store = new DevExpress.data.{WidgetName}({
    // {WidgetName} 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
<!--TypeScript-->
import {WidgetName} from "devextreme/data/{widget_name}";
// ...
export class AppComponent {
    store: {WidgetName};
    constructor() {
        this.store = new {WidgetName}({
            // {WidgetName} 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
<!-- tab: App.vue -->
<script>
import {WidgetName} from 'devextreme/data/{widget_name}';

const store = new {WidgetName}({
    // {WidgetName} 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
<!-- tab: App.js -->
// ...
import {WidgetName} from 'devextreme/data/{widget_name}';

const store = new {WidgetName}({
    // {WidgetName} 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;

[note]

  • 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.

  • To update nested data, specify changes.data as a nested object:

      store.push([{ type: "update", data: { Address: { City: "Bentonville" } }, key: key }]);

[/note]

#include common-demobutton-named with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RealTimeUpdates/", name: "DataGrid Real-Time Updates" } #include common-demobutton-named with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SignalRService/", name: "DataGrid SignalR" } #include common-demobutton-named with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SignalRService/", name: "Chart SignalR" } #include common-demobutton-named with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CollaborativeEditing/", name: "DataGrid Collaborative Editing" }

#include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-treelist-display-summary-for-each-level" }

#####See Also#####