Comments on your JavaScript spreadsheet

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.



Manage 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.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/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'), {
    data: data,
    columns: [
        {
            type: 'dropdown',
            url:'/jspreadsheet/countries',
            width:200,
        },
        {
            type: 'text',
            width:200,
        },
        {
            type: 'calendar',
            width:200,
        }
     ],
     comments: {
        B1: 'Initial comments on B1',
        C1: 'Iniatial comments on C1'
     },
     oncomments: function() {
         console.log(arguments);
     },
     allowComments: true,
     license: 'NWJmZTNjZmRkMDgyOWE2ZTViMThiMDdmMjRiMzY3YzQ5YjAxNDdiYjEzNzkzMGY5YWFhMjY0YTliODcwZWQ2YmY4MjMzMTRkMTc1ZGZjMzQ1ZGQ2MjVmYzc4ZWIzODczZGM1NDQ0Yjg1ZmRhOGM5MTJmODcxNjhmNDgzMTNjMzcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNVGMzTmpneE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</script>

<button type="button" onclick="spreadsheet.setComments('A1', 'This is the comments from A1');" style="width:220px;">Set A1 comments</button>
<button type="button" onclick="alert(spreadsheet.getComments('A1'));" style="width:220px;">Get A1 comments</button>
<button type="button" onclick="spreadsheet.setComments('A1', '');" style="width:220px;">Reset A1 comments</button>

</html>

Related events

EventDescription
oncommentsWhen a comment is added or updated. oncomment(DOMElement el, Object cells)