If you want to use range select mode, you just need to create a formulaTextBox that has this option {rangeSelectMode: true}. For example:
You can use the workbook method of FormulaTextBox to attach this formulaTextBox to a spread. For example:
If fbx1.workbook() doesn't have arguments, range select does not work.
You can use the text method of FormulaTextBox to get the text of the formula text box.
You can use the destroy method to remove the formula text box elements.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="top-options">
<p>Click the icon of the rangeSelector, then select a range, then Click the 'Get Value' button.This can be useful for providing users the ability to select ranges for their formulas rather than manually typing them.</p>
<div id="formulaBar" spellcheck="false"
style="border: 1px solid #808080;width:100%;"></div>
</div>
<div class="options-row" style="margin-top: 10px">
<input type="button" id="getValue" value="Get Value" style=" font-size: 14px; height: 30px" @click="getSelectedRangeFormula($event)" />
<label>
Range Text: <span id="rangeText"
style="border: 0px; outline: none; font-size: 14px;padding: 0px"></span>
</label>
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import {ref} from 'vue';
const ftbRef = ref(null);
function initSpread (spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var cfs = sheet.conditionalFormats;
var Range = GC.Spread.Sheets.Range;
var row = 0, col = 1;
sheet.getCell(row, ++col).value("Icon Set").font("700 11pt Calibri");
sheet.addSpan(row, col, 1, 10);
sheet.addSpan(row + 6, col, 1, 10);
row++;
for (var column = col; column < col + 10; column++) {
sheet.getCell(row, column).value(-50);
sheet.getCell(row + 1, column).value(-25);
sheet.getCell(row + 2, column).value(0);
sheet.getCell(row + 3, column).value(25);
sheet.getCell(row + 4, column).value(50);
sheet.getCell(row + 6, column).value(-50);
sheet.getCell(row + 7, column).value(-25);
sheet.getCell(row + 8, column).value(0);
sheet.getCell(row + 9, column).value(25);
sheet.getCell(row + 10, column).value(50);
}
var rowCount = 5;
cfs.addIconSetRule(0, [new Range(row, col, rowCount, 1)]);
cfs.addIconSetRule(1, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(2, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(3, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(4, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(5, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(6, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(7, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(8, [new Range(row, ++col, rowCount, 1)]);
cfs.addIconSetRule(9, [new Range(row, ++col, rowCount, 1)]);
col = 1;
cfs.addIconSetRule(10, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(11, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(12, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(13, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(14, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(15, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(16, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(17, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(18, [new Range(row + 6, ++col, rowCount, 1)]);
cfs.addIconSetRule(19, [new Range(row + 6, ++col, rowCount, 1)]);
sheet.resumePaint();
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('formulaBar'), {rangeSelectMode: true});
fbx.workbook(spread);
ftbRef.value = fbx;
}
function getSelectedRangeFormula(e) {
document.getElementById('rangeText').textContent = ftbRef.value.text();
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input, select {
width: 100%;
padding: 4px, 8px;
margin: 8px 0;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html lang="en" 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: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'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",
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
