$(() => {
$('#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(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(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',
}],
},
});
},
},
});
let updatesPerSecond = 100;
setInterval(() => {
if (orders.length > 500000) {
return;
}
for (let i = 0; i < updatesPerSecond / 20; i += 1) {
addOrder();
}
}, 50);
$('#frequency-slider').dxSlider({
min: 10,
max: 5000,
step: 10,
value: updatesPerSecond,
onValueChanged(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/23.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/23.1.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;
display: flex;
align-items: center;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
width: 500px;
display: inline-block;
vertical-align: middle;
}
const 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'];
const orders = [];
const ordersStore = new DevExpress.data.ArrayStore({
key: 'OrderID',
data: orders,
});
const products = [];
for (let i = 1; i <= 100; i += 1) {
products.push({
ProductID: i, ProductName: `Product ${i}`, UnitPrice: Math.floor(Math.random() * 1000) + 1, Quantity: 0, Amount: 0, OrderCount: 0,
});
}
const productsStore = new DevExpress.data.ArrayStore({
key: 'ProductID',
data: products,
});
function addOrder() {
const product = products[Math.round(Math.random() * 99)];
const 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,
},
}]);
}