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:

<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>
let data = [
    ['US', 'Cheese', '2019-02-12'],
    ['CA', 'Apples', '2019-03-01'],
    ['CA', 'Carrots', '2018-11-10'],
    ['BR', 'Oranges', '2019-01-12'],
];

let 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: 'YzE4ODg3OWJlOWM3ZWZkMDc0MDljNTBlOTk1MTNjYmQ4MDY2ZjU1MzgxN2Y0MDdkMmI4MGIyYTE1NzQwZjE0ZTc1MjhkODVkZWU1MGQ1NzEyMWE1OWY3ZjA0MTVmMjVjOGQyNDY1NjIyOTVmMTVlZDU1ZTQzMWMzMTIxMmM1OTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16TXhORGc1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});

document.getElementById('commentBtn1').onclick = function() { spreadsheet.setComments('A1', 'Test'); };
document.getElementById('commentBtn2').onclick = function() { alert(spreadsheet.getComments('A1')); };
document.getElementById('commentBtn3').onclick = function() { spreadsheet.setComments('A1', ''); };
</script>

<button type="button" id="commentBtn1">Set A1 comments</button>
<button type="button" id="commentBtn2">Get A1 comments</button>
<button type="button" id="commentBtn3">Reset A1 comments</button>

</html>

Related events

Event	Description
oncomments	When a comment is added or updated. oncomment(DOMElement el, Object cells)

Edit this page on GitHub