Cell Merging

The FlexGrid supports content-driven cell merging. To enable cell merging, set the allowMerging property to indicate what part or parts of the grid you want to merge, and set the allowMerging property on specific rows and columns to true. Once you do that, the grid will merges cells that have the same content, grouping the data visually.

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() { // // create some random data var countries = 'US,Germany,UK,Japan'.split(','); var data = []; for (var i = 0; i < 20; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // // default clipboard behavior var theGrid = new wjGrid.FlexGrid('#theGrid', { allowMerging: 'Cells', isReadOnly: true, alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { binding: 'country', header: 'Country', allowMerging: true }, { binding: 'sales', header: 'Sales', format: 'n2' }, { binding: 'expenses', header: 'Expenses', format: 'n2' }, { binding: 'active', header: 'Active', allowMerging: true }, ], itemsSource: new wjCore.CollectionView(data, { sortDescriptions: ['country', 'active'] }) }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Cell Merging</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 id="theGrid"> </div> </div> </body> </html> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; class DataItem { id: number; country: string; active: boolean; downloads: number; sales: number; expenses: number; } // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjCore.CollectionView; // DataSvc will be passed by derived classes constructor() { this.data = new wjCore.CollectionView(this._getData(), { sortDescriptions: ['country', 'active'] }); } private _getData(): DataItem[] { var countries = 'US,Germany,UK,Japan'.split(','); var data = []; for (var i = 0; i < 20; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } //\\ @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], 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 Cell Merging</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"> <wj-flex-grid [itemsSource]="data" [allowMerging]="'Cells'" [isReadOnly]="true" [alternatingRowStep]="0"> <wj-flex-grid-column [binding]="'country'" [header]="'Country'" [allowMerging]=true></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [format]="'n2'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [format]="'n2'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'active'" [header]="'Active'" [allowMerging]=true></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data" :allowMerging="'Cells'" :isReadOnly="true" :alternatingRowStep="0" > <wj-flex-grid-column :binding="'country'" :header="'Country'" :allowMerging="true"></wj-flex-grid-column> <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :format="'n2'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" :format="'n2'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'active'" :header="'Active'" :allowMerging="true"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import * as wjCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.grid"; import "@grapecity/wijmo.vue2.grid"; let App = Vue.extend({ name: "app", data: function() { return { data: new wjCore.CollectionView(this.getData(), { sortDescriptions: ["country", "active"] }) }; }, methods: { getData: function() { var countries = "US,Germany,UK,Japan".split(","); var data = []; for (var i = 0; i < 20; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Cell Merging</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 "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.react.grid"; class App extends React.Component { constructor(props) { super(props); let data = this.getData(); this.state = { data: new wjCore.CollectionView(data, { sortDescriptions: ["country", "active"] }) }; } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid itemsSource={this.state.data} allowMerging="Cells" isReadOnly={true} alternatingRowStep={0}> <wjcGrid.FlexGridColumn binding="country" header="Country" allowMerging={true}></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="sales" header="Sales" format="n2"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" format="n2"></wjcGrid.FlexGridColumn> <wjcGrid.FlexGridColumn binding="active" header="Active" allowMerging={true}></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } getData() { var countries = "US,Germany,UK,Japan".split(","); var data = []; for (var i = 0; i < 20; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } 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 FlexGrid Cell Merging</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: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; }