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