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.

You can customize status bar items using the GC.Spread.Sheets.StatusBar.StatusItem class. You can add or remove an item with the following code:: You can get one or all items in the list: StatusItem also provides customization: onCreateItemView(container): Create the item element in the status bar. Override this to customize the item. onUpdate(): status bar update callback. onBind(context): Bind the Context. Can override to add context related event listener. onUnbind(): Unbind the Context. Can override to remove context related event listener.
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; }