Vertical Alignment with Flex Display

In most cases, the vertical alignment of content within FlexGrid cells doesn't matter, since cells contain only a single row of content. However, in some situations you may want to control the vertical alignment of some or all cells. For example, when showing wrapping text or merging cells vertically.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // column properties var theGrid = new wjGrid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', width: 50 }, { binding: 'country', header: 'Country', }, { binding: 'product', header: 'Product', }, { binding: 'sales', header: 'Sales', format: 'c0' }, { binding: 'expenses', header: 'Expenses', format: 'c0' }, { binding: 'active', header: 'Active' } ], itemsSource: getData(), // // use formatItem to apply flex display to the cells // NOTE we could use a CSS rule for this, but we need // formatItem to justify horizontally anyway formatItem: function (s, e) { var style = e.cell.style; style.display = 'flex'; style.alignItems = 'center'; // vertical alignment switch (style.textAlign) { // horizontal alighment case 'right': style.justifyContent = 'flex-end'; break; case 'center': style.justifyContent = 'center'; break; default: style.justifyContent = ''; break; } } }); // // make rows taller to show the vertical alignment theGrid.rows.defaultSize = 45; theGrid.columnHeaders.rows.defaultSize = 65; theGrid.allowResizing = wjGrid.AllowResizing.Both; theGrid.deferResizing = true; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Vertical Alignment with Flex display</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 example shows how you can use a <b>flex</b> layout within the cells to center the content vertically: </p> <div id="theGrid"> </div> </div> </body> </html> // generate some random data 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], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: 1 % 4 == 0 }); } return data; } .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 * 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.rows.defaultSize = 45; this.theGrid.columnHeaders.rows.defaultSize = 65; this.theGrid.allowResizing = wjGrid.AllowResizing.Both; this.theGrid.deferResizing = true; } // onFormatItem(flexGird: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) { var style = e.cell.style; style.display = 'flex'; style.alignItems = 'center'; // vertical alignment switch (style.textAlign) { // horizontal alighment case 'right': style.justifyContent = 'flex-end'; break; case 'center': style.justifyContent = 'center'; break; default: style.justifyContent = ''; break; } } } //\\ @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 Vertical Alignment with Flex display</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 example shows how you can use a <b>flex</b> layout within the cells to center the content vertically: </p> <wj-flex-grid #theGrid [itemsSource]="data" [autoGenerateColumns]=false (formatItem)="onFormatItem(theGridFormatItem, $event)"> <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="50"></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'" [format]="'c0'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [format]="'c0'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'active'" [header]="'Active'"></wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; interface DataItem { id: number; country: string; product: string; sales: number; expenses: number; active: boolean; } @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], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: 1 % 4 == 0 }); } return data; } } .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <p> This example shows how you can use a <b>flex</b> layout within the cells to center the content vertically: </p> <wj-flex-grid :items-source="data" :initialized="initialGrid" :formatItem="onFormatItem"> <wj-flex-grid-column binding="id" header="ID" :width="50"></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" format="c0"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" format="c0"></wj-flex-grid-column> <wj-flex-grid-column binding="active" header="Active"></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 wjcGrid from '@grapecity/wijmo.grid'; import { getData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData() }; }, mounted: function() { this.grid.rows.defaultSize = 45; this.grid.columnHeaders.rows.defaultSize = 65; this.grid.allowResizing = wjcGrid.AllowResizing.Both; this.grid.deferResizing = true; }, methods: { initialGrid(grid) { this.grid = grid; }, onFormatItem(flexGird, e) { let style = e.cell.style; style.display = 'flex'; style.alignItems = 'center'; // vertical alignment switch (style.textAlign) { // horizontal alighment case 'right': style.justifyContent = 'flex-end'; break; case 'center': style.justifyContent = 'center'; break; default: style.justifyContent = ''; break; } } } }); </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>GrapeCity Wijmo FlexGrid Vertical Alignment with Flex display</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], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: 1 % 4 == 0 }); } 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 wjGrid from "@grapecity/wijmo.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 example shows how you can use a <b>flex</b> layout within the cells to center the content vertically: </p> <wjcGrid.FlexGrid itemsSource={this.state.data} initialized={this.initialGrid.bind(this)} formatItem={this.onFormatItem.bind(this)}> <wjcGrid.FlexGridColumn binding="id" header="ID" width={50}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="country" header="Country"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="product" header="Product"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales" format="c0"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" format="c0"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="active" header="Active"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } componentDidMount() { this.grid.rows.defaultSize = 45; this.grid.columnHeaders.rows.defaultSize = 65; this.grid.allowResizing = wjGrid.AllowResizing.Both; this.grid.deferResizing = true; } initialGrid(grid) { this.grid = grid; } onFormatItem(flexGird, e) { let style = e.cell.style; style.display = 'flex'; style.alignItems = 'center'; // vertical alignment switch (style.textAlign) { // horizontal alighment case 'right': style.justifyContent = 'flex-end'; break; case 'center': style.justifyContent = 'center'; break; default: style.justifyContent = ''; break; } } } 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; } 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], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: 1 % 4 == 0 }); } return data; }