Backend API
import React from 'react';
import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
import type { DataGridRef, DataGridTypes } from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import 'whatwg-fetch';
const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridBatchUpdateWebApi';
const ordersStore = createStore({
key: 'OrderID',
loadUrl: `${URL}/Orders`,
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
function normalizeChanges(changes: DataGridTypes.DataChange[]): DataGridTypes.DataChange[] {
return changes.map((c) => {
switch (c.type) {
case 'insert':
return {
type: c.type,
data: c.data,
};
case 'update':
return {
type: c.type,
key: c.key,
data: c.data,
};
case 'remove':
return {
type: c.type,
key: c.key,
};
default:
return c;
}
}) as DataGridTypes.DataChange[];
}
async function sendBatchRequest(url: string, changes: DataGridTypes.DataChange[]) {
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: string, changes: DataGridTypes.DataChange[], component: ReturnType<DataGridRef['instance']>) {
await sendBatchRequest(url, changes);
await component.refresh(true);
component.cancelEditData();
}
const onSaving = (e: DataGridTypes.SavingEvent) => {
e.cancel = true;
if (e.changes.length) {
const changes = normalizeChanges(e.changes);
e.promise = processBatchRequest(`${URL}/Batch`, changes, e.component);
}
};
const App = () => (
<DataGrid
id="gridContainer"
dataSource={ordersStore}
showBorders={true}
remoteOperations={true}
repaintChangesOnly={true}
onSaving={onSaving}>
<Editing
mode="batch"
allowAdding={true}
allowDeleting={true}
allowUpdating={true}
/>
<Pager visible={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 DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import 'whatwg-fetch';
const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridBatchUpdateWebApi';
const ordersStore = createStore({
key: 'OrderID',
loadUrl: `${URL}/Orders`,
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
function normalizeChanges(changes) {
return changes.map((c) => {
switch (c.type) {
case 'insert':
return {
type: c.type,
data: c.data,
};
case 'update':
return {
type: c.type,
key: c.key,
data: c.data,
};
case 'remove':
return {
type: c.type,
key: c.key,
};
default:
return c;
}
});
}
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();
}
const onSaving = (e) => {
e.cancel = true;
if (e.changes.length) {
const changes = normalizeChanges(e.changes);
e.promise = processBatchRequest(`${URL}/Batch`, changes, e.component);
}
};
const App = () => (
<DataGrid
id="gridContainer"
dataSource={ordersStore}
showBorders={true}
remoteOperations={true}
repaintChangesOnly={true}
onSaving={onSaving}
>
<Editing
mode="batch"
allowAdding={true}
allowDeleting={true}
allowUpdating={true}
/>
<Pager visible={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.tsx';
// eslint-disable-next-line import/no-unresolved
import 'anti-forgery';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import 'anti-forgery';
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
#gridContainer {
height: 440px;
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using Newtonsoft.Json;
using System;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using DevExtreme.MVC.Demos.Models.Northwind;
using DevExtreme.MVC.Demos.Models.DataGrid;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Controllers {
[Route("api/DataGridBatchUpdateWebApi/{action}", Name = "DataGridBatchUpdateWebApi")]
public class DataGridBatchUpdateWebApiController : ApiController {
InMemoryNorthwindContext _nwind = new InMemoryNorthwindContext();
[HttpGet]
public HttpResponseMessage Orders(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(_nwind.Orders, loadOptions));
}
[HttpPost]
public HttpResponseMessage Batch(List<DataChange> changes) {
foreach(var change in changes) {
Order order;
if(change.Type == "update" || change.Type == "remove") {
var key = Convert.ToInt32(change.Key);
order = _nwind.Orders.First(o => o.OrderID == key);
} else {
order = new Order();
}
if(change.Type == "insert" || change.Type == "update") {
JsonConvert.PopulateObject(change.Data.ToString(), order);
Validate(order);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());
if(change.Type == "insert") {
_nwind.Orders.Add(order);
}
change.Data = order;
} else if(change.Type == "remove") {
_nwind.Orders.Remove(order);
}
}
_nwind.SaveChanges();
return Request.CreateResponse(HttpStatusCode.OK, changes);
}
}
}
using System;
using System.Collections.Generic;
using System.Data.Entity;
namespace DevExtreme.MVC.Demos.Models.Northwind {
public class InMemoryNorthwindContext : InMemoryDataContext<Order> {
readonly NorthwindContext _nwind = new NorthwindContext();
public DbSet<Customer> Customers => _nwind.Customers;
public DbSet<Order_Detail> Order_Details => _nwind.Order_Details;
public ICollection<Order> Orders => ItemsInternal;
public DbSet<Shipper> Shippers => _nwind.Shippers;
protected override IEnumerable<Order> Source => _nwind.Orders;
protected override int GetKey(Order item) => item.OrderID;
protected override void SetKey(Order item, int key) => item.OrderID = key;
}
}
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:
-
Disable default save logic
Set thee.cancelfield totrue. -
Send pending changes to the server
Pending changes are contained in thee.changesarray. Ensure it is not empty and send the changes to the server. -
Update data in the DataGrid
Once changes are saved, call the refresh(changesOnly) method. -
Reset edit state
Use the cancelEditData() method to clear pending changes.