Your search did not match any results.
Data Grid

Custom Summaries

API Reference
The DevExtreme HTML5 Data Grid support custom summary computations. In this example, summaries are only computed against selected grid rows. This behavior is implemented using the calculateCustomSummary option.
Copy to Codepen
Apply
Reset
$(function(){ var dataGrid = $("#gridContainer").dxDataGrid({ dataSource: { store: { type: "array", key: "ID", data: orders } }, paging: { enabled: false }, selection: { mode: "multiple" }, columns: [{ dataField: "OrderNumber", width: 130, caption: "Invoice Number" }, { dataField: "OrderDate", dataType: "date", }, "Employee", { caption: "City", dataField: "CustomerStoreCity" }, { caption: "State", dataField: "CustomerStoreState", }, { dataField: "SaleAmount", alignment: "right", format: "currency" } ], selectedRowKeys: [1, 4, 7], 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; } } if (options.summaryProcess === "finalize") { // } } } } }).dxDataGrid("instance"); $("#applyCustomFilter").dxButton({ text: "Calculate summary for selected rows", onClick: function() { dataGrid.refresh(); } }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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 id="applyCustomFilter"></div> </div> </body> </html>
#gridContainer { width: 100%; height: 440px; }
var orders = [{ "ID": 1, "OrderNumber": 35703, "OrderDate": "2014/02/13", "SaleAmount": 11800, "Terms": "15 Days", "CustomerStoreState": "California", "CustomerStoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "ID": 4, "OrderNumber": 35711, "OrderDate": "2014/03/21", "SaleAmount": 16050, "Terms": "15 Days", "CustomerStoreState": "California", "CustomerStoreCity": "San Jose", "Employee": "Jim Packard" }, { "ID": 5, "OrderNumber": 35714, "OrderDate": "2014/04/19", "SaleAmount": 14750, "Terms": "15 Days", "CustomerStoreState": "Nevada", "CustomerStoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "ID": 7, "OrderNumber": 35983, "OrderDate": "2014/01/12", "SaleAmount": 3725, "Terms": "15 Days", "CustomerStoreState": "Colorado", "CustomerStoreCity": "Denver", "Employee": "Todd Hoffman" }, { "ID": 9, "OrderNumber": 36987, "OrderDate": "2014/04/08", "SaleAmount": 14200, "Terms": "15 Days", "CustomerStoreState": "Utah", "CustomerStoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "ID": 11, "OrderNumber": 38466, "OrderDate": "2014/02/28", "SaleAmount": 7800, "Terms": "15 Days", "CustomerStoreState": "California", "CustomerStoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "ID": 15, "OrderNumber": 39874, "OrderDate": "2014/05/28", "SaleAmount": 9050, "Terms": "30 Days", "CustomerStoreState": "Nevada", "CustomerStoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "ID": 18, "OrderNumber": 42847, "OrderDate": "2014/02/06", "SaleAmount": 20400, "Terms": "30 Days", "CustomerStoreState": "Wyoming", "CustomerStoreCity": "Casper", "Employee": "Todd Hoffman" }, { "ID": 19, "OrderNumber": 43982, "OrderDate": "2014/02/16", "SaleAmount": 6050, "Terms": "30 Days", "CustomerStoreState": "Utah", "CustomerStoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "ID": 29, "OrderNumber": 56272, "OrderDate": "2014/01/25", "SaleAmount": 15850, "Terms": "30 Days", "CustomerStoreState": "Utah", "CustomerStoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "ID": 30, "OrderNumber": 57429, "OrderDate": "2013/12/31", "SaleAmount": 11050, "Terms": "30 Days", "CustomerStoreState": "Arizona", "CustomerStoreCity": "Phoenix", "Employee": "Clark Morgan" }, { "ID": 32, "OrderNumber": 58292, "OrderDate": "2014/04/29", "SaleAmount": 13500, "Terms": "15 Days", "CustomerStoreState": "California", "CustomerStoreCity": "Los Angeles", "Employee": "Harv Mudd" }];