$(() => {
const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
const loadPanel = $('#loadPanel').dxLoadPanel({
position: {
of: '#gridContainer',
},
visible: false,
}).dxLoadPanel('instance');
loadPanel.show();
sendRequest(`${URL}/Orders?skip=700`)
.always(() => { loadPanel.hide(); })
.then((data) => {
dataGrid.option('dataSource', data);
});
const dataGrid = $('#gridContainer').dxDataGrid({
keyExpr: 'OrderID',
showBorders: true,
dataSource: [],
editing: {
mode: 'row',
allowAdding: true,
allowUpdating: true,
allowDeleting: true,
},
repaintChangesOnly: true,
onOptionChanged(e) {
if (e.name === 'editing') {
const editRowKey = e.component.option('editing.editRowKey');
let changes = e.component.option('editing.changes');
$('#editRowKey').text(editRowKey === null ? 'null' : editRowKey);
changes = changes.map((change) => ({
type: change.type,
key: change.type !== 'insert' ? change.key : undefined,
data: change.data,
}));
$('#changes').text(JSON.stringify(changes, null, ' '));
}
},
onSaving(e) {
const change = e.changes[0];
if (change) {
e.cancel = true;
loadPanel.show();
e.promise = saveChange(URL, change)
.always(() => { loadPanel.hide(); })
.then((data) => {
let 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 });
default:
return null;
}
}
function sendRequest(url, method = 'GET', data) {
const d = $.Deferred();
$.ajax(url, {
method,
data,
cache: false,
xhrFields: { withCredentials: true },
}).then((result) => {
d.resolve(method === 'GET' ? result.data : result);
}, (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/22.2.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/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;
}
