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 as follow:
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 = [
[
"salesman",
"product",
"date",
"amount",
"price",
"sales"
],
[
"Colleen Lee",
"desk",
new Date("2020-10-08T16:00:00.000Z"),
5,
199,
995
],
[
"Joe Mercer",
"pen",
new Date("2020-09-15T16:00:00.000Z"),
2,
5,
10
],
[
"Alicia Schmidt",
"pencil",
new Date("2021-06-22T16:00:00.000Z"),
6,
1.5,
9
],
[
"John Walsh",
"chair",
new Date("2021-07-19T16:00:00.000Z"),
7,
68,
476
],
[
"David Hale",
"notebook",
new Date("2021-01-13T16:00:00.000Z"),
7,
3.2,
22.4
],
[
"Gordon Jones",
"desk",
new Date("2021-03-12T16:00:00.000Z"),
9,
199,
1791
],
[
"Colleen Lee",
"pen",
new Date("2021-03-06T16:00:00.000Z"),
4,
5,
20
],
[
"Colleen Lee",
"pencil",
new Date("2020-09-02T16:00:00.000Z"),
10,
1.5,
15
],
[
"Joe Mercer",
"chair",
new Date("2020-08-09T16:00:00.000Z"),
3,
68,
204
],
[
"Alicia Schmidt",
"notebook",
new Date("2021-02-08T16:00:00.000Z"),
9,
3.2,
28.8
],
[
"John Walsh",
"desk",
new Date("2021-07-03T16:00:00.000Z"),
7,
199,
1393
],
[
"David Hale",
"pen",
new Date("2021-06-27T16:00:00.000Z"),
8,
5,
40
],
[
"Gordon Jones",
"pencil",
new Date("2020-10-10T16:00:00.000Z"),
2,
1.5,
3
],
[
"Colleen Lee",
"chair",
new Date("2021-03-04T16:00:00.000Z"),
2,
68,
136
],
[
"Colleen Lee",
"notebook",
new Date("2021-02-21T16:00:00.000Z"),
11,
3.2,
35.2
],
[
"Joe Mercer",
"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, GC.Spread.Sheets.Tables.TableThemes.light9);
var sheet2 = spread.sheets[1];
sheet2.setArray(0, 0, dataSource);
var table2 = sheet2.tables.add("table2", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
//setColumnWidth: sheet1
sheet1.setColumnWidth(0, 90);
sheet1.setColumnWidth(1, 80);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 70);
//setColumWidth: sheet2
sheet2.setColumnWidth(0, 90);
sheet2.setColumnWidth(1, 80);
sheet2.setColumnWidth(2, 130);
sheet2.setColumnWidth(3, 70);
}
function initSlicer(sheet) {
var slicer_name = sheet.slicers.add("salesman", "table1", "Salesman", GC.Spread.Sheets.Slicers.SlicerStyles.light3(), 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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><br />
<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"><br />
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;
}
