Drawing Cells Manually

This sample shows how to draw cells manually using the formatItem callback function. Besides the simple cell customization, such as changing backround color, font, cell value etc the formatItem function allows user to draw cells manually.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as grid from '@grapecity/wijmo.grid'; import * as gridPdf from '@grapecity/wijmo.grid.pdf'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let flexGrid = new grid.FlexGrid('#flexGrid', { autoGenerateColumns: false, selectionMode: grid.SelectionMode.ListBox, headersVisibility: grid.HeadersVisibility.All, columns: [ { header: 'ID', binding: 'id' }, { header: 'Country', binding: 'country', isReadOnly: true }, { header: 'Product', binding: 'product' }, { header: 'Color', binding: 'color' } ], formatItem: (sender, e) => { if (e.panel === sender.cells && sender.columns[e.col].binding === 'country') { let data = e.panel.rows[e.row].dataItem; // e.cell.textContent = ''; // // add flag image let image = document.createElement('img'); image.src = `resources/${data['country']}.png`; e.cell.appendChild(image); // // add non-breaking space e.cell.appendChild(document.createTextNode('\u00A0')); // // add text e.cell.appendChild(document.createTextNode(`${data['country']}`)); } }, itemsSource: getData(5) }); // document.querySelector('#btnExport').addEventListener('click', () => { gridPdf.FlexGridPdfConverter.export(flexGrid, 'FlexGrid.pdf', { maxPages: 10, documentOptions: { header: { declarative: { text: '\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]' } } }, customCellContent: true, formatItem: (args) => { if (args.panel.cellType === grid.CellType.Cell) { if (args.panel.columns[args.col].binding === 'country') { let r = args.contentRect, sz = args.canvas.measureText(args.data, args.style.font, { height: r.height, width: r.width }), image = args.canvas.openImage(`resources/${args.data}.png`), imageTop = r.top + (r.height - image.height) / 2, textTop = r.top + (r.height - sz.size.height) / 2; // // draw flag image args.canvas.drawImage(image, r.left, imageTop); // // draw text args.canvas.drawText(args.data, r.left + image.width + 3, textTop, { brush: args.style.color, font: args.style.font, height: r.height, width: r.width }); // // cancel standard cell content drawing args.cancel = true; } } } }); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing cells manually</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"> <!-- Export button --> <button class="btn btn-default" id="btnExport">Export</button> <!-- FlexGrid --> <div id="flexGrid" class="grid"></div> </div> </body> </html> export function getData(count) { // data used to generate random items const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; const products = ['Widget', 'Gadget', 'Doohickey']; const colors = ['Orange', 'White', 'Red', 'Green', 'Blue']; // let data = []; // // add count items for (let i = 0; i < count; i++) { // constants used to create data items let countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // // create the item let item = { id: i, country: countries[countryId], product: products[productId], color: colors[colorId] }; // // add the item to the list data.push(item); } // return data; } body { margin-bottom: 24px; } .grid { margin-top: 20px; height: 200px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as grid from '@grapecity/wijmo.grid'; import * as gridPdf from '@grapecity/wijmo.grid.pdf'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { DataService } from './app.data'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; @ViewChild('flexGrid') flexGrid: grid.FlexGrid; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(5); } // export() { gridPdf.FlexGridPdfConverter.export(this.flexGrid, 'FlexGrid.pdf', { maxPages: 10, documentOptions: { header: { declarative: { text: '\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]' } } }, customCellContent: true, formatItem: (args: gridPdf.PdfFormatItemEventArgs) => { if (args.panel.cellType === grid.CellType.Cell) { if (args.panel.columns[args.col].binding === 'country') { let r = args.contentRect, sz = args.canvas.measureText(args.data, args.style.font, { height: r.height, width: r.width }), image = args.canvas.openImage(`resources/${args.data}.png`), imageTop = r.top + (r.height - image.height) / 2, textTop = r.top + (r.height - sz.size.height) / 2; // // draw flag image args.canvas.drawImage(image, r.left, imageTop); // // draw text args.canvas.drawText(args.data, r.left + image.width + 3, textTop, { brush: args.style.color, font: args.style.font, height: r.height, width: r.width }); // // cancel standard cell content drawing args.cancel = true; } } } }); } } // @NgModule({ imports: [WjGridModule, 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>Drawing cells manually</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"> <!-- Export button --> <button class="btn btn-default" (click)="export()">Export</button> <!-- FlexGrid --> <wj-flex-grid class="grid" #flexGrid [autoGenerateColumns]="false" selectionMode="ListBox" headersVisibility="All" [itemsSource]="data"> <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column> <wj-flex-grid-column header="Country" binding="country" isReadOnly="true"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <img src="resources/{{item.country}}.png" /> {{item.country}} </ng-template> </wj-flex-grid-column> <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column> <wj-flex-grid-column header="Color" binding="color"></wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { // getData(count: number) { // data used to generate random items const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; const products = ['Widget', 'Gadget', 'Doohickey']; const colors = ['Orange', 'White', 'Red', 'Green', 'Blue']; // let data = []; // // add count items for (let i = 0; i < count; i++) { // constants used to create data items let countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // // create the item let item = { id: i, country: countries[countryId], product: products[productId], color: colors[colorId] }; // // add the item to the list data.push(item); } // return data; } } body { margin-bottom: 24px; } .grid { margin-top: 20px; height: 200px; } <template> <div class="container-fluid"> <!-- Export button --> <button class="btn btn-default" @click="exportPDF">Export</button> <!-- FlexGrid --> <wj-flex-grid class="grid" :autoGenerateColumns=false headersVisibility="All" selectionMode="ListBox" :itemsSource="data" :formatItem="formatItem" :initialized="initializeGrid"> <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column> <wj-flex-grid-column header="Country" binding="country" :isReadOnly=true></wj-flex-grid-column> <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column> <wj-flex-grid-column header="Color" binding="color"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import { getData } from './data'; import { WjGridModule } from '@grapecity/wijmo.vue2.grid'; import * as gridPdf from '@grapecity/wijmo.grid.pdf'; import * as grid from '@grapecity/wijmo.grid'; new Vue({ el: '#app', data: { data: getData(5) }, methods: { initializeGrid(ctl) { this.flexGrid = ctl; }, formatItem(sender, e) { if (e.panel === sender.cells && sender.columns[e.col].binding === 'country') { let data = (e.panel.rows[e.row]).dataItem; // e.cell.textContent = ''; // // add flag image let image = document.createElement('img'); image.src = `resources/${data['country']}.png`; e.cell.appendChild(image); // // add non-breaking space e.cell.appendChild(document.createTextNode('\u00A0')); // // add text e.cell.appendChild(document.createTextNode(`${data['country']}`)); } }, exportPDF() { gridPdf.FlexGridPdfConverter.export(this.flexGrid, 'FlexGrid.pdf', { maxPages: 10, documentOptions: { header: { declarative: { text: '\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]' } } }, customCellContent: true, formatItem: (args) => { if (args.panel.cellType === grid.CellType.Cell) { if (args.panel.columns[args.col].binding === 'country') { let r = args.contentRect, sz = args.canvas.measureText(args.data, args.style.font, { height: r.height, width: r.width }), image = args.canvas.openImage(`resources/${args.data}.png`), imageTop = r.top + (r.height - image.height) / 2, textTop = r.top + (r.height - sz.size.height) / 2; // // draw flag image args.canvas.drawImage(image, r.left, imageTop); // // draw text args.canvas.drawText(args.data, r.left + image.width + 3, textTop, { brush: args.style.color, font: args.style.font, height: r.height, width: r.width }); // // cancel standard cell content drawing args.cancel = true; } } } }); } } }); </script> <style> body { margin-bottom: 24px; } .grid { margin-top: 20px; height: 200px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Drawing cells manually</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(count) { // data used to generate random items const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; const products = ['Widget', 'Gadget', 'Doohickey']; const colors = ['Orange', 'White', 'Red', 'Green', 'Blue']; // let data = []; // // add count items for (let i = 0; i < count; i++) { // constants used to create data items let countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // // create the item let item = { id: i, country: countries[countryId], product: products[productId], color: colors[colorId] }; // // add the item to the list data.push(item); } // return data; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import * as gridPdf from "@grapecity/wijmo.grid.pdf"; import * as grid from '@grapecity/wijmo.grid'; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(5) }; } render() { return <div className="container-fluid"> <button className="btn btn-default" onClick={this.exportPDF.bind(this)}>Export</button> <wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} headersVisibility="All" selectionMode="ListBox" itemsSource={this.state.data} formatItem={this.formatItem.bind(this)} initialized={this.initializeGrid.bind(this)}> <wjcGrid.FlexGridColumn header="ID" binding="id"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn header="Country" binding="country" isReadOnly={true}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn header="Product" binding="product"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn header="Color" binding="color"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } initializeGrid(ctl) { this.flexGrid = ctl; } formatItem(sender, e) { if (e.panel === sender.cells && sender.columns[e.col].binding === 'country') { let data = (e.panel.rows[e.row]).dataItem; // e.cell.textContent = ''; // // add flag image let image = document.createElement('img'); image.src = `resources/${data['country']}.png`; e.cell.appendChild(image); // // add non-breaking space e.cell.appendChild(document.createTextNode('\u00A0')); // // add text e.cell.appendChild(document.createTextNode(`${data['country']}`)); } } exportPDF() { gridPdf.FlexGridPdfConverter.export(this.flexGrid, 'FlexGrid.pdf', { maxPages: 10, documentOptions: { header: { declarative: { text: '\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '\t&[Page]\\&[Pages]' } } }, customCellContent: true, formatItem: (args) => { if (args.panel.cellType === grid.CellType.Cell) { if (args.panel.columns[args.col].binding === 'country') { let r = args.contentRect, sz = args.canvas.measureText(args.data, args.style.font, { height: r.height, width: r.width }), image = args.canvas.openImage(`resources/${args.data}.png`), imageTop = r.top + (r.height - image.height) / 2, textTop = r.top + (r.height - sz.size.height) / 2; // // draw flag image args.canvas.drawImage(image, r.left, imageTop); // // draw text args.canvas.drawText(args.data, r.left + image.width + 3, textTop, { brush: args.style.color, font: args.style.font, height: r.height, width: r.width }); // // cancel standard cell content drawing args.cancel = 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>Grapecity Wijmo OLAP Pivot Chart Overview</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> body { margin-bottom: 24px; } .grid { margin-top: 20px; height: 200px; } export function getData(count) { // data used to generate random items const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; const products = ['Widget', 'Gadget', 'Doohickey']; const colors = ['Orange', 'White', 'Red', 'Green', 'Blue']; // let data = []; // // add count items for (let i = 0; i < count; i++) { // constants used to create data items let countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // // create the item let item = { id: i, country: countries[countryId], product: products[productId], color: colors[colorId] }; // // add the item to the list data.push(item); } // return data; }