Cell Padding and Labels

This sample shows how you can use cell padding and labels to make your data easier to read.

<p>SpreadJS supports cell level padding and cell labels.</p> <p>You can add padding for the cell by setting the style <strong>cellPadding</strong> property. Cell padding has the same policy as CSS Padding. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.cellPadding = <span class="hljs-string">"10"</span>; </code></pre> <p>The value of the label is taken from the watermark, for this reason, you need to set a watermark value when setting a cell label. For example:</p> <pre><code class="hljs js language-js"> style.watermark = <span class="hljs-string">"SpreadJS"</span>; </code></pre> <p>You can set the label style by setting the style <strong>labelOptions</strong> property. The labelOptions is an object and it has five properties:</p> <p><strong>alignment</strong>: The label position. There are six positions: topLeft, topCenter, topRight, bottomLeft, bottomCenter, and bottomRight. The default value is topLeft.</p> <p><strong>visibility</strong>: The label display mode, there are three display modes:</p> <ul> <li><strong>visible - Always show watermark in padding area, don't show watermark in cell area regardless of whether the cell has a value.</strong></li> <li><strong>hidden - Don't show watermark in padding area, but show watermark in cell area with value condition.</strong></li> <li><strong>auto - Show watermark in padding area when the cell has a value, show watermark in cell area when the cell does not have a value. This is the default display value.</strong></li> </ul> <p><strong>font</strong>: The label font. If there is no labelFont value, the style's font value is used. If there is no font value, the sheet default font value is used.</p> <p><strong>foreColor</strong>: The label forecolor. If there is no labelForeColor value, the style's foreColor value is used. If there is no foreColor value, the forecolor is 'grey'.</p> <p><strong>margin</strong>: The label margin. The label margin has the same policy as the CSS margin.</p> <ul> <li><strong>margin-top</strong></li> <li><strong>margin-right</strong></li> <li><strong>margin-bottom</strong></li> <li><strong>margin-left</strong></li> </ul>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 }); initSpread(spread); addCellType(spread); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.options.showHorizontalScrollbar = false; spread.options.showVerticalScrollbar = false; spread.options.tabStripVisible = false; spread.options.grayAreaBackColor = 'white'; sheet.options.isProtected = true; sheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: true, color: 'black' }; sheet.options.rowHeaderVisible = false; sheet.options.colHeaderVisible = false; sheet.setRowCount(14); sheet.setColumnCount(13); initLayout(sheet); setBorder(sheet); spread.resumePaint(); } function initLayout(sheet) { var rowCount = sheet.getRowCount(); var colCount = sheet.getColumnCount(); var i; for (i = 0; i < rowCount; i++) { sheet.setRowHeight(i, 40); } sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 80); i = 0; sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 3, 1, colCount - 3); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, colCount - 4); sheet.addSpan(i++, colCount - 4, 1, 4); sheet.addSpan(i, 0, 1, 3); sheet.addSpan(i, 3, 1, 3); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); for (; i < rowCount; i++) { sheet.addSpan(i, 0, 1, colCount); } } function setBorder(sheet) { sheet.getRange(2, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(5, 0, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(6, 6, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet .getRange(9, -1, 0, -1) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.medium), { bottom: true }); sheet.getRange(9, 0, 1, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(10, 0, 2, 9).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 3, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); } function getCheckBoxCellType(text) { var c = new GC.Spread.Sheets.CellTypes.CheckBox(); c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right); c.caption(text); return c; } function getComboBoxCellType() { var combo = new GC.Spread.Sheets.CellTypes.ComboBox(); combo.items([ { text: 'China', value: '1' }, { text: 'United States', value: '2' }, { text: 'Japan', value: '2' }, { text: 'Germany', value: '2' }, { text: 'France', value: '2' }, { text: 'England', value: '2' } ]); combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); return combo; } function getHyperLinkCellType(text, tooltip) { var h = new GC.Spread.Sheets.CellTypes.HyperLink(); h.text(text); h.linkToolTip(tooltip); return h; } function addCellType(spread) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.getCell(0, 0).value('Example Form').font('bold 30px Arial'); sheet .getCell(1, 0) .value('Please open an account at') .font('bold 18px Arial') .vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(2, 0).watermark('BRANCH NAME').locked(false).cellPadding('20 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(3, 0).value('Personal Details').font('bold 18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(4, 0) .watermark('MARITIAL STATUS') .locked(false) .cellType(getCheckBoxCellType('Married')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(4, 1).locked(false).cellType(getCheckBoxCellType('Single')).cellPadding('15 0 0 0'); sheet.getCell(4, 3).watermark('FULL NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(5, 0) .watermark('EDUCATION') .locked(false) .cellType(getCheckBoxCellType('Under graduate')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(5, 1).locked(false).cellType(getCheckBoxCellType('Graduate')).cellPadding('15 0 0 0'); sheet.getCell(5, 2).locked(false).cellType(getCheckBoxCellType('Others')).cellPadding('15 0 0 0'); sheet .getCell(5, 6) .watermark('NATIONALITY') .locked(false) .cellType(getComboBoxCellType()) .cellPadding('15 0 0 10') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(6, 0).watermark('E-MAIL').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(6, 6).watermark('MOBILE NO.').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(6, 9) .watermark('EXISTING BANK ACCOUNT NO. (IF ANY)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(7, 0) .watermark('IN CASE OF A MINOR PLEASE PROVIDE DETAILS (NAME OF PARENT AND NATURAL GUARDIAN)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 6 0 1' }); sheet.getCell(7, 6).watermark('NAME OF FATHER/SPOUSE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(8, 0).value('Residential address').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(9, 0).watermark('FLAT NO. AND BLDG. NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(9, 6).watermark('ROAD NO./NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(10, 0).watermark('AREA AND LANDMARK').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(10, 9).watermark('CITY').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 0).watermark('TELEPHONE RESIDENCE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(11, 3).watermark('OFFICE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 6).watermark('FAX').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 9).watermark('PIN CODE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(12, 0).value('Referenced web site').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(13, 0) .watermark('HELP MESSAGE') .locked(false) .cellType(getHyperLinkCellType('Any question, please click here.', 'help')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.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" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }