Auto Merge In Both Row And Column

SpreadJS supports AutoMerge for any cell range. The neighboring cells in both the rows and columns will be merged automatically if their text are same and they are not in any span range.

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.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var switchAutoMergeDirection = _getElementById("switchAutoMergeDirection"); switchAutoMergeDirection.addEventListener("change", function (event) { var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); var sheet = 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(; sheet.resumePaint(); }); spread.suspendPaint(); spread.options.showVerticalScrollbar = false; spread.options.showHorizontalScrollbar = false; spread.options.tabStripVisible = false; //init sheet var sheet = spread.getActiveSheet(); sheet.defaults.rowHeight = 40; sheet.defaults.colWidth = 100; sheet.defaults.colHeaderRowHeight = 40; sheet.defaults.rowHeaderColWidth = 60; sheet.setRowCount(5); sheet.setColumnCount(7); var defaultStyle = sheet.getDefaultStyle(); defaultStyle.vAlign =; defaultStyle.hAlign =; 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 var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow); 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 class="options-container"> <div class="option-row"> Changes the auto merge direction. <select id="switchAutoMergeDirection"> <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> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .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; } #switchAutoMergeDirection { margin: 10px 0px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }