Name Box Component

SpreadJS provides an Excel-like Name Box, which can show selected range or item and navigate to named range.

Introduction To create a NameBox, add a host DIV element and bind it to the Spread instance, as shown in the following example: NameBox will update value automatically with UI behavior, you can also use refresh() to refresh name box value manually. You can use dispose() to remove the NameBox. Name Box Options You can control the name box by following options: GC.Spread.Sheets.NameBox.INameBoxOptions Set Name Box Options set when creating a name box. set the option with a name box instance.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); var nameBox = new GC.Spread.Sheets.NameBox.NameBox('nameBox', spread); bindEvents(spread, nameBox); }; function changeProperty(nameBox, pn, value) { nameBox.options[pn] = value; } function bindEvents(spread, nameBox) { ["enableAddCustomName", "enableNavigateToRange", "showCustomNameList"].forEach(function (pn) { document.getElementById(pn).addEventListener("change", function (e) { changeProperty(nameBox, pn, !! e.target.checked); }); }); document.getElementById("dropDownMaxHeight").addEventListener("change", function (e) { let value = + e.target.value; nameBox.options.dropDownMaxHeight = value; }); } function initSpread(spread) { var sheet = spread.getSheet(0); initTable(spread); initSlicer(sheet); initChart(sheet); spread.addCustomName("workBookName1", "Sheet1!A2:D4", 0, 0, ""); spread.addCustomName("workBookName2", "Sheet2!B3:E6", 0, 0, ""); sheet.addCustomName("sheet1Name1", "C2:D3", 0, 0, ""); sheet.addCustomName("sheet1Name2", "B4:E10", 0, 0, ""); spread.getSheet(1).addCustomName('sheet2Name1', "D4:G6", 0, 0, ""); } function initTable(spread) { var dataSource = [ [ "name", "product", "date", "amount", "price", "sales" ], [ "chris", "desk", new Date("2020-10-08T16:00:00.000Z"), 5, 199, 995 ], [ "radow", "pen", new Date("2020-09-15T16:00:00.000Z"), 2, 5, 10 ], [ "peyton", "pencil", new Date("2021-06-22T16:00:00.000Z"), 6, 1.5, 9 ], [ "johnson", "chair", new Date("2021-07-19T16:00:00.000Z"), 7, 68, 476 ], [ "vic", "notebook", new Date("2021-01-13T16:00:00.000Z"), 7, 3.2, 22.4 ], [ "lan", "desk", new Date("2021-03-12T16:00:00.000Z"), 9, 199, 1791 ], [ "chris", "pen", new Date("2021-03-06T16:00:00.000Z"), 4, 5, 20 ], [ "chris", "pencil", new Date("2020-09-02T16:00:00.000Z"), 10, 1.5, 15 ], [ "radow", "chair", new Date("2020-08-09T16:00:00.000Z"), 3, 68, 204 ], [ "peyton", "notebook", new Date("2021-02-08T16:00:00.000Z"), 9, 3.2, 28.8 ], [ "johnson", "desk", new Date("2021-07-03T16:00:00.000Z"), 7, 199, 1393 ], [ "vic", "pen", new Date("2021-06-27T16:00:00.000Z"), 8, 5, 40 ], [ "lan", "pencil", new Date("2020-10-10T16:00:00.000Z"), 2, 1.5, 3 ], [ "chris", "chair", new Date("2021-03-04T16:00:00.000Z"), 2, 68, 136 ], [ "chris", "notebook", new Date("2021-02-21T16:00:00.000Z"), 11, 3.2, 35.2 ], [ "radow", "desk", new Date("2021-06-03T16:00:00.000Z"), 6, 199, 1194 ] ]; var sheet1 = spread.sheets[0]; sheet1.setArray(0, 0, dataSource); var table = sheet1.tables.add("table1", 0, 0, 17, 6); var sheet2 = spread.sheets[1]; sheet2.setArray(0, 0, dataSource); var table2 = sheet2.tables.add("table2", 0, 0, 17, 6); } function initSlicer(sheet) { var slicer_name = sheet.slicers.add("name", "table1", "name", GC.Spread.Sheets.Slicers.SlicerStyles.light1(), GC.Spread.Sheets.Slicers.SlicerType.table); slicer_name.startRow(0); slicer_name.startColumn(7); slicer_name.startColumnOffset(0); } function initChart(sheet) { var chart = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.line, 100, 400, 400, 300, 'C1:D17') }
<!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$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.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> <div class="sample-options"> <div class="options-container"> <h3>Name Box Container</h3> <div id="nameBox"></div> <h3>Name Box Options</h3> <div class="option-row"> <input type="checkbox" id="enableAddCustomName" checked /> <label for="enableAddCustomName">Enable Add Custom Name</label> </div> <div class="option-row"> <input type="checkbox" id="enableNavigateToRange" checked /> <label for="enableNavigateToRange">Enable Navigate to Range</label> </div> <div class="option-row"> <input type="checkbox" id="showCustomNameList" checked /> <label for="showCustomNameList">Show Custom Name List</label> </div> <div class="option-row"> Drop Down Max Height <input type="number" id="dropDownMaxHeight" min="0" step="1" value="500" /> </div> </div> </div> </div> </body> </html>
.sample-options { width: 260px; height: 100%; } .sample-tutorial { position: relative; height: 98vh; overflow: hidden; display: flex; } .sample-container { width: calc(100% - 280px); height: 100%; } .options-container { width: 100%; 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; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #ss { height: 100%; } #nameBox { width: 80%; height: 25px; } label { display: inline-block; } p { font-size: 12px; font-weight: bold; } h3 { white-space: nowrap; } #dropDownMaxHeight { width: 40px; }