Status Bar

The status bar can display TableSheet data and states using custom status bar items.

The status bar can display various sheet status and summary values. Select different ranges of cells to see how the information in the status bar changes. This is the sample code:
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var tableName = "Employee"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initStatusBar(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var dataManager = spread.dataManager(); //add order table var orderTable = dataManager.addTable("myTable", { remote: { read: { url: apiUrl } } }); //init a table sheet var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row sheet.actionColumn.options({ visible: false }); //hide action column //bind a view to the table sheet var myView = orderTable.addView("myView", [ { value: "Id", width: 50 }, { value: "TitleOfCourtesy", width: 150 }, { value: "FirstName", width: 120 }, { value: "LastName", width: 120 }, { value: "Title", width: 150 }, { value: "Extension", width: 100 }, { value: "HomePhone", width: 120 }, { value: "Address", width: 100 }, { value: "City", width: 50 }, { value: "Region", width: 100 }, { value: "PostalCode", width: 120 }, { value: "Country", width: 100 }, { value: "Notes", width: 100 } ]); myView.fetch().then(function() { sheet.setDataView(myView); }); spread.resumePaint(); } function initStatusBar(spread) { //define custom status item var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem; function RecordCountItem(name, options) { StatusItem.call(this, name, options); this._value = 1; } RecordCountItem.prototype = new StatusItem(); RecordCountItem.prototype.onCreateItemView = function(container) { var element = this._element; if (!element) { element = this._element = document.createElement("span"); element.innerText = "Record Count: " + this._value; } container.appendChild(element); }; RecordCountItem.prototype.onBind = function(context) { var _this = this; context.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) { var selections = args.newSelections; var count = 0; for (var i = 0; i < selections.length; i++) { count += selections[i].rowCount; } _this._value = count; _this.onUpdate(); }); }; RecordCountItem.prototype.onUpdate = function() { StatusItem.prototype.onUpdate.call(this); this._element.innerText = "Record Count: " + this._value; }; //init status bar var recordCountItem = new RecordCountItem('recordCountItem', { menuContent: 'Record Count', value: 0 }); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'), { items: [recordCountItem] }); statusBar.bind(spread); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!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"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.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 id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> <div id="optionContainer" class="optionContainer"> </div> </div> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #statusBar { height: 25px; width: 100%; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; }