|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Comment in EJ2 TypeScript Spreadsheet control | Syncfusion |
| 4 | +description: Learn here all about Comment feature in Syncfusion EJ2 TypeScript Spreadsheet control of Syncfusion Essential JS 2 and more. |
| 5 | +platform: document-processing |
| 6 | +control: Comment |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Comment in EJ2 TypeScript Spreadsheet control |
| 11 | + |
| 12 | +The **Comment** feature allows you to add remarks and **replies** to cells, making it easier to provide feedback or enabling contextual discussions without altering cell values. Comment are distinct from **Notes** and includes advanced capabilities such as replies, resolve/reopen, and an optional **Comments Review Pane** to maintain clear communication and streamline review workflows. When a cell contains a comment, a small comment indicator appears in its corner. Hover over the indicator to preview the comment. |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +## Author identity |
| 17 | + |
| 18 | +The Syncfusion Spreadsheet does not automatically track user identity. To tag new comments and replies with an author name, set the `author` property when initializing the Spreadsheet. |
| 19 | + |
| 20 | +```ts |
| 21 | + |
| 22 | + import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; |
| 23 | + // Initialize Spreadsheet component |
| 24 | + const spreadsheet: Spreadsheet = new Spreadsheet( |
| 25 | + // Assign the author property |
| 26 | + author: 'Place the Author Name Here' |
| 27 | + ); |
| 28 | + // Render initialized Spreadsheet |
| 29 | + spreadsheet.appendTo('#element'); |
| 30 | + |
| 31 | +``` |
| 32 | +If the author property is not set, comments and replies will display Guest User as the author by default. |
| 33 | + |
| 34 | +The host application is responsible for setting the current user's display name for each session. |
| 35 | + |
| 36 | +## Adding a comment |
| 37 | + |
| 38 | +You can add a **comment** to a cell in the following ways: |
| 39 | +* **Context menu**: Right-click the target cell and click **"New Comment"**. |
| 40 | +* **Ribbon**: Use **Review > Comment > New Comment**. |
| 41 | +* **Keyboard shortcut**: Press **Ctrl + Shift + F2** to open the comment container. |
| 42 | +* **Programmatically**: Use the `updateCell` method to assign a comment to a specific cell. |
| 43 | + |
| 44 | +**Example for using `updateCell` method with comment:** |
| 45 | + |
| 46 | +```ts |
| 47 | + |
| 48 | + // Create a comment in the desired cell |
| 49 | + spreadsheet.updateCell({ |
| 50 | + comment: { |
| 51 | + author: 'Chistoper', text: 'Are you completed the report', |
| 52 | + createdTime: 'January 03, 2026 at 5:00 PM', |
| 53 | + isResolved: false, |
| 54 | + replies: [{ author: 'John', text: 'Yes, completed', |
| 55 | + createdTime: 'January 03, 2026 at 7:00 PM' }] |
| 56 | + } |
| 57 | + }, 'Sheet1!D5'); |
| 58 | + |
| 59 | +``` |
| 60 | + |
| 61 | + |
| 62 | +After posting, the comment becomes visible with the comment indicator in the cell and can be previewed on hover. |
| 63 | + |
| 64 | +## Adding a reply |
| 65 | + |
| 66 | +You can add one or more replies to an existing comment to provide additional details or answers: |
| 67 | + |
| 68 | +* **Hover over the comment indicator** on the cell to open the comment container, type your reply in the input box, and click **Post**. |
| 69 | +* **Context menu**: Right-click the cell, select **Comment > New Reply**, enter your reply, and click **Post**. |
| 70 | +* **Ribbon**: Use **Review > Comment > New Comment** on a cell that already has a comment. This triggers **reply mode**. |
| 71 | +* **Keyboard shortcut**: Press **Ctrl + Shift + F2** on a cell that contains a comment to open the comment container in reply mode. |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +After posting, the replies appear under the initial comment in the container. |
| 76 | + |
| 77 | +## Editing a comment or reply |
| 78 | + |
| 79 | +You can edit the content of a comment or its replies directly within the container |
| 80 | + |
| 81 | +* **Initial comment**: Hover over the cell indicator to open the comment container. Click the **⋯ (More thread actions)** menu in the header, select **Edit Comment**, modify the text, and click **Post**. |
| 82 | +* **Reply**: Hover over the specific reply, click the **⋯ (More actions)**, select **Edit Comment**, update the text, and click **Post**. |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | +## Deleting a reply |
| 87 | + |
| 88 | +You can remove a specific reply from a comment: |
| 89 | + |
| 90 | +* Hover over the reply inside the comment container, click **⋯ (More actions)** and select **Delete Comment**. |
| 91 | + |
| 92 | + |
| 93 | + |
| 94 | +## Resolve and Reopen |
| 95 | + |
| 96 | +The **Resolve** option marks a comment as completed when the discussion or issue is addressed. When a thread is resolved, its background color changes to indicate the resolved state, and the reply input box and reply menu actions are hidden. Use **Reopen** to restore the comment if further discussion is needed. |
| 97 | + |
| 98 | +### Resolve a comment |
| 99 | +* Hover over the cell indicator to open the comment container and click **⋯ (More thread actions)** menu in the container header and select **Resolve Thread**. |
| 100 | + |
| 101 | +### Reopen a comment |
| 102 | +* Hover over the cell indicator to open the comment container and click **Reopen** button in the header to make the thread active again. |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | +You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically. |
| 107 | + |
| 108 | +## Deleting a comment |
| 109 | + |
| 110 | +You can delete an entire comment thread |
| 111 | +(including all replies) using any of the following methods: |
| 112 | + |
| 113 | +* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. |
| 114 | +* **Ribbon**: Use **Review > Comment > Delete Comment** on a cell that contains the comment. |
| 115 | +* **Comment container**: Hover over the cell indicator to open the comment container, click **⋯ (More thread actions)** menu in the container header and select **Delete Thread** for active comment or use the **Delete Thread** button in container header for the resolved comment. |
| 116 | + |
| 117 | + |
| 118 | + |
| 119 | +Deleting a thread removes the comment and all its replies from the cell. |
| 120 | + |
| 121 | +## Next and Previous Comment |
| 122 | + |
| 123 | +The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments: |
| 124 | + |
| 125 | +* **Next Comment**: Moves to the next cell with a comment. |
| 126 | +* **Previous Comment**: Moves to the previous cell with a comment. |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +Navigation starts within the active sheet. When all comments in the active sheet have been visited (end or start reached), the navigation automatically continues to the next or previous sheet that contains comments. This ensures you can review all comments across the workbook without manually switching sheets. |
| 131 | + |
| 132 | +## Show Comments and Comments Review Pane |
| 133 | + |
| 134 | +The **Comments Review Pane** provides a centralized view of all comments in the active sheet and offers filtering, inline actions, and navigation. This pane helps you manage comments efficiently without switching between individual cells. |
| 135 | + |
| 136 | +You can show or hide the Comments Review Pane using: |
| 137 | + |
| 138 | +* **Ribbon**: Use **Review > Comment > Show Comments**. |
| 139 | +* **Property**: Set the [`showCommentsPane`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#showCommentsPane) property when initializing the Spreadsheet. |
| 140 | + |
| 141 | +> The default value for the `showCommentsPane` property is `false`. |
| 142 | +
|
| 143 | + |
| 144 | + |
| 145 | +### Features of the Comments Review Pane |
| 146 | + |
| 147 | +The Comments Review Pane allows you to: |
| 148 | + |
| 149 | +* **Add new comment** using the **New** button. |
| 150 | +* **Filter comments** by **All**, **Active**, or **Resolved** to focus on specific comments. |
| 151 | +* **Navigate between comments** and synchronize selection with the corresponding cells. |
| 152 | +* Perform actions such as: |
| 153 | + * **Reply** – Add replies directly from the pane. |
| 154 | + * **Edit** – Modify the text of a comment or reply. |
| 155 | + * **Delete** – Remove a reply or an entire thread. |
| 156 | + * **Resolve/Reopen** – Change the status of a comment. |
| 157 | + |
| 158 | +When the Review Pane is open, all actions performed in the pane or in the cell’s comment container are synchronized: |
| 159 | + |
| 160 | +* Selecting a comment in the Review Pane highlights the corresponding cell in the sheet. |
| 161 | +* Selecting a cell with a comment focuses the related comment in the Comment Review Pane. |
| 162 | +* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane comment container and the cell comment container instantly, ensuring consistency across the UI. |
| 163 | + |
| 164 | +## Saving a Workbook with Comments |
| 165 | + |
| 166 | +You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**. |
| 167 | +- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments). |
| 168 | + |
| 169 | +> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**. |
| 170 | +
|
| 171 | +### Why Comments Are Not Saved in `.xls` |
| 172 | +The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**. |
| 173 | +Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`. |
| 174 | + |
| 175 | +>To retain threaded comments, always save the workbook in **.xlsx** format. |
| 176 | +
|
| 177 | +## Integrating comments during initial loading using cell data binding |
| 178 | + |
| 179 | +You can bind **comments** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include: |
| 180 | +- **Initial comment fields**: `author`, `text`, `createdTime`, `isResolved` |
| 181 | +- **Replies**: A **flat array** of `{ author, text, createdTime }` objects (no nested replies-of-replies) |
| 182 | + |
| 183 | +When the workbook renders, cells that include a `comment`: |
| 184 | +- Show the **comment indicator** in the cell corner. |
| 185 | +- Open the **comment container** on hover. |
| 186 | +- Appear in the **Comments Review Pane** if it is shown. |
| 187 | + |
| 188 | + |
| 189 | +In the below example, comments are added to specific cells via cell data binding. The review pane is shown initially, and comments are added using `updateCell` method in the `created` event. |
| 190 | + |
| 191 | +{% tabs %} |
| 192 | +{% highlight ts tabtitle="index.ts" %} |
| 193 | +{% include code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.ts %} |
| 194 | +{% endhighlight %} |
| 195 | +{% highlight html tabtitle="index.html" %} |
| 196 | +{% include code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.html %} |
| 197 | +{% endhighlight %} |
| 198 | +{% endtabs %} |
| 199 | + |
| 200 | +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1" %} |
| 201 | + |
| 202 | +### Notes |
| 203 | + |
| 204 | +* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread. |
| 205 | +* **Resolved**: Use `isResolved: true` to render a thread in resolved state. |
| 206 | +* **Indicator & preview**: Cells with comments show an indicator; hover opens the comment container for preview and inline actions. |
| 207 | +* **Comments Review pane**: Set `showCommentsPane: true` to manage threads centrally (add, filter, navigate, reply, edit, delete, resolve/reopen). |
| 208 | + |
| 209 | +## Limitations |
| 210 | + |
| 211 | +* **Unposted comment is not stored**: If you type in the comment container and close it without clicking **Post**, the entered text is not saved. Only posted content is persisted in the comment model. |
| 212 | +* **Export support**: Threaded comments are not exported to **.xls**, **.csv**, and **.pdf**. |
| 213 | +* **Single thread per cell**: Only one comment thread is supported per cell; replies are a flat list (no nested reply-to-reply). |
| 214 | +* **Non-collaborative**: Real-time multi-user sync is not supported; the host app must set the author identity for the session. |
0 commit comments