Numbers Fit Mode

SpreadJS supports a custom display mode for dates and numbers when the column width is not wide enough to display the entire value.

SpreadJS will change numbers fit mode when numbersFitMode is true. the mode is working in Number / Date type and horizontal text orientation. when cell text width is longer than column width, as default (numbersFitMode = 0), it will be replaced by "###". if change numbersFitMode = 1, the content will obey overflow policy (looks like a right hAlign string).
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); var sheet = spread.getActiveSheet(); spread.suspendPaint(); initData(); spread.resumePaint(); document.getElementById("mask").addEventListener("click", function(){ spread.options.numbersFitMode = 0; }); document.getElementById("overflow").addEventListener("click", function(){ spread.options.numbersFitMode = 1; }); document.getElementById("shrink").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col, ).wordWrap(false); if (!sheet.getActualStyle(row, col).shrinkToFit) { sheet.getCell(row, col).shrinkToFit(true); } else { sheet.getCell(row, col).shrinkToFit(false); } }); document.getElementById("showEllipsis").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col, ).wordWrap(false); sheet.getCell(row, col).shrinkToFit(false); if (!sheet.getActualStyle(row, col).showEllipsis) { sheet.getCell(row, col).showEllipsis(true); } else { sheet.getCell(row, col).showEllipsis(false); } }); document.getElementById("indentIncrease").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col).textIndent((sheet.getCell(row, col).textIndent() || 0) + 1); }); document.getElementById("indentDecrease").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col).textIndent((sheet.getCell(row, col).textIndent() || 0) - 1); }); function initData() { var align = ["Left","Middle","Right","General"]; sheet.getRange(5, 5, 4, 1).formatter("mm-dd-yyyy"); for(var i=0; i<4; i++) { sheet.setValue(i+1, 1, align[i]); sheet.setValue(i+1, 3, new Date(2011, 10, 11)); sheet.setValue((i+1), 5, 123456.789654); sheet.setValue(i+1, 9, "This is a very very long text."); sheet.getRange(i+1, 1, 1, 9).hAlign(i); } sheet.setColumnWidth(3, 35, 3); sheet.setColumnWidth(5, 35, 3); } };
<!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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> </div> <div class="options-container"> <label><b>Change the display of number and date cells (columns D and G)</b></label> <hr /> <div class="options-row"> <input id="mask" type="button" value="Mask" /> </div> <label>Mask Mode displays the value as a mask (#) when the column width cannot display the full value</label> <div class="options-row"> <input id="overflow" type="button" value="Overflow" /> </div> <label>Overflow Mode displays the full value by allowing it to overflow into adjacent cells</label> <br /> <label><b>Select a cell text (columns B and K) and see how the display changes when clicking the below buttons</b></label> <hr /> <div class="options-row"> <input id="shrink" type="button" value="Shrink To Fit" /> </div> <div class="options-row"> <input id="showEllipsis" type="button" value="Show Ellipsis" /> </div> <div class="options-row"> <input id="indentIncrease" type="button" value="Text Indent Increase " /> </div> <div class="options-row"> <input id="indentDecrease" type="button" value="Text Indent decrease " /> </div> </div> </div> </body> </html>
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sample-options { float: right; height: 100%; } .options-toggle { display: none; } @media only screen and (max-width: 768px) { .options-toggle { display: block !important; top: 20px; left: -30px; width: 30px; height: 30px; position: absolute; background-color: #86bd00; line-height: 30px; text-align: center; padding: 4px; box-sizing: border-box; color: #fff; } .options-container { width: 280px !important; overflow: auto; height: 100%; padding: 22px; box-sizing: border-box; } .sample-container { width: 100% !important; height: 100%; overflow: hidden; float: left; } .sample-options { right: 0; padding: 0 !important; overflow: visible !important; position: absolute; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25); transition: right .25s ease-in-out; z-index: 1000; } .sample-options.hidden { right: -280px; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; float: left; } } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .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; box-sizing: border-box; width: 100%; } input[type=button] { margin-top: 6px; display: block; } .summary { background-color: #e6e6fa; padding: 3px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }