Painting

This sample demonstrates repainting the workbook and using suspendPaint/resumePaint function to improve rendering performance. Follow the instructions below to see how painting in SpreadJS affects the rendering. The buttons in the demo suspend and resume painting during long and time-consuming updates to the working in order to improve rendering performance.

<p>SpreadJS automatically repaints after every update that impacts the workbook's current visible area. This includes adding or removing rows, columns or sheets. A best practice for SpreadJS developers, especially if your code makes many time-consuming changes to the workbook, is to suspend painting at the start of these operations and resume it at the end. This way, SpreadJS repaints only once after all the changes have been made which greatly improves the performance.</p> <p>Use the <strong>suspendPaint</strong> method of the workbook object to suspend painting and <strong>resumePaint</strong> to resume it.</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>)); spread.suspendPaint(); spread.addSheet(<span class="hljs-number">0</span>); spread.fromJSON(json); <span class="hljs-comment">// json data</span> spread.resumePaint(); </code></pre> <p>You can force a repaint if your code makes changes in the SpreadJS component that do not cause the component to repaint on its own.</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>)); spread.repaint(); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.addSheet(0); var sd = dataSource; var sheet = spread.getActiveSheet(); if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); spread.resumePaint(); _getElementById('btnAddSheet').addEventListener('click', function() { spread.addSheet(0); }); _getElementById('suspendPaint').addEventListener('click', function() { spread.suspendPaint(); }); _getElementById('resumePaint').addEventListener('click', function() { 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"> <label>Click buttons to suspect and resume painting the Spread component, and see how actions are affected by that state.</label> </div> <input type="button" id="suspendPaint" value="Suspend Paint"/> <input type="button" id="btnAddSheet" value="Add Sheet" /> <input type="button" id="resumePaint" value="Resume Paint"/> </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: 16px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }