Cell Merging

FlexSheet supports merging the selected cells into one by invoking the mergeRange method. If the selected cells contain merged cells, the mergeRange method will un-merge the merged cells. Otherwise, it will merge the selected cells into one cell. FlexSheet allows merging of cells that contain any data. This is different from FlexGrid, which supports content-driven cell merging.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjFlexSheet from '@grapecity/wijmo.grid.sheet'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let mergeSheet = new wjFlexSheet.FlexSheet('#mergeSheet'); mergeSheet.addUnboundSheet('unbound', 20, 8); mergeSheet.deferUpdate(() => { let colIdx, rowIdx; for (colIdx = 0; colIdx < mergeSheet.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < mergeSheet.rows.length; rowIdx++) { mergeSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } }); updateMergeButtonState(mergeSheet.getSelectionFormatState().isMergedCell); mergeSheet.selectionChanged.addHandler(() => { updateMergeButtonState(mergeSheet.getSelectionFormatState().isMergedCell); }); document.querySelector('#mergeButton').addEventListener('click', () => { mergeSheet.mergeRange(); updateMergeButtonState(mergeSheet.getSelectionFormatState().isMergedCell); }); function updateMergeButtonState(isMergeCell) { let mergeButton = document.querySelector('#mergeButton'); if (isMergeCell) { mergeButton.textContent = 'UnMerge'; } else { mergeButton.textContent = 'Merge'; } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet 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="mergeSheet"></div> <button id="mergeButton" type="button" class="btn btn-default"></button> </div> </body> </html> .wj-flexsheet { height: 400px; margin: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridSheetModule } from '@grapecity/wijmo.angular2.grid.sheet'; import * as wjcSheet from '@grapecity/wijmo.grid.sheet'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { mergeState: any = {}; @ViewChild('flex') flex: wjcSheet.FlexSheet; initializeFlexSheet(flex: wjcSheet.FlexSheet) { flex.deferUpdate(() => { for (let row = 0; row < flex.rows.length; row++) { for (let col = 0; col < flex.columns.length; col++) { flex.setCellData(row, col, row + col); } } }); flex.selectionChanged.addHandler(() => { this.mergeState = flex.getSelectionFormatState(); }); } mergeCells() { this.flex.mergeRange(); this.mergeState = this.flex.getSelectionFormatState(); } } @NgModule({ imports: [WjGridSheetModule, 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 FlexSheet 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"> <!-- the flexsheet --> <wj-flex-sheet #flex (initialized)="initializeFlexSheet(flex)"> <wj-sheet [name]="'unbound'" [rowCount]="20" [columnCount]="10"></wj-sheet> </wj-flex-sheet> <button (click)="mergeCells()" type="button" class="btn btn-default">{{mergeState.isMergedCell ? 'UnMerge' : 'Merge'}}</button> </div> .wj-flexsheet { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet id="sample-sheet" :initialized="initializeFlexSheet"> <wj-sheet :name="'unbound'" :rowCount="20" :columnCount="10"></wj-sheet> </wj-flex-sheet> <button @click="mergeCells()" type="button" class="btn btn-default" >{{mergeState.isMergedCell ? 'UnMerge' : 'Merge'}}</button> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import * as wjcSheet from "@grapecity/wijmo.grid.sheet"; import "@grapecity/wijmo.vue2.grid.sheet"; let App = Vue.extend({ name: "app", data: function() { return { mergeState: {} }; }, methods: { initializeFlexSheet(flex) { this.flex = flex; flex.deferUpdate(() => { for (let row = 0; row < flex.rows.length; row++) { for (let col = 0; col < flex.columns.length; col++) { flex.setCellData(row, col, row + col); } } }); flex.selectionChanged.addHandler(() => { this.mergeState = flex.getSelectionFormatState(); }); }, mergeCells: function() { this.flex.mergeRange(); this.mergeState = this.flex.getSelectionFormatState(); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> #sample-sheet { height: 400px; margin: 6px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet 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 './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjGridSheet from "@grapecity/wijmo.react.grid.sheet"; class App extends React.Component { constructor(props) { super(props); this.mergeCells = () => { this._flex.mergeRange(); this.state = this._flex.getSelectionFormatState(); }; this.state = {}; } render() { return (<div className="container-fluid"> <wjGridSheet.FlexSheet id="sample-sheet" initialized={this.initializeFlexSheet.bind(this)}> <wjGridSheet.Sheet name="unbound" rowCount={20} columnCount={10}></wjGridSheet.Sheet> </wjGridSheet.FlexSheet> <button onClick={this.mergeCells.bind(this)} type="button" className="btn btn-default"> {this.state.isMergedCell ? 'UnMerge' : 'Merge'} </button> </div>); } initializeFlexSheet(flex) { this._flex = flex; this._flex.deferUpdate(() => { for (let row = 0; row < this._flex.rows.length; row++) { for (let col = 0; col < this._flex.columns.length; col++) { this._flex.setCellData(row, col, row + col); } } }); this._flex.selectionChanged.addHandler(() => { this.state = this._flex.getSelectionFormatState(); }); } } 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> #sample-sheet { height: 400px; margin: 6px 0; }