Before you add the comment, you can set the indicator size for the comment using the indicatorSize method or set the indicator color for the comment using the indicatorColor method. For example:
You can also get size & color of comment indicator
You should set size & color in the legal range:
If you want to set indicator color, you should set a string type data.
If this string cannot be identified as a color (like 'black' '#000' 'rgba(255, 255, 0, 0.5)' can be identified), the comments indicator will be set to the default color black.
If you want to set indicator size, you should set a number type data and make sure the data > 1.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook($("ss"));
var sheet = spread.getActiveSheet();
initData();
$('setColor').addEventListener('click', function () {
var color = $('color').value;
var comments = sheet.comments.get(1, 1);
if (!comments) {
initData();
}
sheet.comments.get(1, 1).indicatorColor(color);
$('color').value = sheet.comments.get(1, 1).indicatorColor();
});
$('setSize').addEventListener('click', function () {
var size = $('size').value;
var comments = sheet.comments.get(1, 1);
if (!comments) {
initData();
}
sheet.comments.get(1, 1).indicatorSize(Number(size));
$('size').value = sheet.comments.get(1, 1).indicatorSize();
});
function initData() {
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!");
$('color').value = sheet.comments.get(1, 1).indicatorColor();
$('size').value = sheet.comments.get(1, 1).indicatorSize();
}
};
function $(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 style="float: right;">
<!-- change indicator options -->
<div class="group">
<div>
<div ></div>
<div>
<div>
<label for="color">Color</label>
<input id="color" class="form-control">
<input type="button" id="setColor" value="Set Comment Indicator Color" class="option-row">
</div>
</div>
<div class="col-sm-12" style="height: 30px;"></div>
<div class="col-sm-12">
<div class="input-group">
<label for="size">Size</label>
<input id="size" class="form-control">
<input type="button" id="setSize" value="Set Comment Indicator Size" class="option-row">
</div>
</div>
<div class="col-sm-12" style="height: 30px;"></div>
</div>
</div>
</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;
}
