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. By default, the value will be displayed as a mask (#) when the column width cannot display the full value. This is known as Mask Mode. You can also choose to display the full value by allowing it to overflow into adjacent cells. This is known as Overflow mode.

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() { sheet.setValue(5, 3, "Left"); sheet.getCell(5, 3, 3).hAlign(0) sheet.setValue(6, 3, "Middle"); sheet.getCell(6, 3, 3).hAlign(1) sheet.setValue(7, 3, "Right"); sheet.getCell(7, 3, 3).hAlign(2) sheet.setValue(8, 3, "General"); sheet.getCell(8, 3, 3).hAlign(3) sheet.setValue(5, 5, new Date(2011, 10, 11)); sheet.getCell(5, 5, 3).hAlign(0) sheet.setValue(6, 5, new Date(2011, 10, 11)); sheet.getCell(6, 5, 3).hAlign(1) sheet.setValue(7, 5, new Date(2011, 10, 11)); sheet.getCell(7, 5, 3).hAlign(2) sheet.setValue(8, 5, new Date(2011, 10, 11)); sheet.getCell(8, 5, 3).hAlign(3) sheet.setColumnWidth(5, 35, 3); sheet.setValue(5, 8, 123456.789654); sheet.getCell(5, 8, 3).hAlign(0) sheet.setValue(6, 8, 123456.789654); sheet.getCell(6, 8, 3).hAlign(1) sheet.setValue(7, 8, 123456.789654); sheet.getCell(7, 8, 3).hAlign(2) sheet.setValue(8, 8, 123456.789654); sheet.getCell(8, 8, 3).hAlign(3) sheet.setColumnWidth(8, 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"> <div class="options-row"> <input id="mask" type="button" value="Mask" /> </div> <div class="options-row"> <input id="overflow" type="button" value="Overflow" /> </div> <!-- text control --> <div> <p> </p> <div class="options-row"> <input id="shrink" type="button" value="Set/Cancel Select Cell Shrink To Fit" /> </div> <div class="options-row"> <input id="showEllipsis" type="button" value="Set/Cancel Select Cell Show Ellipsis" /> </div> <div class="options-row"> <input id="indentIncrease" type="button" value="Set Select Cell Text Indent Increase " /> </div> <div class="options-row"> <input id="indentDecrease" type="button" value="Set Select Cell Text Indent decrease " /> </div> </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; }