Paste Extended Range

SpreadJS supports extending the pasted range if the pasted range is not enough for the pasted data. This can give users more freedom with the amount of cells that can be pasted.

If you want to use this feature, just set the workbook allowExtendPasteRange option to true. For example: Then SpreadJS will extend the paste range if the paste range is not large enough for data. The default value is false
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var sheet = spread.getActiveSheet(); sheet.setRowCount(13); sheet.setColumnCount(10); sheet.options.allowCellOverflow = true; sheet.getCell(0, 0).value("Copy/cut the following data then paste to last row or last column."); loadGoodListTable(sheet, 2, 0); spread.resumePaint(); var allowExtendPasteRange = document.getElementById('allowExtendPasteRange'); allowExtendPasteRange.checked=spread.options.allowExtendPasteRange; allowExtendPasteRange.addEventListener('change',function () { spread.options.allowExtendPasteRange = allowExtendPasteRange.checked; }); } function loadGoodListTable(sheet, startRow, startCol) { if (startRow === undefined) { startRow = 0; } if (startCol === undefined) { startCol = 0; } if (sheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport) - startRow < 8 || sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) - startCol < 3) { return; } sheet.addSpan(startRow + 0, startCol + 0, 1, 4); sheet.setRowHeight(startRow + 0, 40); sheet.setValue(startRow + 0, startCol + 0, "Goods List"); var title = sheet.getCell(startRow + 0, startCol + 0); title.font("bold 30px arial"); title.vAlign(GC.Spread.Sheets.VerticalAlign.center); title.backColor("#D1CBC5"); sheet.setColumnWidth(startCol + 0, 100); sheet.setColumnWidth(startCol + 1, 100); sheet.setColumnWidth(startCol + 2, 100); sheet.setColumnWidth(startCol + 3, 120); sheet.getRange(startRow + 0, startCol + 0, 8, 4).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {all: true}); sheet.setValue(startRow + 1, startCol + 0, "Name"); sheet.setValue(startRow + 1, startCol + 1, "Category"); sheet.setValue(startRow + 1, startCol + 2, "Price"); sheet.setValue(startRow + 1, startCol + 3, "Shopping Place"); for (var i = 0; i < 4; i++) { sheet.getCell(startRow + 1, startCol + i).font("bold 15px arial"); } sheet.setValue(startRow + 2, startCol + 0, "Apple"); sheet.setValue(startRow + 3, startCol + 0, "Potato"); sheet.setValue(startRow + 4, startCol + 0, "Tomato"); sheet.setValue(startRow + 5, startCol + 0, "Sandwich"); sheet.setValue(startRow + 6, startCol + 0, "Hamburger"); sheet.setValue(startRow + 7, startCol + 0, "Grape"); sheet.setValue(startRow + 2, startCol + 1, "Fruit"); sheet.setValue(startRow + 3, startCol + 1, "Vegetable"); sheet.setValue(startRow + 4, startCol + 1, "Vegetable"); sheet.setValue(startRow + 5, startCol + 1, "Food"); sheet.setValue(startRow + 6, startCol + 1, "Food"); sheet.setValue(startRow + 7, startCol + 1, "Fruit"); sheet.setValue(startRow + 2, startCol + 2, 1.00); sheet.setValue(startRow + 3, startCol + 2, 2.01); sheet.setValue(startRow + 4, startCol + 2, 3.21); sheet.setValue(startRow + 5, startCol + 2, 2); sheet.setValue(startRow + 6, startCol + 2, 2); sheet.setValue(startRow + 7, startCol + 2, 4); var myFormatter = new GC.Spread.Formatter.GeneralFormatter("$#,##0.00;[Red] $#,##0.00"); for (var i = 2; i < 8; i++) { sheet.getCell(startRow + i, startCol + 2).formatter(myFormatter); } sheet.setValue(startRow + 2, startCol + 3, "Wal-Mart"); sheet.setValue(startRow + 3, startCol + 3, "Other"); sheet.setValue(startRow + 4, startCol + 3, "Other"); sheet.setValue(startRow + 5, startCol + 3, "Wal-Mart"); sheet.setValue(startRow + 6, startCol + 3, "Wal-Mart"); sheet.setValue(startRow + 7, startCol + 3, "Other"); }
<!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/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"> Check this to allow the user to copy a range of cells and paste it into another range, extending the target range if it is too small. <div class="option-row"> <label> <input type="checkbox" id="allowExtendPasteRange">allowExtendPasteRange </label> </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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }