Customization

This sample shows how you can customize the floating object, including changing its position, resizing it, and so on.

<p>You can change the position and size of the floating object. The position and size can be set two different ways. For example:</p> <pre><code class="hljs js language-js"> floatingObject.startRow(<span class="hljs-number">1</span>); floatingObject.startColumn(<span class="hljs-number">1</span>); floatingObject.startRowOffset(<span class="hljs-number">0</span>); floatingObject.startColumnOffset(<span class="hljs-number">0</span>); floatingObject.endRow(<span class="hljs-number">4</span>); floatingObject.endColumn(<span class="hljs-number">4</span>); floatingObject.endRowOffset(<span class="hljs-number">0</span>); floatingObject.endColumnOffset(<span class="hljs-number">0</span>); <span class="hljs-comment">// or</span> <span class="hljs-keyword">var</span> point = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Point(<span class="hljs-number">62</span>, <span class="hljs-number">20</span>); floatingObject.position(point); floatingObject.width(<span class="hljs-number">186</span>); floatingObject.height(<span class="hljs-number">60</span>); </code></pre> <p>Sometimes you will resize the row's height or the column's width, and you don't want the position or size of the floating object to change. In that case, use the <strong>dynamicMove</strong> and <strong>dynamicSize</strong> methods. For example:</p> <pre><code class="hljs js language-js"> floatingObject.dynamicMove(<span class="hljs-literal">false</span>); floatingObject.dynamicSize(<span class="hljs-literal">false</span>); </code></pre> <p>Note that if the dynamicMove method is false and the dynamicSize method is true, neither has an effect.</p> <p>If you do not want the floating object to change based on UI interaction, use the <strong>isLocked</strong> method to lock it. If you want to lock it, first lock the sheet.</p> <p>When one floating object overlaps another, you can change the order from top to bottom using the <strong>zIndex</strong> method. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> zIndex = floatingObject.zIndex(<span class="hljs-string">'f1'</span>); floatingObject.zIndex(<span class="hljs-string">'f1'</span>, zIndex + <span class="hljs-number">1</span>); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.suspendPaint(); var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0"); customFloatingObject.startRow(1); customFloatingObject.startColumn(1); customFloatingObject.endColumn(6); customFloatingObject.endRow(6); var div = document.createElement('div'); div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>" div.style.background = 'mintcream'; div.style.border = '1px solid green'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.pictures.add("f2", "$DEMOROOT$/spread/source/images/spreadJs.PNG", 62, 140, 200, 150); sheet.resumePaint(); document.getElementById('isSheetProtected').onchange = function () { var sheet = spread.getActiveSheet(); sheet.options.isProtected = $(this).prop("checked"); }; document.getElementById('isLocked').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = $(this).prop("checked"); for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].isLocked(value); } } } }; document.getElementById('isVisible').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = $(this).prop("checked"); for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].isVisible(value); } } } }; document.getElementById('dynamicMove').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = $(this).prop("checked"); for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].dynamicMove(value); } } } }; document.getElementById('dynamicSize').onchange = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); if (floatingObjects) { var value = $(this).prop("checked"); for (var index = 0; index < floatingObjects.length; index++) { if (floatingObjects[index].isSelected()) { floatingObjects[index].dynamicSize(value); } } } }; document.getElementById('moveFloatingObject').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var row = parseInt(document.getElementById('moveRow').value); var col = parseInt(document.getElementById('moveColumn').value); if (!isNaN(row) && !isNaN(col)) { if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (fo.isSelected()) { fo.startRow(row); fo.startColumn(col); fo.startRowOffset(0); fo.startColumnOffset(0); } } } } sheet.repaint(); }; document.getElementById('resizeFloatingObject').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var width = parseFloat(document.getElementById('resizeWidth').value); var height = parseFloat(document.getElementById('resizeHeight').value); if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) { if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (fo.isSelected()) { fo.width(width); fo.height(height); } } } } sheet.repaint(); }; document.getElementById('bringToForward').onclick = function () { var sheet = spread.getActiveSheet(); var floatingObjects = _concat(sheet); var maxZIndex = 0, selectedCount = 0, selectedName = null; if (floatingObjects) { for (var index = 0, len = floatingObjects.length; index < len; index++) { var fo = floatingObjects[index]; if (!fo || !fo.name || !fo.isSelected) { continue; } var zIndex = sheet.floatingObjects.zIndex(fo.name()); if (zIndex > maxZIndex) { maxZIndex = zIndex; } if (fo.isSelected()) { selectedCount++; selectedName = fo.name(); } } if (selectedCount === 1) { sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1); } } }; }; function _concat(sheet) { if (sheet) { var customFloatingObjects = sheet.floatingObjects.all(); var pictures = sheet.pictures.all(); return pictures.concat(customFloatingObjects); } return []; }
<!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="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.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"> <p class="desc">Select the floating object in the Spread component and change it using these options</p> </div> <div class="option-row"> <input type="checkbox" id="isSheetProtected" /> <label for="IsSheetProtected">IsSheetProtected</label> </div> <div class="option-row"> <input type="checkbox" id="isLocked" checked /> <label for="isLocked">IsLocked</label> </div> <div class="option-row"> <input type="checkbox" id="isVisible" checked /> <label for="isVisible">IsVisible</label> </div> <div class="option-row"> <input type="checkbox" id="dynamicSize" checked /> <label for="dynamicSize">DynamicSize</label> </div> <div class="option-row"> <input type="checkbox" id="dynamicMove" checked /> <label for="dynamicMove">DynamicMove</label> <hr> </div> <div class="option-row"> <label for="moveRow">Row:</label> <input type="text" id="moveRow" /> <label for="moveColumn">Column:</label> <input type="text" id="moveColumn" /> <input type="button" id="moveFloatingObject" value="Move floating Object" /> </div> <hr> <div class="option-row"> <label for="resizeWidth">Width:</label> <input type="text" id="resizeWidth" /> <label for="resizeHeight">Height:</label> <input type="text" id="resizeHeight" /> <input type="button" id="resizeFloatingObject" value="Resize floating object" /> </div> <hr> <div class="option-row"> <input type="button" id="bringToForward" value="Bring Forward" /> </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; } input, select { padding: 4px 6px; width: 100%; box-sizing: border-box; } input[type=checkbox] { width: auto; } label { display: inline-block; min-width: 70px; margin: 6px 0; } hr { border-color: #fff; opacity: .2; margin: 12px 0; } input[type=button] { margin-top: 6px; } .desc{ padding:2px 10px; background-color:lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }