Your search did not match any results.
Data Grid

Batch Update Request

With the DevExtreme DataGrid, users can modify multiple records and submit all changes simultaneously (when editing.mode is set to "batch"). Batch editing allows you to optimize your app, address performance related issues, and deliver the best possible user experience across a variety of usage scenarios.

If data is stored on a server, our DataGrid sends multiple requests to save edited objects - one request per object (this is because most servers only process one edit operation at a time). If your server supports batch update, you can configure the DataGrid to save all changes with a single request.

To incorporate this functionality into your web app, implement the DataGrid's onSaving function. This function accepts an e object that contains fields used for batch update. The following is a summary of the steps you must follow to enable batch update:

  1. Disable default save logic
    Set the e.cancel field to true.

  2. Send pending changes to the server
    Pending changes are contained in the e.changes array. Ensure it is not empty and send the changes to the server.

  3. Update data in the widget
    Once changes are saved, call the refresh(changesOnly) method.

  4. Reset edit state
    Use the cancelEditData() method to clear pending changes.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Column, Editing } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import 'whatwg-fetch'; var URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridBatchUpdateWebApi'; const ordersStore = createStore({ key: 'OrderID', loadUrl: `${URL}/Orders`, onBeforeSend: (method, ajaxOptions) => { ajaxOptions.xhrFields = { withCredentials: true }; } }); async function sendBatchRequest(url, changes) { const result = await fetch(url, { method: 'POST', body: JSON.stringify(changes), headers: { 'Content-Type': 'application/json;charset=UTF-8' }, credentials: 'include' }); if (!result.ok) { const json = await result.json(); throw json.Message; } } async function processBatchRequest(url, changes, component) { await sendBatchRequest(url, changes); await component.refresh(true); component.cancelEditData(); } function App() { const onSaving = React.useCallback((e) => { e.cancel = true; if (e.changes.length) { e.promise = processBatchRequest(`${URL}/Batch`, e.changes, e.component); } }, []); return ( <DataGrid id="gridContainer" dataSource={ordersStore} showBorders={true} remoteOperations={true} repaintChangesOnly={true} onSaving={onSaving}> <Editing mode="batch" allowAdding={true} allowDeleting={true} allowUpdating={true} /> <Column dataField="OrderID" allowEditing={false}></Column> <Column dataField="ShipName"></Column> <Column dataField="ShipCountry"></Column> <Column dataField="ShipCity"></Column> <Column dataField="ShipAddress"></Column> <Column dataField="OrderDate" dataType="date"></Column> <Column dataField="Freight"></Column> </DataGrid> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#gridContainer { height: 440px; }
System.config({ transpiler: 'plugin-babel', meta: { 'devextreme-aspnet-data-nojquery': { 'esModule': true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.6.1/index.js', 'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.3', 'devextreme-react': 'npm:devextreme-react@20.2.3', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.0/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.0/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.5/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.5/hooks/dist/hooks.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });