Column Styling

FlexGrid columns have a few properties that affect styling: cssClass, align and wordWrap. The cssClass is the most powerful and flexible of the three properties, but align and wordWrap are simple and convenient. Also, align and wordWrap apply to all cells, including headers, while cssClass applies only to scrollable cells.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjCore from '@grapecity/wijmo'; // 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], comment: i % 5 == 0 ? 'This item has a long comment so it will wrap in the cell.' : '', sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } // // column properties var theGrid = new wjGrid.FlexGrid('#theGrid', { alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', align: 'center', width: 50 }, { binding: 'country', header: 'Country', cssClass: 'cell-country' }, { binding: 'product', header: 'Product', cssClass: 'cell-product' }, { binding: 'comment', header: 'Comment', wordWrap: true, width: 200 }, { binding: 'sales', header: 'Sales', format: 'c0', align: 'center' }, { binding: 'expenses', header: 'Expenses', format: 'c0', align: 'center' }, ], itemsSource: data }); // // call autosizerows to show word-wrapping theGrid.autoSizeRows(); // // formatItem event var theGridFormatItem = new wjGrid.FlexGrid('#theGridFormatItem', { alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { binding: 'country', header: 'Country' }, { binding: 'product', header: 'Product' }, { binding: 'sales', header: 'Sales', format: 'c0' }, { binding: 'expenses', header: 'Expenses', format: 'c0' }, ], itemsSource: data, formatItem: function (s, e) { if (e.panel == s.cells) { var value = e.panel.getCellData(e.row, e.col); wjCore.toggleClass(e.cell, 'high-value', wjCore.isNumber(value) && value > 6000); wjCore.toggleClass(e.cell, 'low-value', wjCore.isNumber(value) && value < 2000); } } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column Styling</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"> <p> This grid shows the effect of these properties:</p> <div id="theGrid"> </div> <p> The grid below uses <b>formatItem</b> to add class names to numeric cells so their style depends on their values:</p> <div id="theGridFormatItem"> </div> </div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } .cell-country { font-weight: bold } .cell-country:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #bbff00 !important; } .cell-product { font-weight: bold; } .cell-product:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #ffbb00 !important; } .high-value { font-weight: bold; color: green; } .low-value { font-style: italic; color: red; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.grid'; import { Component, Inject, enableProdMode, NgModule, ViewChild, AfterViewInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { @ViewChild('theGrid') theGrid: wjGrid.FlexGrid; data: any; // DataSvc will be passed by derived classes constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { this.theGrid.autoSizeRows(); } // onFormatItem(flexGird: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) { if (e.panel == flexGird.cells) { var value = e.panel.getCellData(e.row, e.col, false); wjCore.toggleClass(e.cell, 'high-value', wjCore.isNumber(value) && value > 6000); wjCore.toggleClass(e.cell, 'low-value', wjCore.isNumber(value) && value < 2000); } } } //\\ @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>GrapeCity Wijmo FlexGrid Column Styling</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"> <p> This grid shows the effect of these properties:</p> <wj-flex-grid #theGrid [itemsSource]="data" [alternatingRowStep]="0" [autoGenerateColumns]="false"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [align]="'center'" [width]="50"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'country'" [header]="'Country'" [cssClass]="'cell-country'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'product'" [header]="'Product'" [cssClass]="'cell-product'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'comment'" [header]="'Comment'" [wordWrap]=true [width]="200"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [align]="'center'" [format]="'c0'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [align]="'center'" [format]="'c0'"> </wj-flex-grid-column> </wj-flex-grid> <p> The grid below uses <b>formatItem</b> to add class names to numeric cells so their style depends on their values:</p> <wj-flex-grid #theGridFormatItem [itemsSource]="data" [alternatingRowStep]="0" [autoGenerateColumns]="false" (formatItem)="onFormatItem(theGridFormatItem, $event)"> <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'" [format]="'c0'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [format]="'c0'"> </wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; interface DataItem { id: number; country: string; product: string; comment: string; sales: number; expenses: number; } @Injectable() export class DataService { getData(): DataItem[] { 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], comment: i % 5 == 0 ? 'This item has a long comment so it will wrap in the cell.' : '', sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } return data; } } .wj-flexgrid { max-height: 250px; margin: 10px 0; } .cell-country { font-weight: bold } .cell-country:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #bbff00 !important; } .cell-product { font-weight: bold; } .cell-product:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #ffbb00 !important; } .high-value { font-weight: bold; color: green; } .low-value { font-style: italic; color: red; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <p> This grid shows the effect of these properties:</p> <wj-flex-grid :items-source="data" :show-alternatingrows="false" :auto-generate-columns="false" :initialized="initialGrid"> <wj-flex-grid-column binding="id" header="ID" align="center" :width="50"></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="Country" cssClass="cell-country"></wj-flex-grid-column> <wj-flex-grid-column binding="product" header="Product" cssClass="cell-product"></wj-flex-grid-column> <wj-flex-grid-column binding="comment" header="Comment" wordWrap="true" :width="200"></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="Sales" align="center" format="c0"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" align="center" format="c0"></wj-flex-grid-column> </wj-flex-grid> <p> The grid below uses <b>formatItem</b> to add class names to numeric cells so their style depends on their values:</p> <wj-flex-grid :items-source="data" :show-alternatingrows="false" :auto-generate-columns="false" :formatItem="onFormatItem"> <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" align="center" format="c0"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" align="center" format="c0"></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 * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData() }; }, mounted: function() { this.grid.autoSizeRows(); }, methods:{ initialGrid(grid) { this.grid = grid; }, onFormatItem(flexGird, e) { if (e.panel == flexGird.cells) { let value = e.panel.getCellData(e.row, e.col, false); wjcCore.toggleClass(e.cell, 'high-value', wjcCore.isNumber(value) && value > 6000); wjcCore.toggleClass(e.cell, 'low-value', wjcCore.isNumber(value) && value < 2000); } } } }); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } .cell-country { font-weight: bold } .cell-country:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #bbff00 !important; } .cell-product { font-weight: bold; } .cell-product:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #ffbb00 !important; } .high-value { font-weight: bold; color: green; } .low-value { font-style: italic; color: red; } 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>GrapeCity Wijmo FlexGrid Column Styling</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 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], comment: i % 5 == 0 ? 'This item has a long comment so it will wrap in the cell.' : '', sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } 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 wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <p>This grid shows the effect of these properties:</p> <wjcGrid.FlexGrid itemsSource={this.state.data} showAlternatingrows={false} autoGenerateColumns={false} initialized={this.initialGrid.bind(this)}> <wjcGrid.FlexGridColumn binding="id" header="ID" align="center" width={50}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="country" header="Country" cssClass="cell-country"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="product" header="Product" cssClass="cell-country"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="comment" header="Comment" wordWrap={true} width={200}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales" align="center" format="c0"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" align="center" format="c0"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> <p> The grid below uses <b>formatItem</b> to add class names to numeric cells so their style depends on their values:</p> <wjcGrid.FlexGrid itemsSource={this.state.data} showAlternatingrows={false} autoGenerateColumns={false} formatItem={this.onFormatItem.bind(this)}> <wjcGrid.FlexGridColumn binding="country" header="Country"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="product" header="Product"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales" align="center" format="c0"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" align="center" format="c0"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } componentDidMount() { this.grid.autoSizeRows(); } initialGrid(grid) { this.grid = grid; } onFormatItem(flexGird, e) { if (e.panel == flexGird.cells) { let value = e.panel.getCellData(e.row, e.col, false); wjcCore.toggleClass(e.cell, 'high-value', wjcCore.isNumber(value) && value > 6000); wjcCore.toggleClass(e.cell, 'low-value', wjcCore.isNumber(value) && value < 2000); } } } 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> .wj-flexgrid { max-height: 250px; margin: 10px 0; } .cell-country { font-weight: bold } .cell-country:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #bbff00 !important; } .cell-product { font-weight: bold; } .cell-product:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #ffbb00 !important; } .high-value { font-weight: bold; color: green; } .low-value { font-style: italic; color: red; } body { margin-bottom: 20px; } export function getData() { 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], comment: i % 5 == 0 ? 'This item has a long comment so it will wrap in the cell.' : '', sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } return data; }