Custom Summaries
Documentation
The DataGrid support custom summary calculation. In this example, summaries are only calculated against selected grid rows. This behavior is implemented using the calculateCustomSummary and onSelectionChanged options.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
$(function(){
$("#gridContainer").dxDataGrid({
dataSource: orders,
keyExpr: "ID",
showBorders: true,
paging: {
enabled: false
},
selection: {
mode: "multiple"
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
width: 160,
dataField: "OrderDate",
dataType: "date",
},
"Employee", {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState",
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
}
],
selectedRowKeys: [1, 4, 7],
onSelectionChanged: function(e) {
e.component.refresh(true);
},
summary: {
totalItems: [{
name: "SelectedRowsSummary",
showInColumn: "SaleAmount",
displayFormat: "Sum: {0}",
valueFormat: "currency",
summaryType: "custom"
}
],
calculateCustomSummary: function (options) {
if (options.name === "SelectedRowsSummary") {
if (options.summaryProcess === "start") {
options.totalValue = 0;
}
if (options.summaryProcess === "calculate") {
if (options.component.isRowSelected(options.value.ID)) {
options.totalValue = options.totalValue + options.value.SaleAmount;
}
}
}
}
}
});
});
<!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.1.0/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/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.2.7/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="gridContainer"></div>
</div>
</body>
</html>
#gridContainer {
height: 440px;
margin-bottom: 10px;
}
var orders = [{
"ID" : 1,
"OrderNumber" : 35703,
"OrderDate" : "2014-04-10",
"SaleAmount" : 11800,
"Terms" : "15 Days",
"TotalAmount" : 12175,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 4,
"OrderNumber" : 35711,
"OrderDate" : "2014-01-12",
"SaleAmount" : 16050,
"Terms" : "15 Days",
"TotalAmount" : 16550,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 5,
"OrderNumber" : 35714,
"OrderDate" : "2014-01-22",
"SaleAmount" : 14750,
"Terms" : "15 Days",
"TotalAmount" : 15250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 7,
"OrderNumber" : 35983,
"OrderDate" : "2014-02-07",
"SaleAmount" : 3725,
"Terms" : "15 Days",
"TotalAmount" : 3850,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 9,
"OrderNumber" : 36987,
"OrderDate" : "2014-03-11",
"SaleAmount" : 14200,
"Terms" : "15 Days",
"TotalAmount" : 14800,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 11,
"OrderNumber" : 38466,
"OrderDate" : "2014-03-01",
"SaleAmount" : 7800,
"Terms" : "15 Days",
"TotalAmount" : 8200,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 15,
"OrderNumber" : 39874,
"OrderDate" : "2014-02-04",
"SaleAmount" : 9050,
"Terms" : "30 Days",
"TotalAmount" : 19100,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 18,
"OrderNumber" : 42847,
"OrderDate" : "2014-02-15",
"SaleAmount" : 20400,
"Terms" : "30 Days",
"TotalAmount" : 20800,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 19,
"OrderNumber" : 43982,
"OrderDate" : "2014-05-29",
"SaleAmount" : 6050,
"Terms" : "30 Days",
"TotalAmount" : 6250,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 29,
"OrderNumber" : 56272,
"OrderDate" : "2014-02-06",
"SaleAmount" : 15850,
"Terms" : "30 Days",
"TotalAmount" : 16350,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 30,
"OrderNumber" : 57429,
"OrderDate" : "2013-12-31",
"SaleAmount" : 11050,
"Terms" : "30 Days",
"TotalAmount" : 11400,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 32,
"OrderNumber" : 58292,
"OrderDate" : "2014-05-13",
"SaleAmount" : 13500,
"Terms" : "15 Days",
"TotalAmount" : 13800,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}];