Spreadsheet Comments

Adding comments into the spreadsheet cells is part of the JSS native methods. This section covers the related methods and events to interact with the spreadsheet comments.

Documentation

Methods

The following methods can be used to get or set comments in one or multiple cells.
MethodDescription
getComments Get comments from a cell or from the whole table.
spreadsheet.getComments(cellName: String | null)
@Param mixed - cell identification or null for the whole table.
setComments Set a single cell comments by name, or set multiple cells.
spreadsheet.setComments(cellName: Mixed | Array, comments: String=)
@param {string|Object} - Identication of an cell or an array of objects with multiple comments
@param {string=} comments - string with the comments if mixed is a string.


Events

The onbeforecomments can be used to intercept, change or cancel the result of any comments applied by the user.
EventDescription
onbeforecommentsonbeforecomments(worksheet: Object, newValue: Array) : Array | null | false
The method should return an Array with overwritten values, false to cancel the action or null to continue with user action.
oncommentsoncomments(worksheet: Object, newValue: Array, oldValue: Array) : void


Initial Settings

The following properties are available through the initialization of the online spreadsheet.
PropertyDescription
allowComments: booleanEnable the user to enter new comments on cells.
comments: arrayArray with the initial comments.



Examples

The following example shows how to start the spreadsheet with a few initial comments and allow users to edit or insert new comments using the context menu.




Interact with the cell comments programmatically

To apply comments via javascript, you can use the methods setComments or getComments, as follow:




Source code

<html>
<script src="https://jspreadsheet.net/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.net/v8/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [
    ['US', 'Cheese', '2019-02-12'],
    ['CA', 'Apples', '2019-03-01'],
    ['CA', 'Carrots', '2018-11-10'],
    ['BR', 'Oranges', '2019-01-12'],
];

var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        {
            data: data,
            columns: [{
                width: '300px',
            }],
            allowComments: true,
            comments: {
                B1:'Initial comments on B1',
                C1:'Iniatial comments on C1'
            },
        }
    ],
    oncomments: function() {
        console.log(arguments);
    }
});
</script>

<button type="button" onclick="spreadsheet.worksheets[0].setComments('A1', 'Test');">
Set A1 comments
</button>

<button type="button" onclick="alert(spreadsheet.worksheets[0].getComments('A1'));">
Get A1 comments
</button>

<button type="button" onclick="spreadsheet.worksheets[0].setComments('A1', '');">
Reset A1 comments
</button>

</html>