$(() => {
const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridBatchUpdateWebApi';
$('#gridContainer').dxDataGrid({
dataSource: DevExpress.data.AspNet.createStore({
key: 'OrderID',
loadUrl: `${URL}/Orders`,
onBeforeSend(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
}),
showBorders: true,
editing: {
mode: 'batch',
allowAdding: true,
allowUpdating: true,
allowDeleting: true,
},
remoteOperations: true,
repaintChangesOnly: true,
onSaving(e) {
e.cancel = true;
if (e.changes.length) {
e.promise = sendBatchRequest(`${URL}/Batch`, e.changes).done(() => {
e.component.refresh(true).done(() => {
e.component.cancelEditData();
});
});
}
},
columns: [{
dataField: 'OrderID',
allowEditing: false,
}, {
dataField: 'ShipName',
}, {
dataField: 'ShipCountry',
}, {
dataField: 'ShipCity',
}, {
dataField: 'ShipAddress',
}, {
dataField: 'OrderDate',
dataType: 'date',
}, {
dataField: 'Freight',
}],
});
function sendBatchRequest(url, changes) {
const d = $.Deferred();
$.ajax(url, {
method: 'POST',
data: JSON.stringify(changes),
cache: false,
contentType: 'application/json',
xhrFields: { withCredentials: true },
}).done(d.resolve).fail((xhr) => {
d.reject(xhr.responseJSON ? xhr.responseJSON.Message : xhr.statusText);
});
return d.promise();
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn3.devexpress.com/jslib/23.1.6/js/dx.all.js"></script>
<script src="https://unpkg.com/devextreme-aspnet-data@2.9.2/js/dx.aspnet.data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="gridContainer"></div>
</div>
</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;
}
}