You can set auto merge using the autoMerge method for both rows and columns.
The following code will apply auto merge in column direction preferentially then in row direction.
The following code will apply auto merge in row direction preferentially then in column direction.
The following code will apply auto merge in column direction.
The following code will apply auto merge in row direction.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
showHorizontalScrollbar = false;
showVerticalScrollbar = false;
tabStripVisible = false;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
sheet.defaults.rowHeight = 40;
sheet.defaults.colWidth = 100;
sheet.defaults.colHeaderRowHeight = 40;
sheet.defaults.rowHeaderColWidth = 60;
let defaultStyle = sheet.getDefaultStyle();
defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.setDefaultStyle(defaultStyle);
["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].forEach(function (value, index) {
sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader);
});
["12:00", "13:00", "14:00", "15:00", "16:00"].forEach(function (value, index) {
sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader);
});
sheet.setArray(0, 0, [
["Walker", "Morning Show", "Morning Show", "Sport", "Weather", "N/A", "N/A"],
["Today Show", "Today Show", "Sesame Street", "Football", "Market Watch", "N/A", "N/A"],
["Today Show", "Today Show", "Kid Zone", "Football", "Soap Opera", "N/A", "N/A"],
["News", "News", "News", "News", "News", "N/A", "N/A"],
["News", "News", "News", "News", "News", "N/A", "N/A"]
]);
//apply auto merge
let range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow);
spread.resumePaint();
}
switchAutoMergeDirection(event: any) {
let range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
//remove old auto merge range
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none);
//add new auto merge range
sheet.autoMerge(range, parseInt(event.target.value));
sheet.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/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.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"
[showHorizontalScrollbar]="showHorizontalScrollbar"
[showVerticalScrollbar]="showVerticalScrollbar"
[tabStripVisible]="tabStripVisible">
<gc-worksheet [rowCount]="5" [colCount]="7"></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
Changes the auto merge direction.
<select id="switchAutoMergeDirection" (change)="switchAutoMergeDirection($event)">
<option value="0">None</option>
<option value="1">column</option>
<option value="2">row</option>
<option value="3" selected="selected">columnRow</option>
<option value="4">rowColumn</option>
</select>
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
#switchAutoMergeMode {
margin: 10px 0px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
