Expand and Collapse Rows/Columns

The PivotGrid can display data in columns or rows as groups. By default, grouped items are can be collapsed or expanded. You can configure the PivotGrid to make row and column groups collapsible using the collapsibleSubtotals property.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var ng = new wjOlap.PivotEngine({ itemsSource: getData(1000), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'], showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }); var amountField = ng.fields.getField('Amount'); amountField.format = 'c0'; var dateField = ng.fields.getField('Date'); dateField.format = 'yyyy'; // show dates as years // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ng }); // // show pivot grid var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); // // toggle totalsBeforeData document.getElementById('totalsBeforeData').addEventListener('click', function (e) { pivotGrid.engine.totalsBeforeData = e.target.checked; }); // // toggle collapsibleSubtotals document.getElementById('collapsibleSubtotals').addEventListener('click', function (e) { pivotGrid.collapsibleSubtotals = e.target.checked; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Grid Row Column Expand Collapse</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 class="row"> <div class="col-xs-5"> <div id="pivotPanel"></div> </div> <div class="col-xs-7"> <div id="pivotGrid"></div> </div> </div> <p> You can configure the <b>PivotEngine</b> to show the subtotals before or after the data using the <b>totalsBeforeData</b> property: </p> <label> totalsBeforeData: <input id="totalsBeforeData" type="checkbox"> </label> <p> You can configure the <b>PivotGrid</b> to make row and column groups collapsible using the <b>collapsibleSubtotals</b> property: </p> <label> collapsibleSubtotals: <input id="collapsibleSubtotals" type="checkbox" checked> </label> </div> </body> </html> import * as wjCore from '@grapecity/wijmo'; // get the raw data export function getData(cnt) { var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = []; for (var i = 0; i < cnt; i++) { data.push({ date: wjCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } // function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .container > label { margin: 0 0 2em 2em; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('grid') pivotGrid: wjOlap.PivotGrid; ng: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ itemsSource: dataService.getData(1000), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'], // by buyer and Type showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }); this.ng.fields.getField('Amount').format = 'c0'; this.ng.fields.getField('Date').format = 'yyyy'; } // onTotalsBeforeDataClick(e: MouseEvent) { this.pivotGrid.engine.totalsBeforeData = (e.target as HTMLInputElement).checked; } // onCollapsibleSubtotalsClick(e: MouseEvent) { this.pivotGrid.collapsibleSubtotals = (e.target as HTMLInputElement).checked; } } // @NgModule({ imports: [WjOlapModule, BrowserModule], declarations: [AppComponent], providers: [DataService], 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 OLAP Pivot Grid Row Column Expand Collapse</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"> <div class="row"> <div class="col-xs-5"> <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel> </div> <div class="col-xs-7"> <wj-pivot-grid #grid [itemsSource]="ng"></wj-pivot-grid> </div> </div> <p> You can configure the <b>PivotEngine</b> to show the subtotals before or after the data using the <b>totalsBeforeData</b> property: </p> <label> totalsBeforeData: <input id="totalsBeforeData" type="checkbox" (click)="onTotalsBeforeDataClick($event)"> </label> <p> You can configure the <b>PivotGrid</b> to make row and column groups collapsible using the <b>collapsibleSubtotals</b> property: </p> <label> collapsibleSubtotals: <input id="collapsibleSubtotals" type="checkbox" checked (click)="onCollapsibleSubtotalsClick($event)"> </label> </div> import { Injectable } from '@angular/core'; import * as wjCore from '@grapecity/wijmo'; export interface DataItem { date: Date; buyer: string; type: string; amount: number; } function randomItem(arr: string[]): string { return arr[Math.floor(Math.random() * arr.length)]; } @Injectable() export class DataService { getData(cnt: number): DataItem[] { var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = []; for (var i = 0; i < cnt; i++) { data.push({ date: wjCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } } .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .container > label { margin: 0 0 2em 2em; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <wj-pivot-panel :items-source="ng"></wj-pivot-panel> </div> <div class="col-xs-7"> <wj-pivot-grid :items-source="ng" :initialized="initializePivotGrid"></wj-pivot-grid> </div> </div> <p> You can configure the <b>PivotEngine</b> to show the subtotals before or after the data using the <b>totalsBeforeData</b> property: </p> <label> totalsBeforeData: <input id="totalsBeforeData" type="checkbox" v-on:click="onTotalsBeforeDataClick"> </label> <p> You can configure the <b>PivotGrid</b> to make row and column groups collapsible using the <b>collapsibleSubtotals</b> property: </p> <label> collapsibleSubtotals: <input id="collapsibleSubtotals" type="checkbox" checked v-on:click="onCollapsibleSubtotalsClick"> </label> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data' let App = Vue.extend({ name: "app", data: function() { return { ng: new wjcOlap.PivotEngine({ itemsSource: getData(1000), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'], // by buyer and Type showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }) }; }, mounted: function() { this.ng.fields.getField('Amount').format = 'c0'; this.ng.fields.getField('Date').format = 'yyyy'; }, methods: { initializePivotGrid(pivotGrid) { this.pivotGrid = pivotGrid; }, onTotalsBeforeDataClick(e) { this.pivotGrid.engine.totalsBeforeData = e.target.checked; }, onCollapsibleSubtotalsClick(e) { this.pivotGrid.collapsibleSubtotals = e.target.checked; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .container > label { margin: 0 0 2em 2em; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Grid Row Column Expand Collapse</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> import * as wjcCore from '@grapecity/wijmo'; export function getData(cnt) { var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = []; for (var i = 0; i < cnt; i++) { data.push({ date: wjcCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as Olap from '@grapecity/wijmo.react.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { ng: new wjcOlap.PivotEngine({ itemsSource: getData(1000), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'], showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }), collapsibleSubtotals: true }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-5"> <Olap.PivotPanel itemsSource={this.state.ng}></Olap.PivotPanel> </div> <div className="col-xs-7"> <Olap.PivotGrid itemsSource={this.state.ng} initialized={this.initializePivotGrid.bind(this)}></Olap.PivotGrid> </div> </div> <p> You can configure the <b>PivotEngine</b> to show the subtotals before or after the data using the <b>totalsBeforeData</b> property: </p> <label> totalsBeforeData: <input id="totalsBeforeData" type="checkbox" onClick={this.onTotalsBeforeDataClick.bind(this)}/> </label> <p> You can configure the <b>PivotGrid</b> to make row and column groups collapsible using the <b>collapsibleSubtotals</b> property: </p> <label> collapsibleSubtotals: <input id="collapsibleSubtotals" type="checkbox" checked={this.state.collapsibleSubtotals} onClick={this.onCollapsibleSubtotalsClick.bind(this)}/> </label> </div>); } initializePivotGrid(pivotGrid) { this.pivotGrid = pivotGrid; } onTotalsBeforeDataClick(e) { this.pivotGrid.engine.totalsBeforeData = e.target.checked; } onCollapsibleSubtotalsClick(e) { this.setState({ collapsibleSubtotals: !this.state.collapsibleSubtotals }); this.pivotGrid.collapsibleSubtotals = e.target.checked; } componentDidMount() { this.state.ng.fields.getField('Amount').format = 'c0'; this.state.ng.fields.getField('Date').format = 'yyyy'; } } 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>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'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .container > label { margin: 0 0 2em 2em; } body { margin-bottom: 24pt; } import * as wjcCore from '@grapecity/wijmo'; export function getData(cnt) { var today = new Date(), buyers = 'Mom,Dad,Kelly,Sheldon'.split(','), types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','), data = []; for (var i = 0; i < cnt; i++) { data.push({ date: wjcCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }