Auto Merge In Header Area

You can set AutoMerge for column and row headers. The neighboring cells in header area will be merged automatically if their text are the same and they are not in any span range.

<p>You can set auto merge for a range of row and/or column headers using the fourth parameter of the <strong>autoMerge</strong> method.</p> <p>The following code will apply auto merge for the column header area.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.colHeader); </code></pre> <p>The following code will apply auto merge for the row header area.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.rowHeader); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var sheet = spread.getActiveSheet(); sheet.setRowCount(10); sheet.setColumnCount(8); sheet.defaults.rowHeight = 40; sheet.defaults.colWidth = 100; sheet.defaults.colHeaderRowHeight = 40; sheet.defaults.rowHeaderColWidth = 100; sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader); sheet.setColumnCount(2, GC.Spread.Sheets.SheetArea.rowHeader); [2018, 2018, 2018, 2018, 2019, 2019, 2019, 2019].forEach(function (value, index) { sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader); }); ["Q1", "Q2", "Q3", "Q4","Q1", "Q2", "Q3", "Q4"].forEach(function (value, index) { sheet.setValue(1, index, value, GC.Spread.Sheets.SheetArea.colHeader); }); ["Group1", "Group1", "Group1", "Group1","Group2", "Group2", "Group2", "Group3", "Group3", "Group4"].forEach(function (value, index) { sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader); }); ["Company1", "Company2", "Company3", "Company4","Company5", "Company6", "Company7", "Company8", "Company9", "Company10"].forEach(function (value, index) { sheet.setValue(index, 1, value, GC.Spread.Sheets.SheetArea.rowHeader); }); for (var r = 0; r < 10; r++) { for (var c = 0; c < 8; c++) { sheet.setValue(r, c, Math.round(Math.random() * 10000)); } } //apply auto merge var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.colHeader); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.rowHeader); spread.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!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/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }