You can change the position and size of the floating object. The position and size can be set in two different ways:
Sometimes you will resize the row's height or the column's width, and you don't want the position or size of the floating object to change. In that case, use the dynamicMove and dynamicSize methods. For example:
Note that if the dynamicMove method is false and the dynamicSize method is true, neither has an effect.
If you do not want the floating object to change based on UI interaction, use the isLocked method to lock it. If you want to lock it, first lock the sheet.
When one floating object overlaps another, you can change the order from top to bottom using the zIndex method. 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';
@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'
};
constructor() {
}
initSpread($event: any) {
let spread = $event.spread;
let spreadNS = GC.Spread.Sheets;
this.spread = spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
let div = document.createElement('div');
div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>"
div.style.background = 'mintcream';
div.style.border = '1px solid green';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
}
changeSheetProtected(e: any) {
let sheet = this.spread.getActiveSheet();
sheet.options.isProtected = e.target.checked;
}
changeLocked(e: any) {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
if (floatingObjects) {
let value = e.target.checked;
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].isLocked(value);
}
}
}
}
changeVisible(e: any) {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
if (floatingObjects) {
let value = e.target.checked;
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].isVisible(value);
}
}
}
}
onDynamicSize(e: any) {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
if (floatingObjects) {
let value = e.target.checked;
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].dynamicSize(value);
}
}
}
}
onDynamicMove(e: any) {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
if (floatingObjects) {
let value = e.target.checked;
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index].dynamicMove(value);
}
}
}
}
onMove() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let row = parseInt(document.getElementById('moveRow').value);
let col = parseInt(document.getElementById('moveColumn').value);
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
}
onResize() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let width = parseFloat(document.getElementById('resizeWidth').value);
let height = parseFloat(document.getElementById('resizeHeight').value);
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
}
onBringToForward() {
let sheet = this.spread.getActiveSheet();
let floatingObjects = _concat(sheet);
let maxZIndex = 0, selectedCount = 0, selectedName = null;
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
let zIndex = sheet.floatingObjects.zIndex(fo.name());
if (zIndex > maxZIndex) {
maxZIndex = zIndex;
}
if (fo.isSelected()) {
selectedCount++;
selectedName = fo.name();
}
}
if (selectedCount === 1) {
sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1);
}
}
}
}
function _concat(sheet) {
if (sheet) {
let customFloatingObjects = sheet.floatingObjects.all();
let pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
@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-spread-sheets>
<div class="options-container">
<div class="option-row">
<p class="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div class="option-row">
<input type="checkbox" id="isSheetProtected" (change)="changeSheetProtected($event)"/>
<label for="isSheetProtected">IsSheetProtected</label>
</div>
<div class="option-row">
<input type="checkbox" id="isLocked" checked (change)="changeLocked($event)"/>
<label for="isLocked">IsLocked</label>
</div>
<div class="option-row">
<input type="checkbox" id="isVisible" checked (change)="changeVisible($event)"/>
<label for="isVisible">IsVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicSize" checked (change)="onDynamicSize($event)"/>
<label for="dynamicSize">DynamicSize</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicMove" checked (change)="onDynamicMove($event)"/>
<label for="dynamicMove">DynamicMove</label>
<hr>
</div>
<div class="option-row">
<label for="moveRow">Row:</label>
<input type="text" id="moveRow" />
<label for="moveColumn">Column:</label>
<input type="text" id="moveColumn" />
<input type="button" id="moveFloatingObject" value="Move floating Object" (click)="onMove()"/>
</div>
<hr>
<div class="option-row">
<label for="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" />
<label for="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" />
<input type="button" id="resizeFloatingObject" value="Resize floating object" (click)="onResize()"/>
</div>
<hr>
<div class="option-row">
<input type="button" id="bringToForward" value="Bring Forward" (click)="onBringToForward()"/>
</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;
padding: 5px;
}
input, select {
padding: 4px 6px;
width: 100%;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
label {
display: inline-block;
min-width: 70px;
margin: 6px 0;
}
hr {
border-color: #fff;
opacity: .2;
margin: 12px 0;
}
input[type=button] {
margin-top: 6px;
}
.desc{
padding:2px 10px;
background-color:#F4F8EB;
}
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);
