Angular Spreadsheet Cell Comments
The Kendo UI for Angular Spreadsheet allows you to display a comment for each cell. Cell comments are annotations that provide additional context or notes about the data without modifying the cell value.
When a comment is added, the cell is marked with a red triangle in the top-right corner and hovering over the cell displays the comment in a tooltip. When you export the Spreadsheet to Excel, cell comments are preserved as native Excel cell comments.
The following example shows a Q1 Budget Spreadsheet with comments set on cells C3 and C6 during initialization. Use the toggle button to add or remove a comment on cell C4 at runtime.
Defining Cell Comments
To define a comment for a cell upon the initialization of the Spreadsheet, pass the desired content to the comment property of a Cell object in the sheets configuration.
public sheets: SheetDescriptor[] = [{
name: 'Invoice',
rows: [{
cells: [
{ value: 216321, comment: 'Last updated by the warehouse team on 2025-01-15.' },
]
}]
}];Managing Cell Comments Dynamically
You can add, update, or remove comments at runtime by accessing the active sheet through the SpreadsheetWidget instance of the SpreadsheetComponent and calling the comment() method of the Range object.
The comment() method supports the following usage patterns:
- Passing a string value to set or update a comment.
- Passing
nullto remove an existing comment. - Calling the method with no arguments to read the current value—it returns the comment text, or
nullwhen no comment is present.
@ViewChild('spreadsheet') public spreadsheetRef!: SpreadsheetComponent;
public toggleComment(): void {
const sheet = this.spreadsheetRef.spreadsheetWidget.activeSheet();
const range = sheet.range('A2');
const current = range.comment();
if (current === null) {
range.comment('Comment added to cell A2');
} else {
range.comment(null);
}
}