SpreadJS now has button capabilities within cells. These predefined buttons will allow you to add more functionality to the workbooks. With the command option, developers can code specific behavior for those buttons that are executed when the user clicks on them.
For example:
// @ts-ignore
import { Component, NgModule, enableProdMode } from '@angular/core';
// @ts-ignore
import { BrowserModule } from '@angular/platform-browser';
// @ts-ignore
import { FormsModule } from '@angular/forms';
// @ts-ignore
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// @ts-ignore
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
// @ts-ignore
import GC from '@mescius/spread-sheets';
import './styles.css';
const spreadNS = GC.Spread.Sheets;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initSpread($event: any) {
const spread = $event.spread;
const sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.getRange(2, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(5, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(8, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(11, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(14, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(0, 4, 15, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
sheet.getRange(0, 9, 15, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
for(var i=0;i<10;i++)
{
sheet.setColumnWidth(i,100);
}
for(var i=0;i<30;i++)
{
sheet.setRowHeight(i,25);
i++;
sheet.setRowHeight(i,25);
i++;
}
sheet.getCell(0,0).value("Basic Button Styling (useButtonStyle)").font("bold 16px Calibri");
sheet.getCell(3,0).value("Button Colors (buttonBackColor)").font("bold 16px Calibri");
sheet.getCell(6, 0).value("Command Buttons (command)").font("bold 16px Calibri");
sheet.getCell(9, 0).value("Hoverable Buttons (hoverBackColor)").font("bold 16px Calibri");
sheet.getCell(12, 0).value("Button Position (position)").font("bold 16px Calibri");
sheet.getCell(0, 5).value("Button Size (width)").font("bold 16px Calibri");
sheet.getCell(3, 5).value("Image Captions (imageType & imageSrc & imagesize)").font("bold 16px Calibri");
sheet.getCell(6, 5).value("Button Visibility (visibility) - Select cell G8 to see the other button").font("bold 16px Calibri");
sheet.getCell(9, 5).value("Disabled Buttons (enabled)").font("bold 16px Calibri");
sheet.getCell(12, 5).value("Text Align (CaptionAlignment)").font("bold 16px Calibri");
sheet.addSpan(7,7,1,2);
sheet.addSpan(7,2,1,2);
sheet.addSpan(4,7,1,2);
sheet.getCell(4, 7).value("Search").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 7).value("Select cell..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 2).value("Click the button here ->").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 1).value("ZOOM!").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
var style = new GC.Spread.Sheets.Style();
//basic styling
style.cellButtons = [
{
caption: "Default"
}
];
sheet.setStyle(1, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Basic Style",
useButtonStyle: true
}
];
sheet.setStyle(1, 1, style);
//button colors
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Red-Color",
buttonBackColor: "#F44336"
}
];
sheet.setStyle(4, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Green-Color",
buttonBackColor: "#82BC00",
}
];
sheet.setStyle(4, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Color",
buttonBackColor: "#DDDDDD"
}
];
sheet.setStyle(4, 2, style);
//Command buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker"
}
];
sheet.setStyle(7, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"Zoom",
buttonBackColor: "#DDDDDD",
command: (sheet, row, col, option) => {
if (sheet.zoom() === 1) {
sheet.zoom(1.25);
} else {
sheet.zoom(1);
}
}
}
];
sheet.setStyle(7, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"Alert",
buttonBackColor: "#00C2D6",
command: (sheet, row, col, option) => {
alert("This is an alert.");
}
}
];
sheet.setStyle(7, 2, style);
//hover buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Blue-Color",
useButtonStyle: true,
buttonBackColor: "#008CBA",
hoverBackColor: "#FFFFFF"
}
];
sheet.setStyle(10, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Color",
buttonBackColor: "#DDDDDD",
hoverBackColor: "#FFFFFF"
}
];
sheet.setStyle(10, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Blue-Hover",
useButtonStyle: true,
hoverBackColor: "#008CBA"
}
];
sheet.setStyle(10, 2, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Hover",
hoverBackColor: "#DDDDDD",
}
];
sheet.setStyle(10, 3, style);
//Position buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Left",
buttonBackColor: "#F7A711",
position: GC.Spread.Sheets.ButtonPosition.left
}
];
sheet.setStyle(13, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Right",
buttonBackColor: "#F7A711",
position: GC.Spread.Sheets.ButtonPosition.right
}
];
sheet.setStyle(13, 1, style);
//button size
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"40px",
width: 40,
buttonBackColor: "#EEEEEE",
useButtonStyle: true
}
];
sheet.setStyle(1, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"50px",
width: 50,
buttonBackColor: "#EEEEEE",
useButtonStyle: true
}
];
sheet.setStyle(1, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"85px",
width: 85,
buttonBackColor: "#008CBA",
useButtonStyle: true
}
];
sheet.setStyle(1, 7, style);
//Image buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Arrow",
buttonBackColor: "#DDDDDD",
imageType: GC.Spread.Sheets.ButtonImageType.right
}
];
sheet.setStyle(4, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Custom",
buttonBackColor:"#F4F8EB",
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC"
}
];
sheet.setStyle(4, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
buttonBackColor: "#82BC00",
width:50,
imageSize: {
height: 30,
width: 30
},
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(4, 7, style);
//Visibility buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Always",
buttonBackColor:"#ffdc9d"
}
];
sheet.setStyle(7, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "On Select",
buttonBackColor:"#ffdc9d",
visibility: GC.Spread.Sheets.ButtonVisibility.onSelected
}
];
sheet.setStyle(7, 7, style);
//disabled buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Enable",
useButtonStyle: true,
enabled: true
}
];
sheet.setStyle(10, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Enable",
enabled: true
}
];
sheet.setStyle(10, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Disable",
useButtonStyle: true,
enabled: false
}
];
sheet.setStyle(10, 7, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Disable",
enabled: false
}
];
sheet.setStyle(10, 8, style);
//Caption Aligment (captionaligment)
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
useButtonStyle: true,
caption: "Left",
captionAlign: GC.Spread.Sheets.CaptionAlignment.left,
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(13, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
useButtonStyle: true,
caption: "Right",
captionAlign: GC.Spread.Sheets.CaptionAlignment.right,
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(13, 6, style);
sheet.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
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></gc-worksheet>
</gc-spread-sheets>
</div>
.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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.sample-options{
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
display: inline-block;
min-width: 100px;
}
input, select {
width: 100%;
padding: 4px 0;
margin-top: 4px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
padding: 0;
}
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);
