Your search did not match any results.
Data Grid

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.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-data-grid id="gridContainer" :data-source="orders" :show-borders="true" :selected-row-keys="[1, 4, 7]" key-expr="ID" @selection-changed="onSelectionChanged" > <dx-paging :enabled="false"/> <dx-selection mode="multiple"/> <dx-column :width="130" data-field="OrderNumber" caption="Invoice Number" /> <dx-column :width="160" data-field="OrderDate" data-type="date" /> <dx-column data-field="Employee" /> <dx-column data-field="CustomerStoreCity" caption="City" /> <dx-column data-field="CustomerStoreState" caption="State" /> <dx-column data-field="SaleAmount" alignment="right" format="currency" /> <dx-summary :calculate-custom-summary="calculateSelectedRow"> <dx-total-item name="SelectedRowsSummary" summary-type="custom" value-format="currency" display-format="Sum: {0}" show-in-column="SaleAmount" /> </dx-summary> </dx-data-grid> </div> </template> <script> import { DxDataGrid, DxColumn, DxPaging, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'; import service from './data.js'; export default { components: { DxDataGrid, DxColumn, DxPaging, DxSelection, DxSummary, DxTotalItem }, data() { return { orders: service.getOrders() }; }, methods: { calculateSelectedRow(options) { if (options.name === 'SelectedRowsSummary') { if (options.summaryProcess === 'start') { options.totalValue = 0; } else if (options.summaryProcess === 'calculate') { if (options.component.isRowSelected(options.value.ID)) { options.totalValue = options.totalValue + options.value.SaleAmount; } } } }, onSelectionChanged(e) { e.component.refresh(true); } } }; </script> <style scoped> #gridContainer { height: 440px; margin-bottom: 10px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
let 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' }]; export default { getOrders() { return orders; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });