$(function () {
var URL = "https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi";
var loadPanel = $("#loadPanel").dxLoadPanel({
position: {
of: "#gridContainer"
},
visible: false
}).dxLoadPanel("instance");
loadPanel.show();
sendRequest(URL + "/Orders?skip=700")
.always(function() { loadPanel.hide(); })
.then(function(data) {
dataGrid.option("dataSource", data);
});
var dataGrid = $("#gridContainer").dxDataGrid({
keyExpr: "OrderID",
showBorders: true,
dataSource: [],
editing: {
mode: "row",
allowAdding: true,
allowUpdating: true,
allowDeleting: true
},
repaintChangesOnly: true,
onOptionChanged: function(e) {
if(e.name === "editing") {
var editRowKey = e.component.option("editing.editRowKey"),
changes = e.component.option("editing.changes");
$("#editRowKey").text(editRowKey === null ? "null" : editRowKey);
changes = changes.map(function(change) {
return {
type: change.type,
key: change.type !== "insert" ? change.key : undefined,
data: change.data
};
});
$("#changes").text(JSON.stringify(changes, null, " "));
}
},
onSaving: function(e) {
var change = e.changes[0];
if (change) {
e.cancel = true;
loadPanel.show();
e.promise = saveChange(URL, change)
.always(function() { loadPanel.hide(); })
.then(function(data) {
var orders = e.component.option("dataSource");
if(change.type === "insert") {
change.data = data;
}
orders = DevExpress.data.applyChanges(orders, [change], { keyExpr: "OrderID" });
e.component.option({
dataSource: orders,
editing: {
editRowKey: null,
changes: []
}
});
});
}
},
columns: [{
dataField: "OrderID",
allowEditing: false
}, {
dataField: "ShipName"
}, {
dataField: "ShipCountry"
}, {
dataField: "ShipCity"
}, {
dataField: "ShipAddress"
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "Freight"
}]
}).dxDataGrid("instance");
function saveChange(url, change) {
switch (change.type) {
case "insert":
return sendRequest(url + "/InsertOrder", "POST", { values: JSON.stringify(change.data) });
case "update":
return sendRequest(url + "/UpdateOrder", "PUT", { key: change.key, values: JSON.stringify(change.data) });
case "remove":
return sendRequest(url + "/DeleteOrder", "DELETE", { key: change.key });
}
}
function sendRequest(url, method, data) {
var d = $.Deferred();
method = method || "GET";
$.ajax(url, {
method: method,
data: data,
cache: false,
xhrFields: { withCredentials: true }
}).then(function (result) {
d.resolve(method === "GET" ? result.data : result);
}, function (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/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="loadPanel"></div>
<div id="gridContainer"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Edit Row Key:</span>
<div id="editRowKey">null</div>
</div>
<div class="option">
<span>Changes:</span>
<div id="changes">[]</div>
</div>
</div>
</div>
</body>
</html>
#gridContainer {
height: 440px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
margin-bottom: 10px;
font-weight: 500;
font-size: 18px;
}
.option {
margin-bottom: 10px;
}
.option > span {
position: relative;
margin-right: 10px;
}
.option > div {
display: inline-block;
font-weight: bold;
}
