Overview

SpreadJS supports built-in context menus, the context menu can be opened by right-clicking on the SpreadJS instance. The contents of this menu depend on which area of the workbook is clicked.

The context menu provides the following abilities: Theme is the same as the current spread theme. Change the filter context menu data result. Modify the menu view's appearance and structure. You can use the spread.options.allowContextMenu option to control whether to show the built-in context menu or not.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular'; import GC from '@grapecity/spread-sheets'; import './styles.css'; const spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea; @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' }; currentTheme: string; themeOptions = [ { label: 'SpreadJS', list: [{ value: "gc.spread.sheets.css", text: "SpreadJS" }] }, { label: 'Excel2013', list: [ { value: "gc.spread.sheets.excel2013white.css", text: "White" }, { value: "gc.spread.sheets.excel2013lightGray.css", text: "Light Gray" }, { value: "gc.spread.sheets.excel2013darkGray.css", text: "Dark Gray" } ] }, { label: 'Excel2016', list: [ { value: "gc.spread.sheets.excel2016colorful.css", text: "Colorful" }, { value: "gc.spread.sheets.excel2016darkGray.css", text: "Dark Gray" }, { value: "gc.spread.sheets.excel2016black.css", text: "Black" } ] } ] constructor() { this.currentTheme = "gc.spread.sheets.excel2013white.css"; } initSpread($event: any) { let spread = this.spread = $event.spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"]; let data = [ ["bob", "NewYork", "1968/6/8", "man", "80", "180"], ["Betty", "NewYork", "1972/7/3", "woman", "72", "168"], ["Cherry", "Washington", "1986/2/2", "woman", "58", "161"], ["Gary", "NewYork", "1964/3/2", "man", "71", "179"], ["Hunk", "Washington", "1972/8/8", "man", "80", "171"], ["Eva", "Washington", "1993/2/15", "woman", "71", "180"] ]; sheet.tables.addFromDataSource("table1", 1, 1, data); sheet.getRange(-1, 1, -1, 6).width(80); let table = sheet.tables.findByName("table1"); table.setColumnName(0, dataColumns[0]); table.setColumnName(1, dataColumns[1]); table.setColumnName(2, dataColumns[2]); table.setColumnName(3, dataColumns[3]); table.setColumnName(4, dataColumns[4]); table.setColumnName(5, dataColumns[5]); let i, j, cell; for (i = 9; i < 13; i++) { for (j = 3; j < 7; j++) { cell = sheet.getCell(i, j); cell.text(i * j + ""); } } sheet.setFormula(9, 7, "=SUM(D10:G10)"); cell = sheet.getCell(9, 8); cell.text("0.234"); cell.formatter(new GC.Spread.Formatter.GeneralFormatter("0.00%")); sheet.resumePaint(); } allowContextMenu($event) { let spread = this.spread, allowContextMenu = $event.target.checked; spread.options.allowContextMenu = allowContextMenu; } setTheme($event) { let themeCss = $event.target.value, spread = this.spread; let target = document.querySelector('link[href*="gc.spread.sheets"]'); let href = target.attributes["href"].value, pos = href.indexOf("gc.spread.sheets"), item = href.substr(0, pos) + themeCss; let head = document.getElementsByTagName('head')[0]; head.removeChild(target) if (item) { this.addThemeLink(item); } else { spread.refresh(); } } addThemeLink(href) { let link = document.createElement('link'), spread = this.spread; link.type = "text/css"; link.rel = "stylesheet"; link.href = href; link.onload = function () { spread.refresh(); } let header = document.getElementsByTagName('head')[0]; header.appendChild(link); } } @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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/dist/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.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 class="options-container"> <div class="option-row"> <p>Right click any cell to bring up its context menu. This menu is fully customizable.</p> </div> <div class="option-row"> <input type = "checkbox" id="allowContextMenu" checked (change)="allowContextMenu($event)"/> <label for="allowContextMenu">Show Context Menu</label> </div> <div class="option-row"> <label for="currentThemes">Select Theme:</label> <select id="currentThemes" (change)="setTheme($event)"> <optgroup *ngFor="let group of themeOptions" [label]="group.label"> <option *ngFor="let item of group.list" [selected]="item.text=='White'" [value]="item.value">{{item.text }}</option> </optgroup> </select> </div> </div> </div>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; margin-top: 10px; } input { display: inline-block; } input[type="text"] { width: 200px; } label { margin-bottom: 6px; } p{ padding:2px 10px; background-color:lavender; } 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/dist/zone.min.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.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', '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-angular': 'npm:@grapecity/spread-sheets-angular/index.js', '@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' }, } }); })(this);