Customization

This sample demonstrates customizing the StatusBar using the provided JavaScript APIs. Try adding or removing items in the demo below and check the workbook's status bar to see those updates.

<p>You can customize status bar items using the <strong>GC.Spread.Sheets.StatusBar.StatusItem</strong> class.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"ss"</span>)); <span class="hljs-keyword">var</span> spanItem = <span class="hljs-keyword">new</span> GC.Spread.Sheets.StatusBar.StatusItem(<span class="hljs-string">'spanItem'</span>, {<span class="hljs-attr">menuContent</span>: <span class="hljs-string">'current span'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'span test'</span>}); <span class="hljs-keyword">var</span> statusBar = <span class="hljs-keyword">new</span> GC.Spread.Sheets.StatusBar.StatusBar( <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'statusBar'</span>), { <span class="hljs-attr">items</span>: [spanItem] } ); statusBar.bind(spread); </code></pre> <p>You can add or remove an item with the following code::</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> statusItemName = <span class="hljs-string">'statusItem'</span>; <span class="hljs-keyword">var</span> statusItem = <span class="hljs-keyword">new</span> StatusItem(statusItemName, {<span class="hljs-attr">menuContent</span>: <span class="hljs-string">'item'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'itemValue'</span>}); statusBar.add(statusItem); statusBar.remove(statusItemName); </code></pre> <p>You can get one or all items in the list:</p> <pre><code class="hljs js language-js"> statusBar.get(itemName); statusBar.all(); </code></pre> <p><strong>StatusItem</strong> also provides customization:</p> <p><span class="indent-1">onCreateItemView(container)</span>: Create the item element in the status bar. Override this to customize the item.</p> <p><span class="indent-1">onUpdate()</span>: status bar update callback.</p> <p><span class="indent-1">onBind(context)</span>: Bind the Context. Can override to add context related event listener.</p> <p><span class="indent-1">onUnbind()</span>: Unbind the Context. Can override to remove context related event listener.</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); var defaultData = [ ["SalesPers", "Birth", "Region", "SaleAmt", "ComPct", "ComAmt"], ["Joe", new Date("2000/01/23"), "North", 260, 0.1, 26], ["Robert", new Date("1988/08/21"), "South", 660, 0.15, 99], ["Michelle", new Date("1995/08/03"), "East", 940, 0.15, 141], ["Erich", new Date("1994/05/23"), "West", 410, 0.12, 49], ["Dafna", new Date("1992/07/21"), "North", 800, 0.15, 120], ["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135], ["Jonason", new Date("1987/02/11"), "West", 300, 0.17, 110], ["Enana", new Date("1997/04/01"), "West", 310, 0.16, 99], ["Dania", new Date("1997/02/15"), "North", 500, 0.10, 76], ["Robin", new Date("1991/12/28"), "East", 450, 0.18, 34] ]; var sheet = spread.getSheet(0); sheet.setArray(1, 1, defaultData); sheet.getRange(2, 2, 10, 1).formatter("yy/mm/dd"); sheet.setSelection(2, 6, 10, 1); var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem; function Popup(name, options) { StatusItem.call(this, name, options); } Popup.prototype = new StatusItem(); Popup.prototype.onCreateItemView = function (container) { var item = document.createElement('div'); item.innerText = this.value; item.style.background = '#86bd00'; item.style.padding = "0 3px"; container.appendChild(item); container.addEventListener('click', function () { alert('Popup'); }) }; var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar')); statusBar.bind(spread); statusBar.add(new Popup('Popup', {menuContent: 'popup item', value: 'popup', tipText: 'popup'})); // add item document.getElementById('addItem').addEventListener('click',function () { var itemName = document.getElementById('addItemName').value; if (!itemName) { itemName = 'default'; } statusBar.add(new StatusItem(itemName, {menuContent: itemName, value: itemName, itemName: itemName})); }); // delete item document.getElementById('removeItem').addEventListener('click', function () { statusBar.remove(document.getElementById('removeItemName').value); }) };
<!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 id="statusBar"></div> </div> <div class="sample-options"> <div class="options-container"> <p class="summary"> You can add a customized item or remove an item in the StatusBar. </p> <div class="option-row"> <label for="addItemName">Add an item</label> <input type="text" id="addItemName" placeholder="Item Name"> <input type="button" value="Add Item" id="addItem"> </div> <div class="option-row"> <label for="removeItemName">Remove an item</label> <input type="text" id="removeItemName" placeholder="Item Name"> <input type="button" value="Remove Item" id="removeItem"> </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; }