Calculated Fields

The CollectionView allows you to add calculated fields to your data sources.

This is done by setting the calculatedFields property to a value that contains the names of the calculated fields and functions used to get the field values.

The functions may be specified as regular JavaScript functions that take the current data item as argument or as string expressions with an "$" value that represents the current data item.

Calculated fields are read-only and are automatically updated their dependent fields change.

Note: To use calculated fields in IE11, you must include a proxy polyfill such as https://www.npmjs.com/package/proxy-polyfill.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo-core.css'; import './styles.css'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { getCalculatedView } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // show a CollectionView with calculated fields on a grid new FlexGrid('#theGrid', { alternatingRowStep: 0, showMarquee: true, selectionMode: 'MultiRange', autoGenerateColumns: false, columns: [ // regular data fields { binding: 'product', header: 'Product' }, { binding: 'brand', header: 'Brand' }, { binding: 'unitPrice', header: 'Unit Price', format: 'c' }, { binding: 'qty', header: 'Quantity', format: 'n0' }, { binding: 'discount', header: 'Discount', format: 'p0' }, // calculated fields { binding: 'fullName', header: 'Full Name', cssClass: 'calculated' }, { binding: 'allCaps', header: 'Uppercase', cssClass: 'calculated' }, { binding: 'totalPrice', header: 'Total Price', format: 'c', cssClass: 'calculated' }, { binding: 'tax', header: 'Tax Amount', format: 'c', cssClass: 'calculated' } ], itemsSource: getCalculatedView() }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Editing</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"></div> </div> </body> </html>
import { CollectionView } from '@grapecity/wijmo'; export function getData() { return [ { product: 'Banana', brand: 'Chiquita', unitPrice: 45.95, qty: 12, discount: .08 }, { product: 'Apple', brand: 'Granny', unitPrice: 65.95, qty: 23, discount: .02 }, { product: 'Orange', brand: 'Sunkist', unitPrice: 52.95, qty: 16, discount: .04 }, { product: 'Grape', brand: 'Pinot', unitPrice: 83.95, qty: 8, discount: .0 }, { product: 'Watermelon', brand: '', unitPrice: 13.95, qty: 14, discount: .05 }, { product: 'Mango', brand: 'Ganesh', unitPrice: 38.95, qty: 19, discount: .15 }, ]; } export function getCalculatedView() { return new CollectionView(getData(), { calculatedFields: { // function-based expressions fullName: ($) => [$.brand, $.product].join(' '), allCaps: ($) => $.fullName.toUpperCase(), totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount), tax: ($) => $.totalPrice * 0.12, // string-based expressions fullNameStr: '[$.brand, $.product].join(" ")', allCapsStr: '$.fullNameStr.toUpperCase()', totalPriceStr: '($.unitPrice * $.qty) * (1 - $.discount)', taxStr: '$.totalPriceStr * 0.12', } }); }
.calculated { background-color: azure; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);