$(function() {
$("#grid-container").dxDataGrid({
dataSource: {
store: productsStore,
reshapeOnPush: true
},
repaintChangesOnly: true,
columnAutoWidth: true,
showBorders: true,
paging: {
pageSize: 10
},
columns: [
{ dataField: "ProductName", dataType: "string" },
{ dataField: "UnitPrice", dataType: "number", format: "currency" },
{ dataField: "OrderCount", dataType: "number" },
{ dataField: "Quantity", dataType: "number" },
{ dataField: "Amount", dataType: "number", format: "currency", allowSorting: true }
],
summary: {
totalItems: [{
summaryType: "count",
column: "ProductName"
}, {
summaryType: "sum",
displayFormat: "{0}",
valueFormat: "currency",
column: "Amount"
}, {
summaryType: "sum",
displayFormat: "{0}",
column: "OrderCount"
}]
},
masterDetail: {
enabled: true,
template: function(container, options) {
$("<div>").appendTo(container).dxDataGrid({
dataSource: {
store: ordersStore,
filter: ["ProductID", "=", options.key],
reshapeOnPush: true
},
repaintChangesOnly: true,
columnAutoWidth: true,
showBorders: true,
paging: {
pageSize: 5
},
columns: [{
dataField: "OrderID",
dataType: "number"
}, {
dataField: "ShipCity",
dataType: "string"
}, {
dataField: "OrderDate",
dataType: "datetime",
format: "yyyy/MM/dd HH:mm:ss"
}, {
dataField: "UnitPrice",
dataType: "number"
}, {
dataField: "Quantity",
dataType: "number"
}, {
caption: "Amount",
dataType: "number",
format: "currency",
allowSorting: true,
calculateCellValue: function(rowData) {
return rowData.UnitPrice * rowData.Quantity;
}
}],
summary: {
totalItems: [{
summaryType: "count",
column: "OrderID"
}, {
summaryType: "sum",
displayFormat: "{0}",
column: "Quantity"
}, {
summaryType: "sum",
displayFormat: "{0}",
valueFormat: "currency",
column: "Amount"
}]
}
});
}
}
});
var updatesPerSecond = 100;
setInterval(function() {
if(orders.length > 500000) {
return;
}
for(var i = 0; i < updatesPerSecond / 20; i++) {
addOrder();
}
}, 50);
$("#frequency-slider").dxSlider({
min: 10,
max: 5000,
step: 10,
value: updatesPerSecond,
onValueChanged: function(e) {
updatesPerSecond = e.value;
},
tooltip: {
enabled: true,
showMode: "always",
format: "#0 per second",
position: "top"
}
});
});
<!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.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.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">
<div id="grid-container"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Update frequency:</span>
<div id="frequency-slider"></div>
</div>
</div>
</div>
</body>
</html>
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
width: 500px;
display: inline-block;
vertical-align: middle;
}
var cities = ["Los Angeles","Denver","Bentonville","Atlanta","Reno","Beaver","Malibu","Phoenix","San Diego","Little Rock","Pasadena","Boise","San Jose","Chatsworth","San Fernando","South Pasadena","San Fernando Valley","La Canada","St. Louis"];
var orders = [];
var ordersStore = new DevExpress.data.ArrayStore({
key: "OrderID",
data: orders
});
var products = [];
for(var i = 1; i <= 100; i++) {
products.push({ ProductID: i, ProductName: "Product " + i, UnitPrice: Math.floor(Math.random() * 1000) + 1, Quantity: 0, Amount: 0, OrderCount: 0 });
}
var productsStore = new DevExpress.data.ArrayStore({
key: "ProductID",
data: products
});
function addOrder() {
var product = products[Math.round(Math.random() * 99)];
var order = {
OrderID: orders.length ? orders[orders.length - 1].OrderID + 1 : 20001,
ShipCity: cities[Math.round(Math.random() * (cities.length - 1))],
ProductID: product.ProductID,
UnitPrice: product.UnitPrice,
OrderDate: new Date(),
Quantity: Math.round(Math.random() * 20) + 1
};
ordersStore.push([{ type: "insert", data: order }]);
productsStore.push([{
type: "update",
key: order.ProductID,
data: {
OrderCount: product.OrderCount + 1,
Quantity: product.Quantity + order.Quantity,
Amount: product.Amount + order.UnitPrice * order.Quantity
}
}]);
}