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 { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
function _getElementById(id) {
return document.getElementById(id);
}
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
autoGenerateColumns = true;
dataSource: any[];
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.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);
}
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet [autoGenerateColumns]='autoGenerateColumns'></gc-worksheet>
</gc-spread-sheets>
<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" value="demo_clear"/>
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" value="clear"/>
</div>
<div class="option-row">
<input type="button" value="Add Item" id="addItem" class="toolbar-setting" (click)="addItem($event)" />
<input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting" (click)="addSeparator($event)" />
</div>
<span>Toolstrip Item Style:</span>
<div class="option-row">
<input id="font" value="18px Arial"/>
<input type="button" id="setFont" value="Set Font"
title="Set font for toolstrip item with specified name"
(click)="setFont($event)" />
</div>
<div class="option-row">
<input id="color" value="red"/>
<input type="button" id="setForeColor" value="Set Fore Color"
title="Set fore color for toolstrip item with specified name"
(click)="setForeColor($event)" />
</div>
<div class="option-row">
<input type="button" value="Remove Toolstrip Item" id="removeItem" (click)="removeItem($event)"/>
<input type="button" value="Clear All Toolstrip Items" id="clear" (click)="clear($event)"/>
</div>
</div>
</div>
.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;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
