Painting

This samples show how you can repaint the worksheet and use suspendPaint and resumePaint function to speed up the rendering performance.

After the user changes the sheet, the Spread component needs to deal with these changes and paint a new sheet. You can use the repaint method to repaint the sheet. Most of the time, after you change the sheet, the component will auto refresh to respond to the changes. If you make a lot of changes at one time, but don't want the sheet to repaint many times, then you can use the suspendPaint method to stop the automatic repaint until the changes are complete. Then call the resumePaint method to redraw the sheet, as shown in the following example:
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); var spreadNS = GC.Spread.Sheets; document.getElementById("setValue").addEventListener('click',function() { var sheet = spread.getActiveSheet(); var cellRange = sheet.getSelections()[0]; if (cellRange) { for (var row = cellRange.row, rowCount = cellRange.row + cellRange.rowCount; row < rowCount; row++) { for (var col = cellRange.col, colCount = cellRange.col + cellRange.colCount; col < colCount; col++) { var salesData = [ ["SalesPers", "Region", "SaleAmt", "ComPct", "ComAmt"], ["Joe", "North", 260, 0.1, 26], ["Robert", "South", 660, 0.15, 99], ["Michelle", "East", 940, 0.15, 141], ["Erich", "West", 410, 0.12, 49.2], ["Dafna", "North", 800, 0.15, 120], ["Rob", "South", 900, 0.15, 135] ]; sheet.setArray(row, col, salesData); sheet.getCell(row, col).foreColor("lightGreen"); sheet.getCell(row, ++col).foreColor("lightGreen"); sheet.getCell(row, ++col).foreColor("lightGreen"); sheet.getCell(row, ++col).foreColor("lightGreen"); sheet.getCell(row, ++col).foreColor("lightGreen"); } } } }); document.getElementById("suspendPaint").addEventListener('click',function() { spread.suspendPaint(); }); document.getElementById("resumePaint").addEventListener('click',function() { spread.resumePaint(); }); };
<!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"> <div class="option-row"> <input type="button" id="suspendPaint" value="Suspend Paint" /> <label>Suspend the paint of Workbook</label> </div> <div class="option-row"> <input type="button" id="setValue" value="Set Value Array" /> <label>Set a range values of sheets</label> </div> <div class="option-row"> <input type="button" id="resumePaint" value="Resume Paint" /> <label>Resume the paint of Workbook</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; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }