The following keys provide actions for working with the comments:
Esc: If you are in the editing state in a comment, press Esc and the comment will enter the active state. If you press Esc again, the comment will be deselected.
Delete: If you select a comment and the state is active, press Delete and the selected comment will be deleted.
Up: If you select a comment and the state is active, press the Up arrow to move the comment up.
Down: If you select a comment and the state is active, press the Down arrow to move the comment down.
Left: If you select a comment and the state is active, press the Left arrow to move the comment to the left.
Right: If you select a comment and the state is active, press the Right arrow to move the comment to the right.
You can also interact with the comment using mouse actions. When you select a comment, a position indicator and eight resize indicators are displayed. You can drag the resize indicator to resize the comment. Also you can drag the comment and drop it in another position.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, "you can drag to resize the comment");
var comment = sheet.comments.add(1, 1, "new comment!");
comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);
};
<!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/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" style="width:100%; height:100%;border: 1px solid gray;"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
