Zooming
Zoom in using Ctrl+Mouse Wheel Up
Zoom out using Ctrl+Mouse Wheel Down
Resizing column
Resizing a column by dragging the right edge of a column header cell.
The columnResizeMode
can optionally be set to GC.Spread.Sheets.ResizeMode.split
.
Automatically fit a column width by double-clicking the right edge of a column header cell.
The autoFitType
can optionally be set to GC.Spread.Sheets.AutoFitType.cellWithHeader
.
Shortcut key
Command
Shortcut key
Copy
Ctrl+C
Cut
Ctrl+X
Paste
Ctrl+V
Enter Edit
F2
Direct Input
Char
Exit Edit
Esc
Delete
Del
Delete and Enter Edit
BackSpace
Input submit, Move Down
Enter
Input submit, Move Up
Shift + Enter
Next line input
Alt+Enter, Ctrl+Enter
Save all inserted and updated rows
Ctrl + Shift + S
Move up
Up key
Move down
Down key
Move left
Left key
Move right
Right key
Move down
Enter
Move right
Tab
Move left
Shift + Tab
Move to Top/Bottom/Left/Right first
cell Ctrl + Arrow
Move to next page
PageDown
Move to previous page
PageUp
Expand to mouse click selection
Shift + Mouse click
Expand cell selection
Shift + Arrow
Clipboard
Cutting/Copying and then pasting cells, rows or columns can be down using shortcut keys:
Cut: Ctr+X in Windows, Command+X in Mac
Copy: Ctrl+C in Windows, Command+C in Mac
Paste: Ctrl+V in Windows, Command+V in Mac
This can also be down with the context menu:
Right-click on the current selection of cells, rows or columns, the context menu will show, then click copy or cut in the menu.
Right-click on the new selection of another cell range, rows, or columns, the context menu will show, then click paste in the menu.
It is recommended to set allowExtendPasteRange
to true.
Dragging
Drag fill is done by clicking on the bottom right corner of a selected area and moving the mouse down or up.
Drag-drop is done by dragging the selection border of a selected area and dropping it into the destination cell.
Drop copy is done by dragging the selection border f the selected area while holding the Ctrl key and dropping it into the destination cell.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.allowExtendPasteRange = true;
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Supplier";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
myTable.fetch().then(function() {
var view = myTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
<!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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.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 id="optionContainer" class="optionContainer">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
