The Focus Cell feature highlights the active cell with a semi-transparent overlay on its entire row and column, making it easier to identify the current position in a large spreadsheet.
You can configure the focusCell through the workbook options:
Enable or Disable
Use the enabled property to toggle the focus cell highlight:
Color
Set the highlight color using theme colors or RGBA values(the opacity from color as high priority):
Opacity
Adjust the transparency of the highlight overlay:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
spread.fromJSON(data[0]);
// Enable focus cell and read options to init component values
spread.options.focusCell.enabled = true;
var focusCell = spread.options.focusCell || {};
if (focusCell.color) {
_getElementById('focusCellColor').value = focusCell.color;
}
var opacity = focusCell.opacity || 0.22;
_getElementById('chk_enabled').checked = true;
_getElementById('focusCellOpacity').value = opacity;
_getElementById('opacityValue').textContent = opacity.toFixed(2);
_getElementById('chk_enabled').addEventListener('click', function () {
var enabled = this.checked;
spread.options.focusCell.enabled = enabled;
_getElementById('focusCellColor').disabled = !enabled;
_getElementById('focusCellOpacity').disabled = !enabled;
_getElementById('setFocusCellColor').disabled = !enabled;
});
_getElementById('setFocusCellColor').addEventListener('click', function () {
spread.options.focusCell.color = _getElementById('focusCellColor').value;
});
_getElementById('focusCellOpacity').addEventListener('input', function () {
var opacity = parseFloat(this.value);
spread.options.focusCell.opacity = opacity;
_getElementById('opacityValue').textContent = opacity.toFixed(2);
});
}
function _getElementById(id) {
return document.getElementById(id);
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="dataset.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<aside class="options-container" aria-label="Focus Cell Settings">
<div class="panel-header">
<h1>Focus Cell Settings</h1>
<p class="panel-description">Change the properties below to see how they affect the focus cell highlight.</p>
</div>
<section class="control-section">
<h2>Availability</h2>
<label class="check-field" for="chk_enabled">
<input type="checkbox" id="chk_enabled"/>
<span>
<strong>Enable Focus Cell</strong>
</span>
</label>
</section>
<section class="control-section">
<h2>Highlight Style</h2>
<div class="field">
<label for="focusCellColor">Color</label>
<div class="field-row">
<input type="text" id="focusCellColor" />
<input type="button" value="Set" id="setFocusCellColor" class="narrow" />
</div>
</div>
<div class="field">
<label for="focusCellOpacity">Opacity</label>
<div class="field-row range-field">
<input type="range" id="focusCellOpacity" min="0" max="1" step="0.01" />
<span id="opacityValue" class="opacity-value"></span>
</div>
</div>
</section>
</aside>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
color: #1f2933;
background: #f7f8fa;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
}
.options-container {
flex: 0 0 320px;
width: 320px;
height: 100%;
padding: 24px 20px;
box-sizing: border-box;
overflow: auto;
background: #fff;
border-left: 1px solid #e5e7eb;
}
.panel-header {
padding-bottom: 20px;
border-bottom: 1px solid #eef0f3;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
font-weight: 650;
line-height: 1.25;
}
.panel-description {
margin: 10px 0 0;
color: #6b7280;
font-size: 13px;
line-height: 1.6;
}
.control-section {
padding: 20px 0;
border-bottom: 1px solid #eef0f3;
}
.control-section:last-child {
border-bottom: 0;
}
.control-section h2 {
margin: 0 0 14px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.field {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.field:last-child {
margin-bottom: 0;
}
.options-container label {
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
.field-row {
display: flex;
align-items: center;
gap: 8px;
}
.field-row input[type="text"] {
flex: 1 1 auto;
min-width: 0;
}
.options-container input[type="text"],
.options-container input[type="button"].narrow {
height: 34px;
box-sizing: border-box;
font: inherit;
border-radius: 6px;
}
.options-container input[type="text"] {
width: 100%;
padding: 0 10px;
color: #111827;
background: #fff;
border: 1px solid #d8dde5;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.options-container input[type="text"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.options-container input[type="button"].narrow {
flex: 0 0 60px;
width: 60px;
color: #fff;
border: 1px solid #2563eb;
background: #2563eb;
cursor: pointer;
}
.options-container input[type="button"].narrow:hover:not(:disabled) {
background: #1d4ed8;
}
.options-container input:disabled {
color: #8d969e;
border-color: #d9dee3;
background: #eef1f4;
cursor: not-allowed;
}
.check-field {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
cursor: pointer;
}
.check-field input {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: #2563eb;
flex: 0 0 auto;
}
.check-field span {
display: grid;
gap: 3px;
}
.check-field strong {
color: #1f2933;
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
.range-field input[type="range"] {
flex: 1 1 auto;
min-width: 0;
margin: 0;
accent-color: #2563eb;
}
.opacity-value {
flex: 0 0 auto;
min-width: 38px;
padding: 4px 7px;
color: #2f4f6f;
text-align: center;
border-radius: 6px;
background: #e9f1fb;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-spreadsheets {
min-height: 55%;
}
.options-container {
flex: 0 0 auto;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
