JavaScript Data Grid Cell Comments
Overview
This guide explains how to manage and add comments to javascript data grid cells in Jspreadsheet, similar to the features found in Excel or Google Sheets. You can add comments programmatically or through the context menu, enabling annotations and additional information for specific cell contents.
Documentation
Methods
The following methods allow you to get or set comments on one or multiple data grid cells.
Method | Description |
---|---|
getComments |
Retrieve comments from a specific cell or the entire data grid. @param cell - Cell name. If null or undefined, returns comments for all cells.worksheetInstance.getComments(cell?: string): Record<string, string> | string; |
setComments |
Add, update, or remove a comment. @param cellId - Cell name.@param comments - New comment. If null, removes the comment from the cell.worksheetInstance.setComments(cellId: string, comments: string): void; Handle multiple cells: @param cellId - Object where keys are cell names and values are cell comments. Null values remove the comments.worksheetInstance.setComments(cellId: Record<string, string>): void; |
Events
The onbeforecomments
event allows you to intercept, modify, or cancel the action of adding a new comment.
Event | Description |
---|---|
oncomments |
Triggered when a comment is modified. @param instance - The worksheet instance where the change occurred.@param newComments - Object containing updated comments.@param oldComments - Object containing previous comments.oncomments(instance: WorksheetInstance, newComments: Record<string, string | null>, oldComments: Record<string, string | null>): void; |
Initial Settings
These properties can be configured during the initialization of the spreadsheet.
Property | Description |
---|---|
allowComments: boolean |
Enable or disable the ability for users to add new comments to cells. |
comments: object |
Object containing the initial comments. Example: { A1: 'test', B1: 'another test' } . |
Examples
Data Grid with Comments
Initialize a Jspreadsheet data grid with predefined comments and interact with them programmatically using setComments
and getComments
.
A | B | C | |
1 | US | Cheese | 2019-02-12 |
2 | CA | Apples | 2019-03-01 |
3 | CA | Carrots | 2018-11-10 |
4 | BR | Oranges | 2019-01-12 |
<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<p>
<input type="button" id="bt1" value="Set A1 comments"/>
<input type="button" id="bt2" value="Get A1 comments"/>
<input type="button" id="bt3" value="Reset A1 comments"/>
</p>
<script>
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{
data: [
['US', 'Cheese', '2019-02-12'],
['CA', 'Apples', '2019-03-01'],
['CA', 'Carrots', '2018-11-10'],
['BR', 'Oranges', '2019-01-12'],
],
columns: [
{ width: '300px' },
{ width: '200px' },
{ width: '200px' },
],
allowComments: true,
comments: {
B1: 'Initial comments on B1',
C1: 'Initial comments on C1'
},
}
],
oncomments: function () {
console.log(arguments);
}
});
document.getElementById('bt1').onclick = function () {
worksheets[0].setComments('A1', 'Test');
}
document.getElementById('bt2').onclick = function () {
alert(worksheets[0].getComments('A1'));
}
document.getElementById('bt3').onclick = function () {
worksheets[0].setComments('A1', '');
}
</script>
</html>
Batch Update for Multiple Cells
The setComments
method supports adding comments to multiple cells simultaneously by passing an object, optimizing performance and avoiding unnecessary history entries.
// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [10,10],
allowComments: true,
}],
});
worksheets[0].setComments({
A1: 'Comment on A1',
B1: 'Comments on B1'
});