Status Bar

The status bar can display TableSheet data and states using custom status bar items. For example, double click in any cell to see the status bar message change to edit.

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 = "Customer"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var myView; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); var statusBar = initStatusBar(spread); initSpread(spread, statusBar); }; function initSpread(spread, statusBar) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var dataManager = spread.dataManager(); //add customer table var customerTable = 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 //bind a view to the table sheet myView = customerTable.addView("myView", [ { value: "Id", width: 80 }, { value: "CompanyName", width: 200, caption :"Company Name" }, { value: "ContactName", width: 150, caption :"Contact" }, { value: "ContactTitle", width: 200, caption :"Title" }, { value: "Address", width: 200 }, { value: "City", width: 150, caption :"City" }, { value: "State", width: 100, caption :"State" }, { value: "Region", width: 100, caption :"Region" } ]); myView.fetch().then(function() { sheet.setDataView(myView); if (statusBar) { var recordItem = statusBar.get("recordCountItem"); if (recordItem) { recordItem.dataSourceLength = myView.length(); recordItem.visibleLength = myView.visibleLength(); recordItem.onUpdate(); } } }); 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; this.dataSourceLength = 0; this.visibleLength = 0; } RecordCountItem.prototype = new StatusItem(); RecordCountItem.prototype.onCreateItemView = function(container) { var element = this._element; if (!element) { element = this._element = document.createElement("span"); element.innerHTML = " Rows: <b>" + this.visibleLength + "</b> of <b>" + this.dataSourceLength + "</b> - Record Count: <b>" + this._value + "</b>"; } container.appendChild(element); }; RecordCountItem.prototype.onBind = function(context) { var _this = this; context.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) { _this._value = getRowCount(args.newSelections); _this.onUpdate(); }); context.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, args) { _this.dataSourceLength = myView.length(); _this.visibleLength = myView.visibleLength(); _this.onUpdate(); }); context.bind(GC.Spread.Sheets.Events.RangeFilterCleared, function (e, args) { _this.dataSourceLength = myView.length(); _this.visibleLength = myView.visibleLength(); _this.onUpdate(); }); }; RecordCountItem.prototype.onUpdate = function() { StatusItem.prototype.onUpdate.call(this); this._element.innerHTML = " Rows: <b>" + this.visibleLength + "</b> of <b>" + this.dataSourceLength + "</b> - Record Count: <b>" + this._value + "</b>"; }; //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); return statusBar; } function getRowCount(selections) { var selectedRows = {}; for (var i = 0; i < selections.length; i++) { var row = selections[i].row; var rowCount = selections[i].rowCount; if (row === -1) { return rowCount; } for (var c = 0; c < rowCount; c++) { selectedRows[row + c] = true; } } return Object.keys(selectedRows).length; } 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/@mescius/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/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }