Customization

The StatusBar can be customized using the provided JavaScript APIs. By adding or removing items below, you can see how the workbook's status bar is updated.

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 sheet = spread.getSheet(0); 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; }