Before you add the comment, you can set the text for the comment using the text method. The position and size of the comment can also be changed. For example:
Sometimes you might need to resize the row's height or the column's width, and you don't want the position or size of the comment to change. To do this, use the dynamicMove and dynamicSize methods. For example:
Note that if the comment's dynamicMove method is false and dynamicSize method is true, neither has an effect.
After you edit the comment's text, you can format the content, such as font, textDecoration, and so on. For example:
You can add a border to the comment. The border is set as the DOM's border setting. For example:
When one comment object overlaps another, you can change the order from top to bottom by zIndex.
If you do not want the comment to change based on UI interaction, use the locked method to lock it. If you want to lock it, first lock the sheet. If you don't want the text to be changed, use the lockText method to lock the text.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, "there is a comment on the upper right corner of the cell");
sheet.comments.add(1, 1, "new comment!");
var activeComment = null;
spread.bind(spreadNS.Events.SelectionChanged, function (e, info) {
var sheetTmp = info.sheet;
var row = sheetTmp.getActiveRowIndex();
var col = sheetTmp.getActiveColumnIndex();
var comment = sheetTmp.comments.get(row, col);
if (comment) {
_getElementById("commentTip").innerHTML = "Comment in Cell [ " + row + " : " + col + " ]";
activeComment = comment;
} else {
_getElementById("commentTip").innerHTML = "No Comment Set";
activeComment = null;
}
updateLabels(sheet, activeComment);
});
_getElementById("setProperty").addEventListener('click', function () {
if (activeComment) {
//1.
if (_getElementById("txtText").value) {
activeComment.text(_getElementById("txtText").value);
}
if (_getElementById("txtLocation").value) {
var pos = _getElementById("txtLocation").value.split(",");
activeComment.location(new spreadNS.Point(parseInt(pos[0]), parseInt(pos[1])));
}
if (_getElementById("txtWidth").value) {
activeComment.width(parseInt(_getElementById("txtWidth").value));
}
if (_getElementById("txtHeight").value) {
activeComment.height(parseInt(_getElementById("txtHeight").value));
}
//2.
if (_getElementById("txtFontFamily").value) {
activeComment.fontFamily(_getElementById("txtFontFamily").value);
}
if (_getElementById("txtFontSize").value) {
activeComment.fontSize(_getElementById("txtFontSize").value + "pt");
}
if (_getElementById("txtFontWeight").value) {
activeComment.fontWeight(_getElementById("txtFontWeight").value);
}
//3.
if (_getElementById("txtBorderWidth").value) {
activeComment.borderWidth(parseInt(_getElementById("txtBorderWidth").value));
}
if (_getElementById("txtBorderColor").value) {
activeComment.borderColor(_getElementById("txtBorderColor").value);
}
if (_getElementById("txtPadding").value) {
var para = _getElementById("txtPadding").value.split(",");
if (para.length === 1) {
activeComment.padding(new spreadNS.Comments.Padding(para[0]));
}
else {
activeComment.padding(new spreadNS.Comments.Padding(para[0], para[1], para[2], para[3]));
}
}
//4.
if (_getElementById("txtForeColor").value) {
activeComment.foreColor(_getElementById("txtForeColor").value);
}
if (_getElementById("txtBackColor").value) {
activeComment.backColor(_getElementById("txtBackColor").value);
}
if (_getElementById("txtOpacity").value) {
activeComment.opacity(parseFloat(_getElementById("txtOpacity").value) / 100);
}
if (_getElementById("txtzIndex").value) {
activeComment.zIndex(parseInt(_getElementById("txtzIndex").value));
}
}
})
_getElementById("chkLocked").addEventListener('change', function () {
if (activeComment) {
activeComment.locked(this.checked);
}
})
_getElementById("chkLockText").addEventListener('change', function () {
if (activeComment) {
activeComment.lockText(this.checked);
}
})
_getElementById("chkDynamicMove").addEventListener('change', function () {
if (activeComment) {
activeComment.dynamicMove(this.checked);
}
})
_getElementById("chkDynamicSize").addEventListener('change', function () {
if (activeComment) {
activeComment.dynamicSize(this.checked);
}
})
_getElementById("chkShowShadow").addEventListener('change', function () {
if (activeComment) {
activeComment.showShadow(this.checked);
}
})
_getElementById("comboBoxFontStyle").addEventListener('change', function () {
if (activeComment) {
activeComment.fontStyle(this.value);
}
})
_getElementById("comboBoxBorderStyle").addEventListener('change', function () {
if (activeComment) {
activeComment.borderStyle(this.value);
}
})
_getElementById("comboBoxTextDecoration").addEventListener('change', function () {
if (activeComment) {
var textDecoration = this.value;
switch (textDecoration.toLowerCase()) {
case "underline":
activeComment.textDecoration(spreadNS.TextDecorationType.underline);
break;
case "linethrough":
activeComment.textDecoration(spreadNS.TextDecorationType.lineThrough);
break;
case "overline":
activeComment.textDecoration(spreadNS.TextDecorationType.overline);
break;
case "none":
activeComment.textDecoration(spreadNS.TextDecorationType.none);
break;
}
}
})
_getElementById("comboBoxHorizontal").addEventListener('change', function () {
if (activeComment) {
var horizontal = this.value;
switch (horizontal) {
case "left":
activeComment.horizontalAlign(spreadNS.HorizontalAlign.left);
break;
case "center":
activeComment.horizontalAlign(spreadNS.HorizontalAlign.center);
break;
case "right":
activeComment.horizontalAlign(spreadNS.HorizontalAlign.right);
break;
case "general":
activeComment.horizontalAlign(spreadNS.HorizontalAlign.left);
break;
}
}
})
_getElementById("comboBoxDisplayMode").addEventListener('change', function () {
var displayMode = this.value;
if (activeComment) {
activeComment.displayMode(spreadNS.Comments.DisplayMode[displayMode]);
}
})
_getElementById("comboBoxCommentState").addEventListener('change', function () {
var commentState = this.value;
if (activeComment) {
activeComment.commentState(spreadNS.Comments.CommentState[commentState]);
}
})
_getElementById("chkSheetProtect").addEventListener('change', function () {
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();
sheet.options.isProtected = this.checked;
});
_getElementById("chkSheetProtectAllow").addEventListener('change', function () {
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();
sheet.options.protectionOptions = {allowEditObjects: this.checked}
});
};
function updateLabels(sheet, activeComment) {
_getElementById("chkSheetProtect").checked = sheet.options.isProtected;
_getElementById("chkSheetProtectAllow").checked = sheet.options.protectionOptions.allowEditObjects;
var spreadNS = GC.Spread.Sheets;
if (activeComment) {
_getElementById("comboBoxCommentState").value = Object.keys(spreadNS.Comments.CommentState)[activeComment.commentState() + 1];
_getElementById("comboBoxDisplayMode").value = Object.keys(spreadNS.Comments.DisplayMode)[activeComment.displayMode() + 1];
_getElementById("comboBoxHorizontal").value = _getElementById("comboBoxHorizontal").options[activeComment.horizontalAlign()].value;
var textDecorationType = ["underline", "linethrough", "overline", "none"];
_getElementById("comboBoxTextDecoration").value = textDecorationType[activeComment.textDecoration()];
_getElementById("comboBoxBorderStyle").value = activeComment.borderStyle();
_getElementById("comboBoxFontStyle").value = activeComment.fontStyle();
_getElementById("chkShowShadow").checked = activeComment.showShadow();
_getElementById("chkDynamicSize").checked = activeComment.dynamicSize();
_getElementById("chkDynamicMove").checked = activeComment.dynamicMove();
_getElementById("chkLockText").checked = activeComment.lockText();
_getElementById("chkLocked").checked = activeComment.locked();
_getElementById("txtzIndex").value = activeComment.zIndex();
_getElementById("txtOpacity").value = activeComment.opacity() * 100;
_getElementById("txtBackColor").value = activeComment.backColor();
_getElementById("txtForeColor").value = activeComment.foreColor();
var padding = activeComment.padding();
if (padding) {
_getElementById("txtPadding").value = padding.top + "," + padding.right + "," + padding.bottom + "," + padding.left;
} else {
_getElementById("txtPadding").value = "";;
}
_getElementById("txtBorderColor").value = activeComment.borderColor();
_getElementById("txtBorderWidth").value = activeComment.borderWidth();
_getElementById("txtFontWeight").value = activeComment.fontWeight();
_getElementById("txtFontSize").value = parseInt(activeComment.fontSize(), 10);
_getElementById("txtFontFamily").value = activeComment.fontFamily();
_getElementById("txtHeight").value = activeComment.height();
_getElementById("txtWidth").value = activeComment.width();
var pos = activeComment.location();
if (pos) {
_getElementById("txtLocation").value = pos.x + "," + pos.y;
} else {
_getElementById("txtLocation").value = "";;
}
_getElementById("txtText").value = activeComment.text();
} else {
_getElementById("comboBoxCommentState").value = 'active';
_getElementById("comboBoxDisplayMode").value = 'hoverShown';
_getElementById("comboBoxHorizontal").value = 'left';
_getElementById("comboBoxTextDecoration").value = "underline";
_getElementById("comboBoxBorderStyle").value = "";
_getElementById("comboBoxFontStyle").value = "";
_getElementById("chkShowShadow").checked = false;
_getElementById("chkDynamicSize").checked = false;
_getElementById("chkDynamicMove").checked = false;
_getElementById("chkLockText").checked = false;
_getElementById("chkLocked").checked = false;
_getElementById("txtzIndex").value = "";
_getElementById("txtOpacity").value = "";
_getElementById("txtBackColor").value = "";
_getElementById("txtForeColor").value = "";
_getElementById("txtPadding").value = "";
_getElementById("txtBorderColor").value = "";
_getElementById("txtBorderWidth").value = "";
_getElementById("txtFontWeight").value = "";
_getElementById("txtFontSize").value = "";
_getElementById("txtFontFamily").value = "";
_getElementById("txtHeight").value = "";
_getElementById("txtWidth").value = "";
_getElementById("txtLocation").value = "";
_getElementById("txtText").value = "";
}
}
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="$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">
<div class="option-row">
<h4>Select a cell with comment:
<span id="commentTip"></span>
</h4>
</div>
<div class="option-row">
<div class="option">
<label>Text</label>
<input id="txtText" />
</div>
<div class="option">
<label>Location</label>
<input id="txtLocation" />
</div>
<div class="option">
<label>Width</label>
<input id="txtWidth" />
</div>
</div>
<div class="option-row">
<div class="option">
<label>Height</label>
<input id="txtHeight" />
</div>
<div class="option">
<label>FontFamily</label>
<input id="txtFontFamily" />
</div>
<div class="option">
<label>FontStyle</label>
<select id="comboBoxFontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
<option value="inherit">inherit</option>
</select>
</div>
</div>
<div class="option-row">
<div class="option">
<label>FontSize</label>
<input id="txtFontSize" />
</div>
<div class="option">
<label>FontWeight</label>
<input id="txtFontWeight" />
</div>
<div class="option">
<label>BorderWidth</label>
<input id="txtBorderWidth" />
</div>
</div>
<div class="option-row">
<div class="option">
<label>BorderStyle</label>
<select id="comboBoxBorderStyle">
<option value="none">none</option>
<option value="hidden">hidden</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="solid">solid</option>
<option value="double">double</option>
<option value="groove">groove</option>
<option value="ridge">ridge</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
</select>
</div>
<div class="option">
<label>BorderColor</label>
<input id="txtBorderColor" />
</div>
<div class="option">
<label>Padding</label>
<input id="txtPadding" />
</div>
</div>
<div class="option-row">
<div class="option">
<label>TextDecoration</label>
<select id="comboBoxTextDecoration">
<option value="none">none</option>
<option value="underline">underline</option>
<option value="overline">overline</option>
<option value="linethrough">linethrough</option>
</select>
</div>
<div class="option">
<label>Opacity, %</label>
<input id="txtOpacity" />
</div>
</div>
<div class="option-row">
<div class="option">
<label>ForeColor</label>
<input id="txtForeColor" />
</div>
<div class="option">
<label>BackColor</label>
<input id="txtBackColor" />
</div>
<div class="option">
<label>zIndex</label>
<input id="txtzIndex" />
</div>
</div>
<div class="option-row">
<div class="option">
<label>Horizontal</label>
<select id="comboBoxHorizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
<option value="general">general</option>
</select>
</div>
<div class="option">
<label>CommentState</label>
<select id="comboBoxCommentState">
<option value="active">active</option>
<option value="edit">edit</option>
<option value="normal">normal</option>
</select>
</div>
</div>
<div class="option-row">
<label>DisplayMode</label>
<select id="comboBoxDisplayMode" style="width:auto;">
<option value="hoverShown">hoverShown</option>
<option value="alwaysShown">alwaysShown</option>
</select>
</div>
<div class="option-row">
<div class="checkbox">
<input id="chkLocked" type="checkbox" checked />
<label for="chkLocked">Locked</label>
</div>
<div class="checkbox">
<input id="chkLockText" type="checkbox" checked />
<label for="chkLockText">LockText</label>
</div>
<div class="checkbox">
<input id="chkSheetProtect" type="checkbox" />
<label for="chkSheetProtect" style="width:auto">Sheet IsProtected</label>
</div>
<div class="checkbox">
<input id="chkSheetProtectAllow" type="checkbox" />
<label for="chkSheetProtectAllow" style="width:auto; display: inline">Allow EditObjects When Sheet IsProtected</label>
</div>
</div>
<div class="option-row">
<div class="checkbox">
<input id="chkDynamicMove" type="checkbox" checked />
<label for="chkDynamicMove">DynamicMove</label>
</div>
<div class="checkbox">
<input id="chkDynamicSize" type="checkbox" checked />
<label for="chkDynamicSize">DynamicSize</label>
</div>
<div class="checkbox">
<input id="chkShowShadow" type="checkbox" />
<label for="chkShowShadow">ShowShadow</label>
</div>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update Properties" />
</div>
</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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.sample-options{
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
display: inline-block;
min-width: 100px;
}
input, select {
width: 100%;
padding: 4px 0;
margin-top: 4px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
padding: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
