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.
<template>
<div class="sample-tutorial">
<div class="sample-container">
<gc-spread-sheets id="ss" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div id="statusBar"></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" v-model="enableAddCustomName"
@change="changeProperty($event, 'enableAddCustomName')" />
<label for="enableAddCustomName">Enable Add Custom Name</label>
</div>
<div class="option-row">
<input type="checkbox" id="enableNavigateToRange" v-model="enableNavigateToRange"
@change="changeProperty($event, 'enableNavigateToRange')" />
<label for="enableNavigateToRange">Enable Navigate to Range</label>
</div>
<div class="option-row">
<input type="checkbox" id="showCustomNameList" v-model="showCustomNameList"
@change="changeProperty($event, 'showCustomNameList')" />
<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"
v-model.number="dropDownMaxHeight" @change="changeProperty($event, 'dropDownMaxHeight')" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-slicers";
let spread = null;
let nameBox = null;
const enableAddCustomName = ref(true);
const enableNavigateToRange = ref(true);
const showCustomNameList = ref(true);
const dropDownMaxHeight = ref(500);
const initSpread = (s) => {
spread = s;
const sheet = spread.getActiveSheet();
initTable();
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, "");
nameBox = new GC.Spread.Sheets.NameBox.NameBox(
"nameBox",
spread
);
}
const changeProperty = (event, propertyName) => {
if (propertyName === "dropDownMaxHeight") {
nameBox.options[propertyName] = event.target.value;
} else {
nameBox.options[propertyName] = event.target.checked;
}
}
function initTable() {
const 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
]
];
const sheet1 = spread.sheets[0];
sheet1.setArray(0, 0, dataSource);
const table = sheet1.tables.add("table1", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
const sheet2 = spread.sheets[1];
sheet2.setArray(0, 0, dataSource);
const table2 = sheet2.tables.add("table2", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
sheet1.setColumnWidth(0, 90);
sheet1.setColumnWidth(1, 80);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 70);
sheet2.setColumnWidth(0, 90);
sheet2.setColumnWidth(1, 80);
sheet2.setColumnWidth(2, 130);
sheet2.setColumnWidth(3, 70);
}
function initSlicer(sheet) {
const 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) {
const chart = sheet.charts.add(
"chart1",
GC.Spread.Sheets.Charts.ChartType.line,
100,
400,
400,
300,
"C1:D17"
);
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
