You can set the color of all the worksheets by setting the backColor option of the workbook to a color name ("red"), hex value ("#FFFF00"), rgb value (rgb(255,0,0)), or style ("Accent 5"). You can also set the color of the inactive area below the rows and to the right of the columns using the grayAreaBackColor option.
Alternatively, you can set a background image for the worksheets using the backgroundImage option of the workbook. Note that setting a background image overrides any set background color and it has to be removed for the background color to take effect.
You can choose one of four background image layouts to change how the image is displayed in the background of the sheet by setting the backgroundImageLayout option of the workbook. The four options are:
stretch: the background image fills the area, even if the size of the area changes.
center: the background image displays in the center of the area.
zoom: the background image displays in the area while keeping its original aspect ratio.
none: the background image displays in the upper left corner of the area in its original size.
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 { useState } from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
export function AppFunc() {
const [spread, setSpread] = useState(null);
//const [grayAreaBackColor, setGrayAreaBackColor] = useState(null);
//const [backColor, setBackColor] = useState(null);
const [pictureUrl, setPictureUrl] = useState(null);
const initSpread = (spread) => {
setSpread(spread);
spread.suspendPaint();
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getSheet(0);
sheet.setRowCount(15);
sheet.setColumnCount(20);
spread.options.backColor = 'white';
spread.options.grayAreaBackColor = 'gray';
spread.options.backgroundImageLayout = spreadNS.ImageLayout.stretch;
spread.options.backgroundImage = '$DEMOROOT$/spread/source/images/backImage.png';
spread.resumePaint();
}
const changeGrayAreaBackColor = (e) => {
let selectElement = e.target;
spread.options.grayAreaBackColor = selectElement.options[selectElement.selectedIndex].value;
}
const changeSpreadBackColor = (e) => {
let selectElement = e.target;
spread.options.backColor = selectElement.options[selectElement.selectedIndex].value;
}
const selectImage = (e) => {
if (typeof e.target.files[0] !== 'object') {
return;
}
let file = e.target.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
setPictureUrl(this.result);
};
}
const changeLayout = (e) => {
let layout = parseInt(e.target.value);
spread.options.backgroundImageLayout = layout;
}
const setSpreadBackgroundImage = (e) => {
spread.options.backgroundImage = pictureUrl;
}
const deleteSpreadBackgroundImage = (e) => {
spread.options.backgroundImage = '';
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<label>Set Background Image:</label>
<input type="file" name="image" id="file_input" onChange={e => selectImage(e)} />
</div>
<br />
<div className="option-row">
<label>Workbook Background Image Layout:</label>
<select id="layout" onChange={e => changeLayout(e)}>
<option value={0} selected="selected">Stretch</option>
<option value={1}>Center</option>
<option value={2}>Zoom</option>
<option value={3}>None</option>
</select>
</div>
<div className="option-row">
<input type="button" id="setSpreadBackgroundImage" defaultValue="Set" className="narrow-button" onClick={e => setSpreadBackgroundImage(e)} />
<input type="button" id="delSpreadBackgroundImage" defaultValue="Delete Background Image" onClick={e => deleteSpreadBackgroundImage(e)} />
</div>
<hr />
<div class="option-row">
<label>Select a color to set as the color of the workbook gray area.</label>
<select id="grayAreaBackColor" onChange={e => changeGrayAreaBackColor(e)}>
<option value={"gray"}>Gray</option>
<option value={"rgb(220, 236, 244)"}>Light Blue</option>
<option value={"#F4F8EB"}>Light Green</option>
<option value={"white"}>White</option>
</select>
</div>
<div class="option-row">
<label>Select a color to set as the workbook background color.</label>
<select id="spreadBackColor" onChange={e => changeSpreadBackColor(e)}>
<option value={"white"}>White</option>
<option value={"#F4F8EB"}>Light Green</option>
<option value={"rgb(220, 236, 244)"}>Light Blue</option>
<option value={"gray"}>Gray</option>
</select>
</div>
<label class="note"><u>Note</u>: remove background image to see this change.</label>
</div>
</div>;
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.grayAreaBackColor = null;
this.backColor = null;
this.pictureUrl = null;
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<label>Set Background Image:</label>
<input type="file" name="image" id="file_input" onChange={e => this.selectImage(e)} />
</div>
<br />
<div className="option-row">
<label>Workbook Background Image Layout:</label>
<select id="layout" onChange={e => this.changeLayout(e)}>
<option value={0} selected="selected">Stretch</option>
<option value={1}>Center</option>
<option value={2}>Zoom</option>
<option value={3}>None</option>
</select>
</div>
<div className="option-row">
<input type="button" id="setSpreadBackgroundImage" defaultValue="Set" className="narrow-button" onClick={e => this.setSpreadBackgroundImage(e)} />
<input type="button" id="delSpreadBackgroundImage" defaultValue="Delete Background Image" onClick={e => this.deleteSpreadBackgroundImage(e)} />
</div>
<hr />
<div class="option-row">
<label>Select a color to set as the color of the workbook gray area.</label>
<select id="grayAreaBackColor" onChange={e => this.changeGrayAreaBackColor(e)}>
<option value={"gray"}>Gray</option>
<option value={"rgb(220, 236, 244)"}>Light Blue</option>
<option value={"#F4F8EB"}>Light Green</option>
<option value={"white"}>White</option>
</select>
</div>
<div class="option-row">
<label>Select a color to set as the workbook background color.</label>
<select id="spreadBackColor" onChange={e => this.changeSpreadBackColor(e)}>
<option value={"white"}>White</option>
<option value={"#F4F8EB"}>Light Green</option>
<option value={"rgb(220, 236, 244)"}>Light Blue</option>
<option value={"gray"}>Gray</option>
</select>
</div>
<label class="note"><u>Note</u>: remove background image to see this change.</label>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getSheet(0);
sheet.setRowCount(15);
sheet.setColumnCount(20);
spread.options.backColor = 'white';
spread.options.grayAreaBackColor = 'gray';
spread.options.backgroundImageLayout = spreadNS.ImageLayout.stretch;
spread.options.backgroundImage = '$DEMOROOT$/spread/source/images/backImage.png';
spread.resumePaint();
}
changeGrayAreaBackColor(e) {
let spread = this.spread;
let selectElement = e.target;
spread.options.grayAreaBackColor = selectElement.options[selectElement.selectedIndex].value;
}
changeSpreadBackColor(e) {
let spread = this.spread;
let selectElement = e.target;
spread.options.backColor = selectElement.options[selectElement.selectedIndex].value;
}
selectImage(e) {
if (typeof e.target.files[0] !== 'object') {
return;
}
let file = e.target.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
let self = this;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
self.pictureUrl = this.result;
};
}
changeLayout(e) {
let spread = this.spread;
let layout = parseInt(e.target.value);
spread.options.backgroundImageLayout = layout;
}
setSpreadBackgroundImage(e) {
let spread = this.spread;
spread.options.backgroundImage = this.pictureUrl;
}
deleteSpreadBackgroundImage(e) {
let spread = this.spread;
spread.options.backgroundImage = '';
}
}
<!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="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>
input[type="button"] {
width: 180px;
}
input[type="text"] {
padding: 4px;
margin-top: 4px;
width: 100%;
box-sizing: border-box;
}
label {
display: inline-block;
margin-bottom: 6px;
}
.note{
margin-top: 0px;
}
.colorLabel {
background-color: #F4F8EB;
}
.wide-label {
width: 260px;
}
input.narrow-button, .narrow-label {
width: 74px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row:nth-child(1){
padding-bottom: 0px;
}
.option-row:nth-child(2){
margin-top: 0px;
padding-top: 0px;
}
.option-row:nth-child(3){
padding-bottom: 0px;
}
.option-row:nth-child(4){
margin-top: 0px;
padding-top: 0px;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
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);
