Overview

SpreadJS supports touch capabilities. This opens up the possibility of having your application on mobile and touch-enabled devices, providing multiple ways through which users can access your content.

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.
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; }; };
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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 id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <input type="checkbox" id="useTouchLayout" checked="checked"> <label for="useTouchLayout">Enable Touch</label> </div> </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; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { margin-bottom: 6px; } input { padding: 4px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }