Fixed Position
You can use the fixedPosition method to set whether to show the floating object in a fixed position.
When fixedPosition is true, dynamicMove and dynamicSize are ignored.
When fixedPosition is true, the floating object can be moved or resized.
When fixedPosition is true, the following properties work as before.
position
height
width
startRow
startRowOffset
startColumn
startColumnOffset
endRow
endRowOffset
endColumn
endColumnOffset
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
export function AppFunc() {
const initSpread = (spread) => {
var sheet = spread.getSheet(0);
sheet.setColumnWidth(0, 20);
var content1 = document.createElement("div");
content1.style.backgroundColor = "gray";
content1.style.width = "100%";
content1.style.height = "100%";
content1.innerHTML = "Floating objects at fixed position.";
var customFloatingObject1 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject1", 20, 20, 240, 20);
customFloatingObject1.content(content1);
customFloatingObject1.fixedPosition(true);
sheet.floatingObjects.add(customFloatingObject1);
var content2 = document.createElement("div");
content2.style.backgroundColor = "lightgray";
content2.style.width = "100%";
content2.style.height = "100%";
content2.innerHTML = "Normal floating objects.";
var customFloatingObject2 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject2", 20, 280, 240, 20);
customFloatingObject2.content(content2);
sheet.floatingObjects.add(customFloatingObject2);
}
return <div className="sample-tutorial">
<div className="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<p style={{padding: '2px 10px', backgroundColor: '#F4F8EB'}}>Try resizing column A in the Spread component to see that the fixed floating objects do not move</p>
</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;
export class App extends Component {
constructor(props) {
super(props);
}
render() {
return <div className="sample-tutorial">
<div className="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<p style={{padding: '2px 10px', backgroundColor: '#F4F8EB'}}>Try resizing column A in the Spread component to see that the fixed floating objects do not move</p>
</div>
</div>;
}
initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.setColumnWidth(0, 20);
var content1 = document.createElement("div");
content1.style.backgroundColor = "gray";
content1.style.width = "100%";
content1.style.height = "100%";
content1.innerHTML = "Floating objects at fixed position.";
var customFloatingObject1 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject1", 20, 20, 240, 20);
customFloatingObject1.content(content1);
customFloatingObject1.fixedPosition(true);
sheet.floatingObjects.add(customFloatingObject1);
var content2 = document.createElement("div");
content2.style.backgroundColor = "lightgray";
content2.style.width = "100%";
content2.style.height = "100%";
content2.innerHTML = "Normal floating objects.";
var customFloatingObject2 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject2", 20, 280, 240, 20);
customFloatingObject2.content(content2);
sheet.floatingObjects.add(customFloatingObject2);
}
}
<!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="$DEMOROOT$/spread/source/data/AgingReport.js" type="text/javascript"></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-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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
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/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.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);
