You can use the built-in tool strip items: Paste, Cut, Copy, and AutoFill.
You can also customize a touch tool strip item and add it to the touch tool strip.
You can use the text method to get and set the text of the item, use the font method to get and set the font of the item text, and use the foreColor method to get and set the color of the item text.
After you add the touch tool strip item, you can use getItem and getItems to get the items. Also, you can remove one or clear all the items.
You can customize the tool strip using the provided APIs. For example:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
export function AppFunc() {
let spread = null;
let autoGenerateColumns = true;
const initSpread = (currSpread) => {
spread = currSpread;
};
const _getElementById = (id) => {
return document.getElementById(id);
};
const addItem = () => {
let name = _getElementById('name').value;
if (!name) {
alert("Please input a name for toolbar item.")
}
let text = _getElementById('text').value;
let image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8' +
'YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABMklEQVRIS7XSMUpDQRDG8YCt' +
'FxDsbb1H4lW8wnt38BA2VmIfC0mhhYVVIJXybC0U0gibbx47w+zm290nPIsfbDY7/4GQRQjhX9HLOdHL' +
'OdHLOdFL5ut243UQMnI3fu/nkg81OhxDeVyNS/xc8qFGBmOAhb3OzyWRGhnMQkV+LonU/Dxt1yzG+Dk7' +
'bJ5fSrrtbrfGm7B/e6fBnDZFa0EHQXwMA55NWyI9VVtgcTVxSa9NUVpwFFeNJT1YU7AFxbgqLBnjrQXN' +
'uNIl+Hc9+nhtwVkeaYn/riSYswMGVnmg4ReufYyxAx5P/nngG64giTF2wOP7ONwywCXITBJj7IDHn8CC' +
'3iucwxgXPsbYAY97YFH1AKdgceFjjB3iQGnJDZxAEhc+xtDL3MXyLvyVzh7F5hUWB34T0LLVazuTAAAA' +
'AElFTkSuQmCC';
let item = new GC.Spread.Sheets.Touch.TouchToolStripItem(name, text, image, function () {
spread.touchToolStrip.close();
alert("Runing clearing...");
});
spread.touchToolStrip.add(item);
};
const removeItem = () => {
let name = _getElementById('name').value;
if (!name) {
alert("Please input the name which item to be removed.");
}
spread.touchToolStrip.remove(name);
};
const clear = () => {
spread.touchToolStrip.clear();
};
const addSeparator = () => {
spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());
};
const setFont = () => {
let font = _getElementById('font').value;
if (!font) {
alert("Please input a font for item text.");
}
let name = _getElementById('name').value;
let item = spread.touchToolStrip.getItem(name);
if (item) {
item.font(font);
}
};
const setForeColor = () => {
let foreColor = _getElementById('color').value;
if (!foreColor) {
alert("Please input a color for item text.");
}
let name = _getElementById('name').value;
let item = spread.touchToolStrip.getItem(name);
if (item) {
item.foreColor(foreColor);
}
};
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet autoGenerateColumns={autoGenerateColumns} />
</SpreadSheets>
</div>
<Panel
addItem={addItem}
removeItem={removeItem}
clear={clear}
addSeparator={addSeparator}
setFont={setFont}
setForeColor={setForeColor}
/>
</div>
);
}
function Panel(props) {
return(
<div class="options-container">
<div class="option-row">
<span>Select a cell using a touch enabled device.Select that cell again to view the customizable touch toolstrip.</span>
</div>
<div class="option-row">
<span>Customize Toolstrip</span>
</div>
<div class="option-row">
<span>Add new menu item:</span>
</div>
<div class="option-row">
<label for="name">Name:</label>
<input id="name" defaultValue="demo_clear"/>
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" defaultValue="clear"/>
</div>
<div class="option-row">
<input type="button" value="Add Item" id="addItem" class="toolbar-setting" onClick={props.addItem}/>
<input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting" onClick={props.addSeparator}/>
</div>
<span>Toolstrip Item Style:</span>
<div class="option-row">
<input id="font" defaultValue="18px Arial"/>
<input type="button" id="setFont" value="Set Font"
title="Set font for toolstrip item with specified name"
onClick={props.setFont}/>
</div>
<div class="option-row">
<input id="color" defaultValue="red"/>
<input type="button" id="setForeColor" value="Set Fore Color"
title="Set fore color for toolstrip item with specified name"
onClick={props.setForeColor}/>
</div>
<div class="option-row">
<input type="button" value="Remove Toolstrip Item" id="removeItem" onClick={props.removeItem}/>
<input type="button" value="Clear All Toolstrip Items" id="clear" onClick={props.clear}/>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const Component = React.Component;
const GCsheets = GC.Spread.Sheets;
function _getElementById(id) {
return document.getElementById(id);
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.autoGenerateColumns = true;
this.addItem = this.addItem.bind(this);
this.removeItem = this.removeItem.bind(this);
this.clear = this.clear.bind(this);
this.addSeparator = this.addSeparator.bind(this);
this.setFont = this.setFont.bind(this);
this.setForeColor = this.setForeColor.bind(this);
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
<Worksheet autoGenerateColumns={this.autoGenerateColumns} />
</SpreadSheets>
</div>
<Panel
addItem={(e)=>{this.addItem(e)}}
removeItem={(e)=>{this.removeItem(e)}}
clear={(e)=>{this.clear(e)}}
addSeparator={(e)=>{this.addSeparator(e)}}
setFont={(e)=>{this.setFont(e)}}
setForeColor={(e)=>{this.setForeColor(e)}}
/>
</div>
);
}
initSpread(spread) {
this.spread = spread;
}
addItem(e) {
let name = _getElementById('name').value;
if (!name) {
alert("Please input a name for toolbar item.")
}
let text = _getElementById('text').value;
let image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8' +
'YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABMklEQVRIS7XSMUpDQRDG8YCt' +
'FxDsbb1H4lW8wnt38BA2VmIfC0mhhYVVIJXybC0U0gibbx47w+zm290nPIsfbDY7/4GQRQjhX9HLOdHL' +
'OdHLOdFL5ut243UQMnI3fu/nkg81OhxDeVyNS/xc8qFGBmOAhb3OzyWRGhnMQkV+LonU/Dxt1yzG+Dk7' +
'bJ5fSrrtbrfGm7B/e6fBnDZFa0EHQXwMA55NWyI9VVtgcTVxSa9NUVpwFFeNJT1YU7AFxbgqLBnjrQXN' +
'uNIl+Hc9+nhtwVkeaYn/riSYswMGVnmg4ReufYyxAx5P/nngG64giTF2wOP7ONwywCXITBJj7IDHn8CC' +
'3iucwxgXPsbYAY97YFH1AKdgceFjjB3iQGnJDZxAEhc+xtDL3MXyLvyVzh7F5hUWB34T0LLVazuTAAAA' +
'AElFTkSuQmCC';
let item = new GC.Spread.Sheets.Touch.TouchToolStripItem(name, text, image, function () {
this.spread.touchToolStrip.close();
alert("Runing clearing...");
});
this.spread.touchToolStrip.add(item);
}
removeItem(e) {
let name = _getElementById('name').value;
if (!name) {
alert("Please input the name which item to be removed.");
}
this.spread.touchToolStrip.remove(name);
}
clear(e) {
this.spread.touchToolStrip.clear();
}
addSeparator(e) {
this.spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());
}
setFont(e) {
let font = _getElementById('font').value;
if (!font) {
alert("Please input a font for item text.");
}
let name = _getElementById('name').value;
let item = this.spread.touchToolStrip.getItem(name);
if (item) {
item.font(font);
}
}
setForeColor(e) {
let foreColor = _getElementById('color').value;
if (!foreColor) {
alert("Please input a color for item text.");
}
let name = _getElementById('name').value;
let item = this.spread.touchToolStrip.getItem(name);
if (item) {
item.foreColor(foreColor);
}
}
}
class Panel extends Component{
constructor(props){
super(props);
}
render(){
return(
<div class="options-container">
<div class="option-row">
<span>Select a cell using a touch enabled device.Select that cell again to view the customizable touch toolstrip.</span>
</div>
<div class="option-row">
<span>Customize Toolstrip</span>
</div>
<div class="option-row">
<span>Add new menu item:</span>
</div>
<div class="option-row">
<label for="name">Name:</label>
<input id="name" defaultValue="demo_clear"/>
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" defaultValue="clear"/>
</div>
<div class="option-row">
<input type="button" value="Add Item" id="addItem" class="toolbar-setting" onClick={e=>{this.props.addItem(e)}}/>
<input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting" onClick={e=>{this.props.addSeparator(e)}}/>
</div>
<span>Toolstrip Item Style:</span>
<div class="option-row">
<input id="font" defaultValue="18px Arial"/>
<input type="button" id="setFont" value="Set Font"
title="Set font for toolstrip item with specified name"
onClick={e=>{this.props.setFont(e)}}/>
</div>
<div class="option-row">
<input id="color" defaultValue="red"/>
<input type="button" id="setForeColor" value="Set Fore Color"
title="Set fore color for toolstrip item with specified name"
onClick={e=>{this.props.setForeColor(e)}}/>
</div>
<div class="option-row">
<input type="button" value="Remove Toolstrip Item" id="removeItem" onClick={e=>{this.props.removeItem(e)}}/>
<input type="button" value="Clear All Toolstrip Items" id="clear" onClick={e=>{this.props.clear(e)}}/>
</div>
</div>
)
}
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
label {
display: inline-block;
min-width: 80px;
}
input,
select {
padding: 4px 8px;
margin-top: 6px;
width: 100%;
box-sizing: border-box;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
