Aggregates

The FlexGrid columns have an aggregate property that allows you to show data summaries for the whole grid or for each group. To show group aggregates, set the aggregate property on the columns that you want to aggregate, and create groups by dragging the column headers into the group panel above the grid. Notice how the group rows contain the sum of the 'Sales' and 'Expenses' columns for each group. The aggregates are updated automatically when you edit the data.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjGridGrouppanel from '@grapecity/wijmo.grid.grouppanel'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } // // create group panel grid var theGrid = new wjGrid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', width: 60, isReadOnly: true }, { binding: 'country', header: 'Country' }, { binding: 'product', header: 'Product' }, { binding: 'sales', header: 'Sales', aggregate: 'Sum' }, { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' } ], itemsSource: data }); // // create the group panel var theGroupPanel = new wjGridGrouppanel.GroupPanel('#theGroupPanel', { placeholder: 'Drag columns here to create groups', grid: theGrid }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Aggregate Group</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="theGroupPanel"></div> <div id="theGrid"></div> </div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjGridGrouppanelModule } from '@grapecity/wijmo.angular2.grid.grouppanel'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // DataSvc will be passed by derived classes constructor() { this.data = this._getData(); } private _getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } @NgModule({ imports: [WjGridModule, WjGridGrouppanelModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Aggregate Group</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-group-panel style="display: block;" [grid]="flex" [placeholder]="'Drag columns here to create groups'"> </wj-group-panel> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="60" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'country'" [header]="'Country'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'product'" [header]="'Product'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [aggregate]="'Sum'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [aggregate]="'Sum'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <wj-group-panel style="display: block;" :grid="flex" placeholder="Drag columns here to create groups"> </wj-group-panel> <wj-flex-grid :itemsSource="data" :initialized="initializedGrid"> <wj-flex-grid-column binding="id" header="ID" :width=60 :isReadOnly=true></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column> <wj-flex-grid-column binding="product" header="Product"></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="Sales" aggregate="Sum"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" aggregate="Sum"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import { WjGridGrouppanelModule } from '@grapecity/wijmo.vue2.grid.grouppanel'; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData(), flex: null }; }, methods:{ initializedGrid(ctl){ this.flex = ctl; } } }); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import * as wjGridGrouppanelModule from '@grapecity/wijmo.react.grid.grouppanel'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), flex: null }; } render() { return <div className="container-fluid"> <wjGridGrouppanelModule.GroupPanel grid={this.state.flex} placeholder="Drag columns here to create groups"> </wjGridGrouppanelModule.GroupPanel> <wjGrid.FlexGrid initialized={this.initializedGrid.bind(this)} itemsSource={this.state.data}> <wjGrid.FlexGridColumn binding="id" header="ID" width={60} isReadOnly={true}> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="country" header="Country"> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="product" header="Product"> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="sales" header="Sales" aggregate="Sum"> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="expenses" header="Expenses" aggregate="Sum"> </wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } initializedGrid(ctl) { this.setState({ flex: ctl }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Aggregate Above the Data</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 id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } .wj-cell.wj-frozen-row { border-bottom: none; } body { margin-bottom: 20px; } export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }