SpreadJS supports touch on the following platforms:
Desktop: Windows--IE 9+, Chrome, Firefox, Opera
Tablet PC: iPad--Chrome, Safari; Android Pad--Chrome; Surface--IE 10+
Mobile: Android--Chrome; Windows Phone: IE 10+
You can use the useTouchLayout option to get and set whether to use touch layout to present the Spread widget. In the touch layout, the control will be easier to touch.
SpreadJS supports many features in touch mode, including scroll, zoom, selection, resize, drag fill, group, cellType, autoFit, filter, edit, tabStrip, and toolStrip.
You can customize the touch selection indicator size using the CSS class sjs-touch-selection-indicator with the width property. The default size is 16px, and the valid range is 8px to 32px. For example:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.options.useTouchLayout = true;
var sd = dataSource;
var sheet = spread.getActiveSheet();
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, 160);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
document.getElementById('useTouchLayout').onclick = function (e) {
spread.options.useTouchLayout = e.target.checked;
};
document.getElementById('indicatorSize').oninput = function (e) {
var size = e.target.value;
document.getElementById('indicatorSizeValue').textContent = size;
updateIndicatorSize(size);
spread.refresh();
};
};
function updateIndicatorSize(size) {
var styleEl = document.getElementById('touch-indicator-style');
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.type = 'text/css';
styleEl.id = 'touch-indicator-style';
document.head.appendChild(styleEl);
}
styleEl.textContent = '.sjs-touch-selection-indicator { width: ' + size + 'px; }';
}
<!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="$DEMOROOT$/spread/source/data/data.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 class="options-container">
<input type="checkbox" id="useTouchLayout" checked="checked">
<label for="useTouchLayout">Enable Touch</label>
<div class="option-row">
<label for="indicatorSize" class="indicator-size-label">Touch Selection Indicator Size: <span id="indicatorSizeValue">16</span>px</label>
<input type="range" id="indicatorSize" min="8" max="32" value="16">
</div>
</div>
<hr>
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sample-spreadsheets {
width: 100%;
flex: 1;
overflow: hidden;
}
hr {
width: 100%;
border: none;
border-top: 1px solid #ccc;
margin: 8px 0;
flex-shrink: 0;
}
.options-container {
width: 100%;
padding: 12px;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-size: 14px;
padding: 5px;
}
#indicatorSize {
width: 200px;
}
.indicator-size-label {
display: inline-block;
width: 220px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type="range"] {
padding: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
