var DemoApp = angular.module('DemoApp', ['dx']);
var URL = "https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi";
DemoApp.controller('DemoController', function DemoController($scope) {
var ordersStore = new DevExpress.data.CustomStore({
key: "OrderID",
load: function() {
return sendRequest(URL + "/Orders");
},
insert: function(values) {
return sendRequest(URL + "/InsertOrder", "POST", {
values: JSON.stringify(values)
});
},
update: function(key, values) {
return sendRequest(URL + "/UpdateOrder", "PUT", {
key: key,
values: JSON.stringify(values)
});
},
remove: function(key) {
return sendRequest(URL + "/DeleteOrder", "DELETE", {
key: key
});
}
});
$scope.refreshMode = "reshape";
$scope.requests = [];
$scope.gridOptions = {
bindingOptions: {
"editing.refreshMode": "refreshMode"
},
dataSource: ordersStore,
repaintChangesOnly: true,
showBorders: true,
editing: {
mode: "cell",
allowAdding: true,
allowUpdating: true,
allowDeleting: true
},
scrolling: {
mode: "virtual"
},
columns: [{
dataField: "CustomerID",
caption: "Customer",
lookup: {
dataSource: {
paginate: true,
store: new DevExpress.data.CustomStore({
key: "Value",
loadMode: "raw",
load: function() {
return sendRequest(URL + "/CustomersLookup");
}
})
},
valueExpr: "Value",
displayExpr: "Text"
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "Freight"
}, {
dataField: "ShipCountry"
}, {
dataField: "ShipVia",
caption: "Shipping Company",
dataType: "number",
lookup: {
dataSource: new DevExpress.data.CustomStore({
key: "Value",
loadMode: "raw",
load: function() {
return sendRequest(URL + "/ShippersLookup");
}
}),
valueExpr: "Value",
displayExpr: "Text"
}
}
],
summary: {
totalItems: [{
column: "CustomerID",
summaryType: "count"
}, {
column: "Freight",
valueFormat: "#0.00",
summaryType: "sum"
}]
}
};
$scope.selectBoxOptions = {
bindingOptions: {
value: "refreshMode"
},
items: ["full", "reshape", "repaint"]
};
$scope.buttonOptions = {
text: "Clear",
onClick: function() {
$scope.requests = [];
}
};
function sendRequest(url, method, data) {
var d = $.Deferred();
method = method || "GET";
logRequest(method, url, data);
$.ajax(url, {
method: method || "GET",
data: data,
cache: false,
xhrFields: { withCredentials: true }
}).done(function(result) {
d.resolve(method === "GET" ? result.data : result);
}).fail(function(xhr) {
d.reject(xhr.responseJSON ? xhr.responseJSON.Message : xhr.statusText);
});
return d.promise();
}
function logRequest(method, url, data) {
var args = Object.keys(data || {}).map(function(key) {
return key + "=" + data[key];
}).join(" ");
var time = DevExpress.localization.formatDate(new Date(), "HH:mm:ss");
$scope.requests.unshift([time, method, url.slice(URL.length), args].join(" "));
}
});
<!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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="grid" dx-data-grid="gridOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Refresh Mode:</span>
<div id="refresh-mode" dx-select-box="selectBoxOptions"></div>
</div>
<div id="requests">
<div>
<div class="caption">Network Requests</div>
<div id="clear" dx-button="buttonOptions"></div>
</div>
<ul>
<li ng-repeat="request in requests track by $index">{{request}}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
#grid {
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;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
#requests .caption {
float: left;
padding-top: 7px;
}
#requests > div {
padding-bottom: 5px;
}
#requests > div:after {
content: "";
display: table;
clear: both;
}
#requests #clear {
float: right;
}
#requests ul {
list-style: none;
max-height: 100px;
overflow: auto;
margin: 0;
}
#requests ul li {
padding: 7px 0;
border-bottom: 1px solid #dddddd;
}
#requests ul li:last-child {
border-bottom: none;
}