Cells with HTML Content

The PivotGrid can display raw HTML content from the data. Set the PivotField's isContentHtml property to render fields that contain HTML instead of plain text. In the example below, the "Buyer" and "Type" fields are bound to properties that contain HTML text.

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(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }); ng.fields.getField('Amount').format = 'c0'; // customize field ng.fields.getField('Buyer').isContentHtml = true; ng.fields.getField('Type').isContentHtml = true; // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ng }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); } <!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 HTML Content</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> </div> </body> </html> // get the raw data export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>uel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 0, 17), buyer: '<span class="initial">D</span>ad', type: '<span class="initial">S</span>ports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">B</span>ooks', amount: 125 }, { date: new Date(yr, 1, 2), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 1, 20), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">M</span>usic', amount: 20 }, { date: new Date(yr, 1, 25), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">T</span>ickets', amount: 125 }, ]; } .initial { color: white; background: #707070; font-weight: 900; border-radius: 4px; padding: 2px; transform: scale(1.5, 1); margin-right: 5px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // import { Component, Inject, enableProdMode, NgModule } 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 { ng: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ itemsSource: dataService.getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }); this.ng.fields.getField('Amount').format = 'c0'; this.ng.fields.getField('Buyer').isContentHtml = true; this.ng.fields.getField('Type').isContentHtml = true; } } // @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 HTML Content</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 [itemsSource]="ng"></wj-pivot-grid> </div> </div> </div> import { Injectable } from '@angular/core'; export interface DataItem { date: Date; buyer: string; type: string; amount: number; } @Injectable() export class DataService { getData(): DataItem[] { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>uel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 0, 17), buyer: '<span class="initial">D</span>ad', type: '<span class="initial">S</span>ports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">B</span>ooks', amount: 125 }, { date: new Date(yr, 1, 2), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 1, 20), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">M</span>usic', amount: 20 }, { date: new Date(yr, 1, 25), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">T</span>ickets', amount: 125 }, ]; } } .initial { color: white; background: #707070; font-weight: 900; border-radius: 4px; padding: 2px; transform: scale(1.5, 1); margin-right: 5px; } <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"></wj-pivot-grid> </div> </div> </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(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }) }; }, mounted: function() { this.ng.fields.getField('Amount').format = 'c0'; this.ng.fields.getField('Buyer').isContentHtml = true; this.ng.fields.getField('Type').isContentHtml = true; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .initial { color: white; background: #707070; font-weight: 900; border-radius: 4px; padding: 2px; transform: scale(1.5, 1); margin-right: 5px; } </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 HTML Content</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() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>uel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 0, 17), buyer: '<span class="initial">D</span>ad', type: '<span class="initial">S</span>ports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">B</span>ooks', amount: 125 }, { date: new Date(yr, 1, 2), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 1, 20), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">M</span>usic', amount: 20 }, { date: new Date(yr, 1, 25), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">T</span>ickets', amount: 125 }]; } 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(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }) }; } 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}></Olap.PivotGrid> </div> </div> </div>); } componentDidMount() { this.state.ng.fields.getField('Amount').format = 'c0'; this.state.ng.fields.getField('Buyer').isContentHtml = true; this.state.ng.fields.getField('Type').isContentHtml = true; } } 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> .initial { color: white; background: #707070; font-weight: 900; border-radius: 4px; padding: 2px; transform: scale(1.5, 1); margin-right: 5px; } export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>uel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 0, 17), buyer: '<span class="initial">D</span>ad', type: '<span class="initial">S</span>ports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">B</span>ooks', amount: 125 }, { date: new Date(yr, 1, 2), buyer: '<span class="initial">M</span>om', type: '<span class="initial">F</span>ood', amount: 235 }, { date: new Date(yr, 1, 20), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">M</span>usic', amount: 20 }, { date: new Date(yr, 1, 25), buyer: '<span class="initial">K</span>elly', type: '<span class="initial">T</span>ickets', amount: 125 }]; }