diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/comment.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/comment.md
new file mode 100644
index 0000000000..4264fc9aa4
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/comment.md
@@ -0,0 +1,187 @@
+---
+layout: post
+title: Comment in EJ2 ASP.NET Core Spreadsheet control | Syncfusion
+description: Learn here all about Comment feature in Syncfusion EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Comment
+documentation: ug
+---
+
+# Comment in EJ2 ASP.NET Core Spreadsheet control
+The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads.
+
+Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact.
+
+
+
+## Author identity
+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.
+
+```js
+
+
+```
+>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default.
+
+## Adding a comment
+You can add a **comment** to a cell in several ways:
+* **Context menu**: Right-click the target cell and select **"New Comment"**.
+* **Ribbon**: Go to **Review > Comment > New Comment**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell.
+* **Programmatically**:
+ * Use the `updateCell` method with the comment model to add a comment to a specific cell.
+ * Bind comments via code-behind during initial load by associating the comment model with the cell model.
+
+The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover.
+
+
+
+## Adding a reply
+You can add one or more replies to an existing comment to provide additional details or answers:
+* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**.
+* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**.
+* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode.
+
+After posting, the replies appear under the first comment in the comment editor.
+
+
+
+## Editing a comment
+You can edit the content of a comment or its replies directly within the comment editor.
+
+* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**.
+* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**.
+
+
+
+## Resolve and Reopen
+The **Resolve thread** option marks a comment thread 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.
+
+### Resolve a comment
+* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
+
+### Reopen a comment
+* In the comment editor, click the **Reopen** button in the header to make the thread active again.
+
+
+
+You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically.
+
+**Example: Using `isResolved` property in the comment model with the `updateCell` method**
+
+```ts
+// Update a cell with a comment using the updateCell method
+ spreadsheet.updateCell({
+ comment: {
+ author: 'Chistoper', text: 'Are you completed the report',
+ createdTime: 'January 03, 2026 at 5:00 PM',
+ // Set to true to mark the thread as resolved; false keeps it active
+ isResolved: false,
+ replies: [{ author: 'John', text: 'Yes, completed',
+ createdTime: 'January 03, 2026 at 7:00 PM' }]
+ }
+ }, 'Sheet1!D5');
+
+```
+
+## Deleting a comment or reply
+You can delete either a specific reply or an entire comment thread (including all replies) using the following options:
+
+### Deleting a comment thread
+* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**.
+* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment.
+* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment.
+
+Deleting a thread removes the comment and all its replies from the cell.
+
+
+
+### Delete a reply
+In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**.
+
+
+
+## Next and Previous Comment
+The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments:
+
+* **Next Comment**: Moves to the next cell with a comment.
+* **Previous Comment**: Moves to the previous cell with a comment.
+
+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.
+
+
+
+## Comments review pane
+The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook.
+
+You can show or hide the "Comments" review pane using:
+
+* **Ribbon**: Go to **Review > Comment > Show Comments**.
+* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**.
+
+
+
+### Features of the comments review pane
+The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell.
+
+The "Comments" review pane allows you to:
+
+* Add new comment using the **New** button.
+* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads.
+* Navigate between comments and synchronize selection with the corresponding cells.
+* Perform actions such as:
+ * **Reply** – Add replies directly from the review pane.
+ * **Edit** – Modify the text of a comment or reply.
+ * **Delete** – Remove a reply or an entire thread.
+ * **Resolve/Reopen** – Change the status of a comment.
+
+When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized:
+
+* Selecting a comment in the review pane highlights the corresponding cell in the sheet.
+* Selecting a cell with a comment focuses the respective comment thread in the review pane.
+* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI.
+* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing.
+
+## Saving a Workbook with Comments
+You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**.
+- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments).
+
+> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**.
+
+### Why comments are not saved in `.xls`
+The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
+Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
+
+> To retain threaded comments, always save the workbook in **.xlsx** format.
+
+## Bind Comments via code-behind
+You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include:
+- **Comment**: `author`, `text`, `createdTime`, `isResolved`
+- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies).
+
+In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/comment-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="CommentController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/comment-cs1/commentController.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+### Important Notes
+* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread.
+* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook.
+* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane.
+
+## Limitations
+* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model.
+* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added.
+* **Comments in Print**: Comments are not included in print output.
+* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved.
+
+## See Also
+* [Notes](./notes)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_adding_a_comment.gif
new file mode 100644
index 0000000000..863da7a341
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_adding_a_comment.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment.png
new file mode 100644
index 0000000000..b002a6db3d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment_reply.png
new file mode 100644
index 0000000000..5486940160
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_comment_reply.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete-reply_comment.png
new file mode 100644
index 0000000000..f2385a4f9b
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete-reply_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete_comment.png
new file mode 100644
index 0000000000..0c0ff11f12
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_delete_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_edit_comment.png
new file mode 100644
index 0000000000..2874b11cb7
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_edit_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_next_previous_comment.png
new file mode 100644
index 0000000000..ece81c396d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_next_previous_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_resolve_reopen.gif
new file mode 100644
index 0000000000..1307efbbb9
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_resolve_reopen.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_show_comments.gif
new file mode 100644
index 0000000000..d033c0c9ab
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_show_comments.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md
index a71451518d..126d4fe121 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md
@@ -10,7 +10,7 @@ documentation: ug
# Notes in ASP.NET Core Spreadsheet control
-The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [`enableNotes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property, which defaults to **true**.
+The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property, which defaults to **true**.
When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes.
@@ -31,29 +31,94 @@ In the below example, you can add, edit, save, and delete notes.
In the active worksheet, you can add a note in the following ways:
-* To add a note, right-click the cell to open the context menu and choose the **"Add Note"** option from the context menu. This will open a dialog box to add the content as a note.
-* You can also use the `Shift` + `F2` keyboard shortcut to add a note to the desired cell. A dialog box will be opened to add the content as a note.
-* After entering the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+* **Context Menu**: Right-click the desired cell and select **Add Note**.
+* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
+* **Keyboard Shortcut**: Select the cell and press Shift + F2.
+* **Programmatically**:
+ * Use the `updateCell` method with the note model to add a note to a specific cell.
+ * Bind notes via code-behind during initial load by associating the note model with the cell model.
+
+A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box.
## Editing a note
-In the active worksheet, you can modify the content of existing notes in the document.
+In the active worksheet, you can modify the content of existing notes in the document:
+
+* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
+* **Keyboard Shortcut**: Select the cell containing the note and press Shift + F2.
-* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
-* Select the **"Edit Note"** option from the context menu.
-* You can also use the `Shift` + `F2` keyboard shortcut to edit the note of the desired cell. A dialog box will be opened to edit the note.
-* After editing the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box.
## Deleting a note
-In the active worksheet, right-click on the desired cell containing the note that you want to remove, which opens the context menu. In the context menu, select the **"Delete Note"** option to delete the note.
+You can remove notes from cells using the following ways:
+
+* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
+
+The note will be removed from the cell, and the red triangle indicator will be removed.
+## Navigating between notes
+
+The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab.
+
+### Previous Note
+
+To navigate to the previous note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
+* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
+* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+### Next Note
+
+To navigate to the next note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
+* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
+* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
+
+## Show/Hide Note
+
+The **Show/Hide Note** option allows you to toggle the visibility of individual notes as sticky notes within the worksheet. When enabled, the note appears as a persistent floating text box, making it convenient to reference key information without hovering over the cell.
+
+To toggle the visibility of a note:
+
+* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
+* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
+
+**Behavior:**
+
+* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
+* **Sticky State (Visible)**: Toggling Show/Hide Note on a hidden note makes it visible as a sticky note, which remains on display even when navigating to other cells or selections.
+* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
+* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
+
+## Show All Notes
+
+The **Show All Notes** option enables you to display all notes in the current worksheet simultaneously as sticky notes, simplifying the review of multiple comments at a glance.
+
+To activate:
+
+* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
+
+All notes in the worksheet will appear as floating text boxes near their respective cells.
+
+> **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active.
+
+This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
+
## Saving the document with notes
The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls).
@@ -62,7 +127,7 @@ The Spreadsheet data, including notes, can be saved and exported as an Excel doc
## Disabling notes
-To disable the note functionality, you need to set the [`enableNotes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
+To disable the note functionality, you need to set the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
@@ -81,6 +146,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet.
+In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event.
+
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/spreadsheet/asp-net-core/note-cs3/tagHelper %}
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/comment.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/comment.md
new file mode 100644
index 0000000000..546475e681
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/comment.md
@@ -0,0 +1,189 @@
+---
+layout: post
+title: Comment in EJ2 ASP.NET MVC Spreadsheet control | Syncfusion
+description: Learn here all about Comment feature in Syncfusion EJ2 ASP.NET MVC Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Comment
+documentation: ug
+---
+
+# Comment in EJ2 ASP.NET MVC Spreadsheet control
+The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads.
+
+Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact.
+
+
+
+## Author identity
+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.
+
+```js
+ @(Html.EJ2().Spreadsheet("spreadsheet")
+ .Author("Place the Author Name Here")
+ .Render()
+ )
+```
+>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default.
+
+## Adding a comment
+You can add a **comment** to a cell in several ways:
+* **Context menu**: Right-click the target cell and select **"New Comment"**.
+* **Ribbon**: Go to **Review > Comment > New Comment**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell.
+* **Programmatically**:
+ * Use the `updateCell` method with the comment model to add a comment to a specific cell.
+ * Bind comments via code-behind during initial load by associating the comment model with the cell model.
+
+The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover.
+
+
+
+## Adding a reply
+You can add one or more replies to an existing comment to provide additional details or answers:
+* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**.
+* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**.
+* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode.
+
+After posting, the replies appear under the first comment in the comment editor.
+
+
+
+## Editing a comment
+You can edit the content of a comment or its replies directly within the comment editor.
+
+* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**.
+* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**.
+
+
+
+## Resolve and Reopen
+The **Resolve thread** option marks a comment thread 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.
+
+### Resolve a comment
+* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
+
+### Reopen a comment
+* In the comment editor, click the **Reopen** button in the header to make the thread active again.
+
+
+
+You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically.
+
+**Example: Using `isResolved` property in the comment model with the `updateCell` method**
+
+```ts
+// Update a cell with a comment using the updateCell method
+ spreadsheet.updateCell({
+ comment: {
+ author: 'Chistoper', text: 'Are you completed the report',
+ createdTime: 'January 03, 2026 at 5:00 PM',
+ // Set to true to mark the thread as resolved; false keeps it active
+ isResolved: false,
+ replies: [{ author: 'John', text: 'Yes, completed',
+ createdTime: 'January 03, 2026 at 7:00 PM' }]
+ }
+ }, 'Sheet1!D5');
+
+```
+
+## Deleting a comment or reply
+You can delete either a specific reply or an entire comment thread (including all replies) using the following options:
+
+### Deleting a comment thread
+* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**.
+* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment.
+* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment.
+
+Deleting a thread removes the comment and all its replies from the cell.
+
+
+
+### Delete a reply
+In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**.
+
+
+
+## Next and Previous Comment
+The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments:
+
+* **Next Comment**: Moves to the next cell with a comment.
+* **Previous Comment**: Moves to the previous cell with a comment.
+
+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.
+
+
+
+## Comments review pane
+The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook.
+
+You can show or hide the "Comments" review pane using:
+
+* **Ribbon**: Go to **Review > Comment > Show Comments**.
+* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**.
+
+
+
+### Features of the comments review pane
+The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell.
+
+The "Comments" review pane allows you to:
+
+* Add new comment using the **New** button.
+* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads.
+* Navigate between comments and synchronize selection with the corresponding cells.
+* Perform actions such as:
+ * **Reply** – Add replies directly from the review pane.
+ * **Edit** – Modify the text of a comment or reply.
+ * **Delete** – Remove a reply or an entire thread.
+ * **Resolve/Reopen** – Change the status of a comment.
+
+When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized:
+
+* Selecting a comment in the review pane highlights the corresponding cell in the sheet.
+* Selecting a cell with a comment focuses the respective comment thread in the review pane.
+* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI.
+* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing.
+
+## Saving a Workbook with Comments
+You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**.
+- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments).
+
+> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**.
+
+### Why comments are not saved in `.xls`
+The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
+Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
+
+> To retain threaded comments, always save the workbook in **.xlsx** format.
+
+## Bind Comments via code-behind
+You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include:
+- **Comment**: `author`, `text`, `createdTime`, `isResolved`
+- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies).
+
+In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-mvc/comment-cs1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="CommentController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-mvc/comment-cs1/commentController.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+### Important Notes
+* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread.
+* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook.
+* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane.
+
+## Limitations
+* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model.
+* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added.
+* **Comments in Print**: Comments are not included in print output.
+* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved.
+
+## See Also
+* [Notes](./notes)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_adding_a_comment.gif
new file mode 100644
index 0000000000..863da7a341
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_adding_a_comment.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment.png
new file mode 100644
index 0000000000..b002a6db3d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment_reply.png
new file mode 100644
index 0000000000..5486940160
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_comment_reply.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete-reply_comment.png
new file mode 100644
index 0000000000..f2385a4f9b
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete-reply_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete_comment.png
new file mode 100644
index 0000000000..0c0ff11f12
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_delete_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_edit_comment.png
new file mode 100644
index 0000000000..2874b11cb7
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_edit_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_next_previous_comment.png
new file mode 100644
index 0000000000..ece81c396d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_next_previous_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_resolve_reopen.gif
new file mode 100644
index 0000000000..1307efbbb9
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_resolve_reopen.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_show_comments.gif
new file mode 100644
index 0000000000..d033c0c9ab
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet_show_comments.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/notes.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/notes.md
index ecaeea2360..878eb042d7 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/notes.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/notes.md
@@ -10,7 +10,7 @@ documentation: ug
# Notes in ASP.NET MVC Spreadsheet Control
-The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [`enableNotes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property, which defaults to **true**.
+The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property, which defaults to **true**.
When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes.
@@ -31,38 +31,103 @@ In the below example, you can add, edit, save, and delete notes.
In the active worksheet, you can add a note in the following ways:
-* To add a note, right-click the cell to open the context menu and choose the **"Add Note"** option from the context menu. This will open a dialog box to add the content as a note.
-* You can also use the `Shift` + `F2` keyboard shortcut to add a note to the desired cell. A dialog box will be opened to add the content as a note.
-* After entering the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+* **Context Menu**: Right-click the desired cell and select **Add Note**.
+* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
+* **Keyboard Shortcut**: Select the cell and press Shift + F2.
+* **Programmatically**:
+ * Use the `updateCell` method with the note model to add a note to a specific cell.
+ * Bind notes via code-behind during initial load by associating the note model with the cell model.
+
+A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box.
## Editing a note
-In the active worksheet, you can modify the content of existing notes in the document.
+In the active worksheet, you can modify the content of existing notes in the document:
+
+* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
+* **Keyboard Shortcut**: Select the cell containing the note and press Shift + F2.
-* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
-* Select the **"Edit Note"** option from the context menu.
-* You can also use the `Shift` + `F2` keyboard shortcut to edit the note of the desired cell. A dialog box will be opened to edit the note.
-* After editing the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box.
## Deleting a note
-In the active worksheet, right-click on the desired cell containing the note that you want to remove, which opens the context menu. In the context menu, select the **"Delete Note"** option to delete the note.
+You can remove notes from cells using the following ways:
+
+* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
+
+The note will be removed from the cell, and the red triangle indicator will be removed.
+## Navigating between notes
+
+The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab.
+
+### Previous Note
+
+To navigate to the previous note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
+* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
+* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+### Next Note
+
+To navigate to the next note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
+* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
+* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
+
+## Show/Hide Note
+
+The **Show/Hide Note** option allows you to toggle the visibility of individual notes as sticky notes within the worksheet. When enabled, the note appears as a persistent floating text box, making it convenient to reference key information without hovering over the cell.
+
+To toggle the visibility of a note:
+
+* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
+* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
+
+**Behavior:**
+
+* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
+* **Sticky State (Visible)**: Toggling Show/Hide Note on a hidden note makes it visible as a sticky note, which remains on display even when navigating to other cells or selections.
+* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
+* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
+
+## Show All Notes
+
+The **Show All Notes** option enables you to display all notes in the current worksheet simultaneously as sticky notes, simplifying the review of multiple comments at a glance.
+
+To activate:
+
+* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
+
+All notes in the worksheet will appear as floating text boxes near their respective cells.
+
+> **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active.
+
+This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
+
## Saving the document with notes
-The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as MS Excel (.xlsx) and MS Excel 97-2003 (.xls).
+The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls).
> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available.
## Disabling notes
-To disable the note functionality, you need to set the [`enableNotes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
+To disable the note functionality, you need to set the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
@@ -81,6 +146,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet.
+In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event.
+
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/spreadsheet/asp-net-mvc/note-cs3/razor %}
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/comment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/comment.md
new file mode 100644
index 0000000000..cc657354a3
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/comment.md
@@ -0,0 +1,194 @@
+---
+layout: post
+title: Comment in EJ2 JavaScript Spreadsheet control | Syncfusion
+description: Learn here all about Comment feature in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Comment
+documentation: ug
+---
+
+# Comment in EJ2 JavaScript Spreadsheet control
+The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads.
+
+Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact.
+
+
+
+## Author identity
+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.
+
+```js
+ // Initialize Spreadsheet component
+ var spreadsheet = new ej.spreadsheet.Spreadsheet({
+ // Set the author name, If not set, "Guest User" will be shown as the author by default.
+ author: 'Place the Author Name Here'
+ });
+ // Render initialized Spreadsheet
+ spreadsheet.appendTo('#element');
+```
+>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default.
+
+## Adding a comment
+You can add a **comment** to a cell in several ways:
+* **Context menu**: Right-click the target cell and select **"New Comment"**.
+* **Ribbon**: Go to **Review > Comment > New Comment**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell.
+* **Programmatically**:
+ * Use the `updateCell` method with the comment model to add a comment to a specific cell.
+ * Bind comments via code-behind during initial load by associating the comment model with the cell model.
+
+The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover.
+
+
+
+## Adding a reply
+You can add one or more replies to an existing comment to provide additional details or answers:
+* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**.
+* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**.
+* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode.
+
+After posting, the replies appear under the first comment in the comment editor.
+
+
+
+## Editing a comment
+You can edit the content of a comment or its replies directly within the comment editor.
+
+* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**.
+* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**.
+
+
+
+## Resolve and Reopen
+The **Resolve thread** option marks a comment thread 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.
+
+### Resolve a comment
+* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
+
+### Reopen a comment
+* In the comment editor, click the **Reopen** button in the header to make the thread active again.
+
+
+
+You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically.
+
+**Example: Using `isResolved` property in the comment model with the `updateCell` method**
+
+```js
+// Update a cell with a comment using the updateCell method
+ spreadsheet.updateCell({
+ comment: {
+ author: 'Chistoper', text: 'Are you completed the report',
+ createdTime: 'January 03, 2026 at 5:00 PM',
+ // Set to true to mark the thread as resolved; false keeps it active
+ isResolved: false,
+ replies: [{ author: 'John', text: 'Yes, completed',
+ createdTime: 'January 03, 2026 at 7:00 PM' }]
+ }
+ }, 'Sheet1!D5');
+
+```
+
+## Deleting a comment or reply
+You can delete either a specific reply or an entire comment thread (including all replies) using the following options:
+
+### Deleting a comment thread
+* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**.
+* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment.
+* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment.
+
+Deleting a thread removes the comment and all its replies from the cell.
+
+
+
+### Delete a reply
+In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**.
+
+
+
+## Next and Previous Comment
+The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments:
+
+* **Next Comment**: Moves to the next cell with a comment.
+* **Previous Comment**: Moves to the previous cell with a comment.
+
+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.
+
+
+
+## Comments review pane
+The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook.
+
+You can show or hide the "Comments" review pane using:
+
+* **Ribbon**: Go to **Review > Comment > Show Comments**.
+* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**.
+
+
+
+### Features of the comments review pane
+The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell.
+
+The "Comments" review pane allows you to:
+
+* Add new comment using the **New** button.
+* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads.
+* Navigate between comments and synchronize selection with the corresponding cells.
+* Perform actions such as:
+ * **Reply** – Add replies directly from the review pane.
+ * **Edit** – Modify the text of a comment or reply.
+ * **Delete** – Remove a reply or an entire thread.
+ * **Resolve/Reopen** – Change the status of a comment.
+
+When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized:
+
+* Selecting a comment in the review pane highlights the corresponding cell in the sheet.
+* Selecting a cell with a comment focuses the respective comment thread in the review pane.
+* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI.
+* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing.
+
+## Saving a Workbook with Comments
+You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**.
+- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments).
+
+> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**.
+
+### Why comments are not saved in `.xls`
+The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
+Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
+
+> To retain threaded comments, always save the workbook in **.xlsx** format.
+
+## Bind Comments via code-behind
+You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include:
+- **Comment**: `author`, `text`, `createdTime`, `isResolved`
+- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies).
+
+In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/javascript-es5/comment-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/javascript-es5/comment-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/comment-cs1" %}
+
+### Important Notes
+* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread.
+* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook.
+* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane.
+
+## Limitations
+* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model.
+* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added.
+* **Comments in Print**: Comments are not included in print output.
+* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved.
+
+## See Also
+* [Notes](./notes)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_adding_a_comment.gif
new file mode 100644
index 0000000000..863da7a341
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_adding_a_comment.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment.png
new file mode 100644
index 0000000000..b002a6db3d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment_reply.png
new file mode 100644
index 0000000000..5486940160
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_comment_reply.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete-reply_comment.png
new file mode 100644
index 0000000000..f2385a4f9b
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete-reply_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete_comment.png
new file mode 100644
index 0000000000..0c0ff11f12
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_delete_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_edit_comment.png
new file mode 100644
index 0000000000..2874b11cb7
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_edit_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_next_previous_comment.png
new file mode 100644
index 0000000000..ece81c396d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_next_previous_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_resolve_reopen.gif
new file mode 100644
index 0000000000..1307efbbb9
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_resolve_reopen.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_show_comments.gif
new file mode 100644
index 0000000000..d033c0c9ab
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet_show_comments.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/notes.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/notes.md
index 9f4ac3852f..abd669c0da 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/notes.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/notes.md
@@ -7,9 +7,9 @@ control: Notes
documentation: ug
---
-# Notes in EJ2 Javascript Spreadsheet control
+# Notes in EJ2 JavaScript Spreadsheet control
-The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [`enableNotes`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enablenotes) property, which defaults to **true**.
+The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**.
When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes.
@@ -32,38 +32,103 @@ In the below example, you can add, edit, save, and delete notes.
In the active worksheet, you can add a note in the following ways:
-* To add a note, right-click the cell to open the context menu and choose the **"Add Note"** option from the context menu. This will open a dialog box to add the content as a note.
-* You can also use the `Shift` + `F2` keyboard shortcut to add a note to the desired cell. A dialog box will be opened to add the content as a note.
-* After entering the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+* **Context Menu**: Right-click the desired cell and select **Add Note**.
+* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
+* **Keyboard Shortcut**: Select the cell and press Shift + F2.
+* **Programmatically**:
+ * Use the `updateCell` method with the note model to add a note to a specific cell.
+ * Bind notes via code-behind during initial load by associating the note model with the cell model.
+
+A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box.
## Editing a note
-In the active worksheet, you can modify the content of existing notes in the document.
+In the active worksheet, you can modify the content of existing notes in the document:
+
+* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
+* **Keyboard Shortcut**: Select the cell containing the note and press Shift + F2.
-* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
-* Select the **"Edit Note"** option from the context menu.
-* You can also use the `Shift` + `F2` keyboard shortcut to edit the note of the desired cell. A dialog box will be opened to edit the note.
-* After editing the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box.
## Deleting a note
-In the active worksheet, right-click on the desired cell containing the note that you want to remove, which opens the context menu. In the context menu, select the **"Delete Note"** option to delete the note.
+You can remove notes from cells using the following ways:
+
+* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
+
+The note will be removed from the cell, and the red triangle indicator will be removed.
+## Navigating between notes
+
+The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab.
+
+### Previous Note
+
+To navigate to the previous note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
+* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
+* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+### Next Note
+
+To navigate to the next note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
+* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
+* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
+
+## Show/Hide Note
+
+The **Show/Hide Note** option allows you to toggle the visibility of individual notes as sticky notes within the worksheet. When enabled, the note appears as a persistent floating text box, making it convenient to reference key information without hovering over the cell.
+
+To toggle the visibility of a note:
+
+* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
+* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
+
+**Behavior:**
+
+* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
+* **Sticky State (Visible)**: Toggling Show/Hide Note on a hidden note makes it visible as a sticky note, which remains on display even when navigating to other cells or selections.
+* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
+* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
+
+## Show All Notes
+
+The **Show All Notes** option enables you to display all notes in the current worksheet simultaneously as sticky notes, simplifying the review of multiple comments at a glance.
+
+To activate:
+
+* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
+
+All notes in the worksheet will appear as floating text boxes near their respective cells.
+
+> **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active.
+
+This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
+
## Saving the document with notes
-The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as MS Excel (.xlsx) and MS Excel 97-2003 (.xls).
+The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls).
> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available.
## Disabling notes
-To disable the note functionality, you need to set the [`enableNotes`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
+To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
@@ -84,6 +149,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet.
+In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
{% include code-snippet/spreadsheet/javascript-es5/note-cs3/index.js %}
diff --git a/Document-Processing/Excel/Spreadsheet/React/comment.md b/Document-Processing/Excel/Spreadsheet/React/comment.md
new file mode 100644
index 0000000000..90cc3ce02e
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/comment.md
@@ -0,0 +1,199 @@
+---
+layout: post
+title: Comment in React Spreadsheet control | Syncfusion
+description: Learn here all about Comment feature in Syncfusion React Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Comment
+documentation: ug
+---
+
+# Comment in React Spreadsheet control
+The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads.
+
+Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact.
+
+
+
+## Author identity
+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.
+
+```ts
+ import * as React from 'react';
+ import { createRoot } from 'react-dom/client';
+ import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+ export default function App() {
+ return (
+
+
+ );
+ }
+ const root = createRoot(document.getElementById('root')!);
+ root.render();
+```
+>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default.
+
+## Adding a comment
+You can add a **comment** to a cell in several ways:
+* **Context menu**: Right-click the target cell and select **"New Comment"**.
+* **Ribbon**: Go to **Review > Comment > New Comment**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell.
+* **Programmatically**:
+ * Use the `updateCell` method with the comment model to add a comment to a specific cell.
+ * Bind comments via code-behind during initial load by associating the comment model with the cell model.
+
+The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover.
+
+
+
+## Adding a reply
+You can add one or more replies to an existing comment to provide additional details or answers:
+* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**.
+* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**.
+* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode.
+
+After posting, the replies appear under the first comment in the comment editor.
+
+
+
+## Editing a comment
+You can edit the content of a comment or its replies directly within the comment editor.
+
+* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**.
+* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**.
+
+
+
+## Resolve and Reopen
+The **Resolve thread** option marks a comment thread 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.
+
+### Resolve a comment
+* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
+
+### Reopen a comment
+* In the comment editor, click the **Reopen** button in the header to make the thread active again.
+
+
+
+You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically.
+
+**Example: Using `isResolved` property in the comment model with the `updateCell` method**
+
+```ts
+// Update a cell with a comment using the updateCell method
+ spreadsheet.updateCell({
+ comment: {
+ author: 'Chistoper', text: 'Are you completed the report',
+ createdTime: 'January 03, 2026 at 5:00 PM',
+ // Set to true to mark the thread as resolved; false keeps it active
+ isResolved: false,
+ replies: [{ author: 'John', text: 'Yes, completed',
+ createdTime: 'January 03, 2026 at 7:00 PM' }]
+ }
+ }, 'Sheet1!D5');
+```
+
+## Deleting a comment or reply
+You can delete either a specific reply or an entire comment thread (including all replies) using the following options:
+
+### Deleting a comment thread
+* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**.
+* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment.
+* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment.
+
+Deleting a thread removes the comment and all its replies from the cell.
+
+
+
+### Delete a reply
+In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**.
+
+
+
+## Next and Previous Comment
+The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments:
+
+* **Next Comment**: Moves to the next cell with a comment.
+* **Previous Comment**: Moves to the previous cell with a comment.
+
+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.
+
+
+
+## Comments review pane
+The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook.
+
+You can show or hide the "Comments" review pane using:
+
+* **Ribbon**: Go to **Review > Comment > Show Comments**.
+* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**.
+
+
+
+### Features of the comments review pane
+The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell.
+
+The "Comments" review pane allows you to:
+
+* Add new comment using the **New** button.
+* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads.
+* Navigate between comments and synchronize selection with the corresponding cells.
+* Perform actions such as:
+ * **Reply** – Add replies directly from the review pane.
+ * **Edit** – Modify the text of a comment or reply.
+ * **Delete** – Remove a reply or an entire thread.
+ * **Resolve/Reopen** – Change the status of a comment.
+
+When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized:
+
+* Selecting a comment in the review pane highlights the corresponding cell in the sheet.
+* Selecting a cell with a comment focuses the respective comment thread in the review pane.
+* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI.
+* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing.
+
+## Saving a Workbook with Comments
+You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**.
+- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments).
+
+> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**.
+
+### Why comments are not saved in `.xls`
+The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
+Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
+
+> To retain threaded comments, always save the workbook in **.xlsx** format.
+
+## Bind Comments via code-behind
+You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include:
+- **Comment**: `author`, `text`, `createdTime`, `isResolved`
+- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies).
+
+In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/comment-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/comment-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/comment-cs1" %}
+
+### Important Notes
+* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread.
+* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook.
+* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane.
+
+## Limitations
+* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model.
+* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added.
+* **Comments in Print**: Comments are not included in print output.
+* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved.
+
+## See Also
+* [Notes](./notes)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_adding_a_comment.gif
new file mode 100644
index 0000000000..863da7a341
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_adding_a_comment.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment.png
new file mode 100644
index 0000000000..b002a6db3d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment_reply.png
new file mode 100644
index 0000000000..5486940160
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_comment_reply.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete-reply_comment.png
new file mode 100644
index 0000000000..f2385a4f9b
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete-reply_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete_comment.png
new file mode 100644
index 0000000000..0c0ff11f12
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_delete_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_edit_comment.png
new file mode 100644
index 0000000000..2874b11cb7
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_edit_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_next_previous_comment.png
new file mode 100644
index 0000000000..ece81c396d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_next_previous_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_resolve_reopen.gif
new file mode 100644
index 0000000000..1307efbbb9
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_resolve_reopen.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_show_comments.gif
new file mode 100644
index 0000000000..d033c0c9ab
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_show_comments.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/notes.md b/Document-Processing/Excel/Spreadsheet/React/notes.md
index 832fccab76..bca9e39d20 100644
--- a/Document-Processing/Excel/Spreadsheet/React/notes.md
+++ b/Document-Processing/Excel/Spreadsheet/React/notes.md
@@ -9,7 +9,7 @@ documentation: ug
# Notes in React Spreadsheet component
-The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [`enableNotes`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablenotes) property, which defaults to **true**.
+The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**.
When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes.
@@ -32,38 +32,103 @@ In the below example, you can add, edit, save, and delete notes.
In the active worksheet, you can add a note in the following ways:
-* To add a note, right-click the cell to open the context menu and choose the **"Add Note"** option from the context menu. This will open a dialog box to add the content as a note.
-* You can also use the `Shift` + `F2` keyboard shortcut to add a note to the desired cell. A dialog box will be opened to add the content as a note.
-* After entering the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+* **Context Menu**: Right-click the desired cell and select **Add Note**.
+* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
+* **Keyboard Shortcut**: Select the cell and press Shift + F2.
+* **Programmatically**:
+ * Use the `updateCell` method with the note model to add a note to a specific cell.
+ * Bind notes via code-behind during initial load by associating the note model with the cell model.
+
+A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box.
## Editing a note
-In the active worksheet, you can modify the content of existing notes in the document.
+In the active worksheet, you can modify the content of existing notes in the document:
+
+* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
+* **Keyboard Shortcut**: Select the cell containing the note and press Shift + F2.
-* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
-* Select the **"Edit Note"** option from the context menu.
-* You can also use the `Shift` + `F2` keyboard shortcut to edit the note of the desired cell. A dialog box will be opened to edit the note.
-* After editing the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box.
## Deleting a note
-In the active worksheet, right-click on the desired cell containing the note that you want to remove, which opens the context menu. In the context menu, select the **"Delete Note"** option to delete the note.
+You can remove notes from cells using the following ways:
+
+* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
+
+The note will be removed from the cell, and the red triangle indicator will be removed.
+## Navigating between notes
+
+The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab.
+
+### Previous Note
+
+To navigate to the previous note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
+* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
+* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+### Next Note
+
+To navigate to the next note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
+* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
+* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
+
+## Show/Hide Note
+
+The **Show/Hide Note** option allows you to toggle the visibility of individual notes as sticky notes within the worksheet. When enabled, the note appears as a persistent floating text box, making it convenient to reference key information without hovering over the cell.
+
+To toggle the visibility of a note:
+
+* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
+* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
+
+**Behavior:**
+
+* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
+* **Sticky State (Visible)**: Toggling Show/Hide Note on a hidden note makes it visible as a sticky note, which remains on display even when navigating to other cells or selections.
+* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
+* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
+
+## Show All Notes
+
+The **Show All Notes** option enables you to display all notes in the current worksheet simultaneously as sticky notes, simplifying the review of multiple comments at a glance.
+
+To activate:
+
+* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
+
+All notes in the worksheet will appear as floating text boxes near their respective cells.
+
+> **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active.
+
+This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
+
## Saving the document with notes
-The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as MS Excel (.xlsx) and MS Excel 97-2003 (.xls).
+The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls).
> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available.
## Disabling notes
-To disable the note functionality, you need to set the [`enableNotes`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
+To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
@@ -84,6 +149,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet.
+In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event.
+
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
{% include code-snippet/spreadsheet/react/note-cs3/app/app.jsx %}
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/comment.md b/Document-Processing/Excel/Spreadsheet/Vue/comment.md
new file mode 100644
index 0000000000..54021ec62f
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/Vue/comment.md
@@ -0,0 +1,202 @@
+---
+layout: post
+title: Comment in Vue Spreadsheet control | Syncfusion
+description: Learn here all about Comment feature in Syncfusion Vue Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Comment
+documentation: ug
+---
+
+# Comment in Vue Spreadsheet control
+The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads.
+
+Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact.
+
+
+
+## Author identity
+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.
+
+```ts
+
+
+
+
+
+
+```
+>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default.
+
+## Adding a comment
+You can add a **comment** to a cell in several ways:
+* **Context menu**: Right-click the target cell and select **"New Comment"**.
+* **Ribbon**: Go to **Review > Comment > New Comment**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell.
+* **Programmatically**:
+ * Use the `updateCell` method with the comment model to add a comment to a specific cell.
+ * Bind comments via code-behind during initial load by associating the comment model with the cell model.
+
+The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover.
+
+
+
+## Adding a reply
+You can add one or more replies to an existing comment to provide additional details or answers:
+* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**.
+* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**.
+* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**.
+* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode.
+
+After posting, the replies appear under the first comment in the comment editor.
+
+
+
+## Editing a comment
+You can edit the content of a comment or its replies directly within the comment editor.
+
+* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**.
+* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**.
+
+
+
+## Resolve and Reopen
+The **Resolve thread** option marks a comment thread 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.
+
+### Resolve a comment
+* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
+
+### Reopen a comment
+* In the comment editor, click the **Reopen** button in the header to make the thread active again.
+
+
+
+You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically.
+
+**Example: Using `isResolved` property in the comment model with the `updateCell` method**
+
+```ts
+// Update a cell with a comment using the updateCell method
+ spreadsheet.updateCell({
+ comment: {
+ author: 'Chistoper', text: 'Are you completed the report',
+ createdTime: 'January 03, 2026 at 5:00 PM',
+ // Set to true to mark the thread as resolved; false keeps it active
+ isResolved: false,
+ replies: [{ author: 'John', text: 'Yes, completed',
+ createdTime: 'January 03, 2026 at 7:00 PM' }]
+ }
+ }, 'Sheet1!D5');
+
+```
+
+## Deleting a comment or reply
+You can delete either a specific reply or an entire comment thread (including all replies) using the following options:
+
+### Deleting a comment thread
+* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**.
+* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment.
+* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment.
+
+Deleting a thread removes the comment and all its replies from the cell.
+
+
+
+### Delete a reply
+In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**.
+
+
+
+## Next and Previous Comment
+The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments:
+
+* **Next Comment**: Moves to the next cell with a comment.
+* **Previous Comment**: Moves to the previous cell with a comment.
+
+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.
+
+
+
+## Comments review pane
+The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook.
+
+You can show or hide the "Comments" review pane using:
+
+* **Ribbon**: Go to **Review > Comment > Show Comments**.
+* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**.
+
+
+
+### Features of the comments review pane
+The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell.
+
+The "Comments" review pane allows you to:
+
+* Add new comment using the **New** button.
+* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads.
+* Navigate between comments and synchronize selection with the corresponding cells.
+* Perform actions such as:
+ * **Reply** – Add replies directly from the review pane.
+ * **Edit** – Modify the text of a comment or reply.
+ * **Delete** – Remove a reply or an entire thread.
+ * **Resolve/Reopen** – Change the status of a comment.
+
+When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized:
+
+* Selecting a comment in the review pane highlights the corresponding cell in the sheet.
+* Selecting a cell with a comment focuses the respective comment thread in the review pane.
+* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI.
+* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing.
+
+## Saving a Workbook with Comments
+You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**.
+- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments).
+
+> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**.
+
+### Why comments are not saved in `.xls`
+The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
+Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
+
+> To retain threaded comments, always save the workbook in **.xlsx** format.
+
+## Bind Comments via code-behind
+You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include:
+- **Comment**: `author`, `text`, `createdTime`, `isResolved`
+- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies).
+
+In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/spreadsheet/vue/comment-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/spreadsheet/vue/comment-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/vue/comment-cs1" %}
+
+### Important Notes
+* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread.
+* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook.
+* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane.
+
+## Limitations
+* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model.
+* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added.
+* **Comments in Print**: Comments are not included in print output.
+* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved.
+
+## See Also
+* [Notes](./notes)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_adding_a_comment.gif
new file mode 100644
index 0000000000..863da7a341
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_adding_a_comment.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment.png
new file mode 100644
index 0000000000..b002a6db3d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment_reply.png
new file mode 100644
index 0000000000..5486940160
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_comment_reply.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete-reply_comment.png
new file mode 100644
index 0000000000..f2385a4f9b
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete-reply_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete_comment.png
new file mode 100644
index 0000000000..0c0ff11f12
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_delete_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_edit_comment.png
new file mode 100644
index 0000000000..2874b11cb7
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_edit_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_next_previous_comment.png
new file mode 100644
index 0000000000..ece81c396d
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_next_previous_comment.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_resolve_reopen.gif
new file mode 100644
index 0000000000..1307efbbb9
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_resolve_reopen.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_show_comments.gif
new file mode 100644
index 0000000000..d033c0c9ab
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet_show_comments.gif differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/notes.md b/Document-Processing/Excel/Spreadsheet/Vue/notes.md
index ac3edef376..82e1f805a9 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/notes.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/notes.md
@@ -9,7 +9,7 @@ documentation: ug
# Notes in Vue Spreadsheet component
-The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [`enableNotes`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#enablenotes) property, which defaults to **true**.
+The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**.
When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes.
@@ -32,38 +32,103 @@ In the below example, you can add, edit, save, and delete notes.
In the active worksheet, you can add a note in the following ways:
-* To add a note, right-click the cell to open the context menu and choose the **"Add Note"** option from the context menu. This will open a dialog box to add the content as a note.
-* You can also use the `Shift` + `F2` keyboard shortcut to add a note to the desired cell. A dialog box will be opened to add the content as a note.
-* After entering the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+* **Context Menu**: Right-click the desired cell and select **Add Note**.
+* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
+* **Keyboard Shortcut**: Select the cell and press Shift + F2.
+* **Programmatically**:
+ * Use the `updateCell` method with the note model to add a note to a specific cell.
+ * Bind notes via code-behind during initial load by associating the note model with the cell model.
+
+A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box.
## Editing a note
-In the active worksheet, you can modify the content of existing notes in the document.
+In the active worksheet, you can modify the content of existing notes in the document:
+
+* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
+* **Keyboard Shortcut**: Select the cell containing the note and press Shift + F2.
-* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
-* Select the **"Edit Note"** option from the context menu.
-* You can also use the `Shift` + `F2` keyboard shortcut to edit the note of the desired cell. A dialog box will be opened to edit the note.
-* After editing the content in the dialog box, you can either click on other cells or press the `Esc` button on the keyboard to automatically save the note in the cell and close the dialog box.
+The note editor dialog box will open with the existing content. After editing the content, you can either click on other cells or press the Esc button to automatically save the changes and close the dialog box.
## Deleting a note
-In the active worksheet, right-click on the desired cell containing the note that you want to remove, which opens the context menu. In the context menu, select the **"Delete Note"** option to delete the note.
+You can remove notes from cells using the following ways:
+
+* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
+* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
+
+The note will be removed from the cell, and the red triangle indicator will be removed.
+## Navigating between notes
+
+The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab.
+
+### Previous Note
+
+To navigate to the previous note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
+* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
+* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+### Next Note
+
+To navigate to the next note:
+
+* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
+* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
+* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
+* If the workbook contains no notes, the selection remains on the current cell.
+
+This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
+
+## Show/Hide Note
+
+The **Show/Hide Note** option allows you to toggle the visibility of individual notes as sticky notes within the worksheet. When enabled, the note appears as a persistent floating text box, making it convenient to reference key information without hovering over the cell.
+
+To toggle the visibility of a note:
+
+* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
+* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
+
+**Behavior:**
+
+* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
+* **Sticky State (Visible)**: Toggling Show/Hide Note on a hidden note makes it visible as a sticky note, which remains on display even when navigating to other cells or selections.
+* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
+* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
+
+## Show All Notes
+
+The **Show All Notes** option enables you to display all notes in the current worksheet simultaneously as sticky notes, simplifying the review of multiple comments at a glance.
+
+To activate:
+
+* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
+
+All notes in the worksheet will appear as floating text boxes near their respective cells.
+
+> **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active.
+
+This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
+
## Saving the document with notes
-The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as MS Excel (.xlsx) and MS Excel 97-2003 (.xls).
+The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls).
> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available.
## Disabling notes
-To disable the note functionality, you need to set the [`enableNotes`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
+To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work.
@@ -84,6 +149,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet.
+In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event.
+
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% include code-snippet/spreadsheet/vue/note-cs3/app-composition.vue %}
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md
index a8b45ca057..998e673ad7 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md
@@ -44,9 +44,9 @@ Resize the selected form field using the resize handles on the field boundary. S
### Add Textbox
-1) Open the Form Designer toolbar.
-2) Select Textbox, then click/tap on the page to place it.
-3) Resize/move as needed and set properties in the property panel.
+- Open the Form Designer toolbar.
+- Select Textbox, then click/tap on the page to place it.
+- Resize/move as needed and set properties in the property panel.
@@ -77,9 +77,9 @@ pdfviewer.documentLoad = () => {
### Add Password
-1) Open the Form Designer toolbar.
-2) Select Password, then place it on the page.
-3) Configure tooltip, required, max length, etc.
+- Open the Form Designer toolbar.
+- Select Password, then place it on the page.
+- Configure tooltip, required, max length, etc.
@@ -110,9 +110,9 @@ pdfviewer.documentLoad = () => {
### Add CheckBox
-1) Choose CheckBox in the Form Designer toolbar.
-2) Click on the page to place, duplicate for multiple options if needed.
-3) Use property panel to set IsChecked, tooltip, and appearance.
+- Choose CheckBox in the Form Designer toolbar.
+- Click on the page to place, duplicate for multiple options if needed.
+- Use property panel to set IsChecked, tooltip, and appearance.
@@ -144,9 +144,9 @@ pdfviewer.documentLoad = () => {
### Add RadioButton
-1) Select RadioButton in the Form Designer toolbar.
-2) Place buttons sharing the same Name to create a group (e.g., Gender).
-3) Use property panel to set selection, colors, and tooltip.
+- Select RadioButton in the Form Designer toolbar.
+- Place buttons sharing the same Name to create a group (e.g., Gender).
+- Use property panel to set selection, colors, and tooltip.
@@ -185,9 +185,9 @@ pdfviewer.documentLoad = () => {
### Add ListBox
-1) Choose ListBox in the Form Designer toolbar.
-2) Place the field and add items in the property panel.
-3) Configure font, size, and selection behavior.
+- Choose ListBox in the Form Designer toolbar.
+- Place the field and add items in the property panel.
+- Configure font, size, and selection behavior.
@@ -225,9 +225,9 @@ pdfviewer.documentLoad = () => {
### Add DropDown
-1) Select DropDown in the Form Designer toolbar.
-2) Place the field, then add items via the property panel.
-3) Adjust appearance and default value.
+- Select DropDown in the Form Designer toolbar.
+- Place the field, then add items via the property panel.
+- Adjust appearance and default value.
@@ -265,9 +265,9 @@ pdfviewer.documentLoad = () => {
### Add Signature field
-1) Select Signature field in the Form Designer toolbar.
-2) Place the field where the signer should sign.
-3) Configure indicator text, thickness, tooltip, and required state.
+- Select Signature field in the Form Designer toolbar.
+- Place the field where the signer should sign.
+- Configure indicator text, thickness, tooltip, and required state.
@@ -298,9 +298,9 @@ pdfviewer.documentLoad = () => {
### Add Initial field
-1) Select Initial field in the Form Designer toolbar.
-2) Place the field where initials are required.
-3) Configure indicator text, tooltip, and required state.
+- Select Initial field in the Form Designer toolbar.
+- Place the field where initials are required.
+- Configure indicator text, tooltip, and required state.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
index 11e7785913..2874269dab 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
@@ -35,8 +35,8 @@ The PDF Viewer supports editing these field types:
### Edit Textbox
-1) Right-click the textbox → Properties.
-2) Change value, font, size, colors, border thickness, alignment, max length, multiline.
+- Right-click the textbox → Properties.
+- Change value, font, size, colors, border thickness, alignment, max length, multiline.
@@ -85,8 +85,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit Password
-1) Right-click the password field → Properties.
-2) Change tooltip, required, max length, font, and appearance.
+- Right-click the password field → Properties.
+- Change tooltip, required, max length, font, and appearance.
@@ -136,8 +136,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit CheckBox
-1) Right-click the checkbox → Properties.
-2) Toggle checked state, change border/background colors and thickness.
+- Right-click the checkbox → Properties.
+- Enable checked state.
@@ -180,8 +180,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit RadioButton
-1) Right-click a radio button → Properties.
-2) Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected.
+- Right-click a radio button → Properties.
+- Set selected state. Buttons with the same Name form a group; only one can be selected.
@@ -219,8 +219,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit ListBox
-1) Right-click the list box → Properties.
-2) Add/remove items, set selection, and adjust fonts and colors.
+- Right-click the list box → Properties.
+- Add/remove items, set selection, and adjust fonts and colors.
@@ -269,8 +269,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit DropDown
-1) Right-click the dropdown → Properties.
-2) Add/remove items, set default value, and adjust appearance.
+- Right-click the dropdown → Properties.
+- Add/remove items, set default value, and adjust appearance.
@@ -319,8 +319,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit Signature field
-1) Right-click the signature field → Properties.
-2) Change tooltip, thickness, indicator text, required/visibility states.
+- Right-click the signature field → Properties.
+- Change tooltip, thickness, indicator text, required/visibility states.
@@ -364,8 +364,8 @@ pdfviewer.appendTo('#PdfViewer');
### Edit Initial field
-1) Right-click the initial field → Properties.
-2) Change tooltip, indicator text, thickness, and required/visibility states.
+- Right-click the initial field → Properties.
+- Change tooltip, indicator text, thickness, and required/visibility states.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
index 388659e916..6677891532 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
@@ -17,9 +17,9 @@ You can remove designed form fields directly from the Form Designer toolbar.
Steps:
-1) Select the target form field on the page.
-2) Click the Delete Form Field icon on the Form Designer toolbar.
-3) Alternatively, press the `Delete key` after selecting one or more fields.
+- Select the target form field on the page.
+- Click the Delete Form Field icon on the Form Designer toolbar.
+- Alternatively, press the `Delete key` after selecting one or more fields.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
index ac25f2b1d3..727e1fb8be 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
@@ -17,85 +17,137 @@ The PDF Viewer components provides support to control user interaction and outpu
You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values.
-## isReadOnly
+
-Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code.
+## Make Form Fields Read‑Only
-- Creation
-```ts
-pdfviewer.formDesignerModule.addFormField('Textbox', {
- name: 'EmployeeId',
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
- isReadOnly: true,
- value: 'EMP-0001'
-} as TextFieldSettings);
-```
+Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. Use the following code-snippets to make form fields read-only.
-- Update existing field
```ts
-const field = pdfviewer.formFieldCollections.find(f => f.name === 'EmployeeId');
-if (field) {
- pdfviewer.formDesignerModule.updateFormField(field, { isReadOnly: false } as TextFieldSettings);
-}
-```
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
-- Default for new Textbox fields
-```ts
-pdfviewer.textFieldSettings = { isReadOnly: true };
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+//Use this setting to make Read-only as Default for new Textbox fields
+//pdfviewer.textFieldSettings = { isReadOnly: true };
+
+pdfviewer.documentLoad = () => {
+ // Read-only Textbox
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ value: 'EMP-0001'
+ } as TextFieldSettings);
+
+ // Read-only Signature field
+ pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isReadOnly: true,
+ tooltip: 'Sign to accept the terms'
+ } as SignatureFieldSettings);
+};
```
-## isRequired
+## Mark Fields as Required
Use `isRequired` to mark fields as mandatory so they participate in validation during print/download. Turn on validation with enableFormFieldsValidation and handle validateFormFields to block actions if required fields are empty.
-- Creation
```ts
-pdfviewer.formDesignerModule.addFormField('Textbox', {
- name: 'Email',
- bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
- isRequired: true,
- tooltip: 'Email is required'
-} as TextFieldSettings);
-```
+import {
+ PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
+ TextFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields
+);
+
+// Create and configure the viewer
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+// 1) Default for new Textbox fields
+pdfviewer.textFieldSettings = { isRequired: true };
-- Validation wiring
-```ts
+// 2) Validation wiring
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.validateFormFields = (args: any) => {
- //validateFormFields event triggers when fields are empty.
- alert("Please fill all required fields. Missing: "+args.formField[0].name);
+ // Triggers when required fields are empty on submit/validate
+ if (args && args.formField && args.formField.length > 0) {
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
};
-```
-- Default for new Textbox fields
-```ts
-pdfviewer.textFieldSettings = { isRequired: true };
+// 3) Creation (add a Textbox form field once the document is loaded)
+pdfviewer.documentLoad = () => {
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+ } as TextFieldSettings);
+};
+
+// Mount the viewer
+pdfviewer.appendTo('#pdfViewer'); // Ensure an element with id="pdfViewer" exists in your HTML
```
-## isPrint
+## Control Field Print Behavior
Use `isPrint` to control whether a field’s appearance is included when printing the PDF from the viewer.
-- Creation (do not print a signature field)
```ts
-pdfviewer.formDesignerModule.addFormField('SignatureField', {
- name: 'ApplicantSign',
- bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
- isPrint: false
-} as SignatureFieldSettings);
-```
+// npm install @syncfusion/ej2-pdfviewer
-- Update existing field
-```ts
-const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign');
-if (sign) {
- pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as SignatureFieldSettings);
-}
-```
+import {
+ PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
+ SignatureFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
-- Default for new signature fields
-```ts
+PdfViewer.Inject(
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields
+);
+
+// Create and configure the viewer
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+
+// 1) Default for new signature fields
pdfviewer.signatureFieldSettings = { isPrint: false };
+
+// 2) Creation (do not print a signature field)
+pdfviewer.documentLoad = () => {
+ pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isPrint: false
+ } as SignatureFieldSettings);
+
+ // 3) Update existing field (toggle to print)
+ const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign');
+ if (sign) {
+ pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as SignatureFieldSettings);
+ }
+};
+
+pdfviewer.appendTo('#pdfViewer'); // Ensure exists
```
N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output.
@@ -215,9 +267,9 @@ pdfviewer.signatureFieldSettings = {
## Behavior notes
-- isReadOnly only blocks user edits in the UI. You can still update the field programmatically.
-- isRequired participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
-- isPrint controls field appearance in the print output. It does not affect download/export unless printing is triggered.
+- Use `isReadOnly` API to only blocks user edits in the UI. You can still update the field programmatically.
+- Use `isRequired` API to participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
+- Use `isPrint` API controls field appearance in the print output. It does not affect download/export unless printing is triggered.
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md
new file mode 100644
index 0000000000..95203f587f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in TypeScript | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion TypeScript PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer and Toolbar Customization in TypeScript
+
+## Form Designer
+
+Create and customize interactive fields directly on the PDF page.
+- Add fields: textbox, checkbox, radio button, dropdown, list box, signature, and initials
+- Edit quickly: move, resize, align, distribute, copy/paste, undo/redo
+- Configure properties: name, value, font, color, border, alignment, required/read-only/visibility, tab order
+- Control interaction: toggle read-only, show/hide, and manage printing behavior
+- Manage fields: select, group/ungroup, reorder, or delete
+- Save and print: persist designed fields in the PDF and print with appearances
+- Tailor the UI: show/hide or customize the Form Designer toolbar; handle events for add/edit/select/move/resize
+- The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+```
+
+
+
+## Show or hide the form designer toolbar
+
+Show or hide the form designer toolbar programmatically during initialization or at runtime.
+
+Use the [EnableFormDesigner](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to toggle visibility.
+
+The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation,
+ ej.pdfviewer.Annotation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
+ ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
+);
+
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+ enableFormDesigner: false,
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+});
+
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ Essential JS 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## How to customize the form designer toolbar
+
+Choose which tools appear and control their order in the form designer toolbar.
+
+Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formDesignerToolbarItem) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+
+The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation,
+ ej.pdfviewer.Annotation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView,
+ ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,
+ ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner);
+
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+});
+
+pdfviewer.toolbarSettings = {
+ formDesignerToolbarItems: [
+ "TextboxTool",
+ "PasswordTool",
+ "CheckBoxTool",
+ "RadioButtonTool",
+ "DropdownTool",
+ "ListboxTool",
+ "DrawSignatureTool",
+ "DeleteTool"
+ ]
+};
+
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ Essential JS 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
index 58e17880ee..7a02452415 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
@@ -12,6 +12,27 @@ domainurl: ##DomainURL##
The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
+## Form Fields
+
+Work with the runtime form fields present in a PDF Form.
+- Render existing fields
+- Fill fields.
+- Import/Export form data as JSON, XFDF, FDF, or as a plain object
+- Inject FormFields to enable form-filling features.
+
+Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+```
+
+
+
The PDF Viewer supports the following form field types:
* Text box
@@ -23,7 +44,7 @@ The PDF Viewer supports the following form field types:
* Signature field
* Initial field
-
+
## Disabling form fields
@@ -42,7 +63,7 @@ pdfviewer.enableFormDesigner = false; //To disable Form Desinger
pdfviewer.appendTo('#PdfViewer');
```
-## Access interactive form fields
+## Access form fields
You can access the collection of all interactive form fields in the loaded document using the `formFieldCollection` property. Fetch the collection after the document is loaded.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
index 2250de7dde..0665bb14ca 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
@@ -137,7 +137,7 @@ document.getElementById('exportObj')!.addEventListener('click', () => {
- Export as JSON for easy integration with REST APIs.
- Export as FDF/XFDF for interoperability with other PDF tools.
- Export as object to combine with your app state and store securely.
-- Automate exports after validation using validateFormFields.
+- Automate exports after [validation](../form-validation) using validateFormFields.
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
index 2f20c84c0f..ffb458aee7 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
@@ -94,7 +94,7 @@ document.getElementById('importJson')!.addEventListener('click', () => {
## Import as Object
-Import data previously exported with exportFormFieldsAsObject. Useful for client-side roundtrips without writing a file.
+Import data previously exported with exportFormFieldsAsObject. Useful for client-side round trips without writing a file.
```html
@@ -137,7 +137,7 @@ document.getElementById('importData')!.addEventListener('click', () => {
- Pre-fill application forms from your database using JSON.
- Migrate data from other PDF tools using FDF/XFDF.
- Restore user progress stored locally or on the server using object import.
-- Combine with validation to block print/download until required fields are filled.
+- Combine with [validation](../form-validation) to block print/download until required fields are filled.
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
index 4866709a1d..e17e8a8232 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
@@ -11,23 +11,52 @@ documentation: ug
Syncfusion TypeScript PDF Viewer provides a complete forms experience. Design new forms or enhance existing PDFs, fill and validate fields, import or export data, and capture signatures — all via an intuitive UI and rich APIs.
+The viewer supports both runtime form filling and an interactive Form Designer to create or modify fields.
+
+## Form Fields
+
+Work with the runtime form fields present in a PDF Form.
+- Render existing fields
+- Fill fields.
+- Import/Export form data as JSON, XFDF, FDF, or as a plain object
+- Inject FormFields to enable form-filling features.
+
+Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+```
+
+
+
## Form Designer
Create and customize interactive fields directly on the PDF page.
- Add fields: textbox, checkbox, radio button, dropdown, list box, signature, and initials
- Edit quickly: move, resize, align, distribute, copy/paste, undo/redo
- Configure properties: name, value, font, color, border, alignment, required/read-only/visibility, tab order
+- Control interaction: toggle read-only, show/hide, and manage printing behavior
- Manage fields: select, group/ungroup, reorder, or delete
- Save and print: persist designed fields in the PDF and print with appearances
-- Tailor the UI: show/hide or customize the Form Designer toolbar, and handle events for add/edit/select/move/resize
+- Tailor the UI: show/hide or customize the Form Designer toolbar; handle events for add/edit/select/move/resize
-## Form Fields
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
-Work with the runtime form fields present in a PDF (AcroForm).
-- Parse and render existing fields
-- Fill fields and validate input (required, read-only, print visibility)
-- Import/Export form data as JSON, XFDF, FDF, or as a plain object
-- Control interaction: toggle read-only, show/hide, and manage printing behavior
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+```
+
+
## Supported form field types
@@ -43,7 +72,7 @@ Work with the runtime form fields present in a PDF (AcroForm).
## Typical workflows
- Design → Save → Fill: create or modify fields, save them into the PDF, then fill and validate
-- Fill → Export/Import: complete forms and export data to JSON/XFDF/FDF, or import data to prefill
+- Fill → Export/Import: complete forms and export data to JSON/XFDF/FDF, or import data to fill
- Customize → Integrate: wire up events and business rules; tailor the designer toolbar for your app
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
index 5d39df28d0..10330a0985 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Add custom fonts in PDF Viewer
+# Add custom fonts in TypeScript PDF Viewer
The TypeScript PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.
@@ -20,35 +20,26 @@ To use custom fonts in the Syncfusion PDF Viewer, add the custom TTF files to th
Steps to add custom fonts
-**Step 1:** Add custom TTF font files to the resource URL path referenced in the application. For example, place the TTF files in the ej2-pdfviewer-lib folder that serves as the resource URL path.
+**Step 1:** Add custom TTF font files to the resource URL path referenced in the application. For example, place the TTF files in the [ej2-pdfviewer-lib](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started#add-the-pdf-viewer-component) folder that serves as the resource URL path. Make sure this resource URL points to a local path in your application. You may:
+- Place fonts directly under `ej2-pdfviewer-lib` or under `ej2-pdfviewer-lib/fallback fonts`. Reference them by relative path in `customFonts` (e.g., `"calibri.ttf"`, `"fallback fonts/calibri.ttf"`).
+- Or use a direct absolute URL to the font file if it’s hosted and CORS-accessible.
**Step 2:** Use the following code to configure custom fonts in the PDF Viewer.
{% tabs %}
-{% highlight js tabtitle="Standalone" %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-let viewer: PdfViewer = new PdfViewer();
-PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.resourceUrl:'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-viewer.customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-//PDF Viewer control rendering starts
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = window.location.origin + "/resources/ej2-pdfviewer-lib";
+pdfviewer.customFonts = ["simsun.ttc", "sumsinb.ttf", "arial/arialbd.ttf", "arial/arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
pdfviewer.appendTo('#PdfViewer');
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-let viewer: PdfViewer = new PdfViewer();
-PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-viewer.customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
-
-
//PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.gif
new file mode 100644
index 0000000000..6aa85dc17c
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.png
new file mode 100644
index 0000000000..70ac22677b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormDesigner.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFields.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFields.gif
new file mode 100644
index 0000000000..4c61ea33e7
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFields.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFill.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFill.png
new file mode 100644
index 0000000000..e28aacb853
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/FormFill.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/addformfield.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/addformfield.gif
index 88f70cbb40..221fb990dc 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/addformfield.gif and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/addformfield.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/dragformfield.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/dragformfield.gif
index 97666468f1..dc9809b23f 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/dragformfield.gif and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/dragformfield.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/resizeformfield.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/resizeformfield.gif
index 06d97cf673..a48d887fdf 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/resizeformfield.gif and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/resizeformfield.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png
index 41130691ed..cc5753272d 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-form-constraint.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-form-constraint.png
new file mode 100644
index 0000000000..53e4169bb1
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-form-constraint.png differ
diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/comment-cs1/commentController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/comment-cs1/commentController.cs
new file mode 100644
index 0000000000..0e38520468
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/comment-cs1/commentController.cs
@@ -0,0 +1,31 @@
+public IActionResult Open(IFormCollection openRequest)
+{
+ OpenRequest open = new OpenRequest();
+ open.File = openRequest.Files[0];
+ return Content(Workbook.Open(open));
+}
+
+public IActionResult Save(SaveSettings saveSettings)
+{
+ return Workbook.Save(saveSettings);
+}
+
+public IActionResult Index()
+{
+ List