diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index a78fc3301..8c5be387e 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -4863,6 +4863,7 @@
  • Filtering
  • Sorting
  • Hyperlink
  • +
  • Comment
  • Notes
  • Clipboard
  • Selection
  • @@ -5053,6 +5054,7 @@
  • Filtering
  • Sorting
  • Hyperlink
  • +
  • Comment
  • Notes
  • Clipboard
  • Selection
  • diff --git a/Document-Processing/Excel/Spreadsheet/Angular/comment.md b/Document-Processing/Excel/Spreadsheet/Angular/comment.md new file mode 100644 index 000000000..43f35f1b8 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/comment.md @@ -0,0 +1,201 @@ +--- +layout: post +title: Comment in Angular Spreadsheet component | Syncfusion +description: Learn here all about Comment feature in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Comment +documentation: ug +--- + +# Comment in Angular Spreadsheet component +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. + +![Spreadsheet showing a comment](./images/spreadsheet_comment.png) + +## 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 { Component } from '@angular/core'; + import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; + + @Component({ + selector: 'app-root', + standalone: true, + imports: [SpreadsheetAllModule], + // Set the author name. If not set, "Guest User" will be shown by default.. + template: `` + }) + export class AppComponent { + // Place the Author Name Here + public author: string = 'Author Name'; + } +``` +>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 comment in Spreadsheet](./images/spreadsheet_adding_a_comment.gif) + +## 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. + +![Adding a reply in Spreadsheet](./images/spreadsheet_comment_reply.png) + +## 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**. + +![Editing a comment reply in Spreadsheet](./images/spreadsheet_edit_comment.png) + +## 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. + +![Resolve and reopen in Spreadsheet](./images/spreadsheet_resolve_reopen.gif) + +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 + this.spreadsheetObj.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. + +![Deleting a comment thread in Spreadsheet](./images/spreadsheet_delete_comment.png) + +### Delete a reply +In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**. + +![Deleting a comment reply in Spreadsheet](./images/spreadsheet_delete-reply_comment.png) + +## 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. + +![Next and Previous comments in Spreadsheet](./images/spreadsheet_next_previous_comment.png) + +## 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**. + +![Show comments in Spreadsheet](./images/spreadsheet_show_comments.gif) + +### 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 ts tabtitle="app.component.ts" %} +{% include code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts %} +{% endhighlight %} + +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/comment-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/samples/spreadsheet/angular/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/Angular/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_adding_a_comment.gif new file mode 100644 index 000000000..863da7a34 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_adding_a_comment.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment.png new file mode 100644 index 000000000..b002a6db3 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment_reply.png new file mode 100644 index 000000000..548694016 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_comment_reply.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete-reply_comment.png new file mode 100644 index 000000000..f2385a4f9 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete-reply_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete_comment.png new file mode 100644 index 000000000..0c0ff11f1 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_delete_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_edit_comment.png new file mode 100644 index 000000000..2874b11cb Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_edit_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_next_previous_comment.png new file mode 100644 index 000000000..ece81c396 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_next_previous_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_resolve_reopen.gif new file mode 100644 index 000000000..1307efbbb Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_resolve_reopen.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_show_comments.gif new file mode 100644 index 000000000..d033c0c9a Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet_show_comments.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md index 01142c092..77f82da3e 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/keyboard-shortcuts.md @@ -107,6 +107,7 @@ The keyboard shortcuts supported in the spreadsheet are, | Shift + Enter | Complete the cell editing and select the cell above in the same column. | | Tab | Complete the cell editing and select the next cell in the same row. | | Shift + Tab | Complete the cell editing and select the previous cell in the same row. | +| Ctrl + Shift + F2 | Opens the comment editor for the active cell. Upon pressing the `Esc` key, the comment editor in focus will close. | | Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | | Alt | Focus on the active ribbon tab. | | Left | Move the focus to the previous items in the ribbon content. | diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/comment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/comment.md new file mode 100644 index 000000000..d5d264e9b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/comment.md @@ -0,0 +1,195 @@ +--- +layout: post +title: Comment in EJ2 TypeScript Spreadsheet control | Syncfusion +description: Learn here all about Comment feature in Syncfusion EJ2 TypeScript Spreadsheet control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Comment +documentation: ug +--- + +# Comment in EJ2 TypeScript 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. + +![Spreadsheet showing a comment](./images/spreadsheet_comment.png) + +## 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 { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; + // Initialize Spreadsheet component + const spreadsheet: Spreadsheet = new 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 comment in Spreadsheet](./images/spreadsheet_adding_a_comment.gif) + +## 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. + +![Adding a reply in Spreadsheet](./images/spreadsheet_comment_reply.png) + +## 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**. + +![Editing a comment reply in Spreadsheet](./images/spreadsheet_edit_comment.png) + +## 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. + +![Resolve and reopen in Spreadsheet](./images/spreadsheet_resolve_reopen.gif) + +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. + +![Deleting a comment thread in Spreadsheet](./images/spreadsheet_delete_comment.png) + +### Delete a reply +In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**. + +![Deleting a comment reply in Spreadsheet](./images/spreadsheet_delete-reply_comment.png) + +## 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. + +![Next and Previous comments in Spreadsheet](./images/spreadsheet_next_previous_comment.png) + +## 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**. + +![Show comments in Spreadsheet](./images/spreadsheet_show_comments.gif) + +### 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 ts tabtitle="index.ts" %} +{% include code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/comemnt-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-ES6/images/spreadsheet_adding_a_comment.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_adding_a_comment.gif new file mode 100644 index 000000000..863da7a34 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_adding_a_comment.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment.png new file mode 100644 index 000000000..b002a6db3 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment_reply.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment_reply.png new file mode 100644 index 000000000..548694016 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_comment_reply.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete-reply_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete-reply_comment.png new file mode 100644 index 000000000..f2385a4f9 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete-reply_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete_comment.png new file mode 100644 index 000000000..0c0ff11f1 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_delete_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_edit_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_edit_comment.png new file mode 100644 index 000000000..2874b11cb Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_edit_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_next_previous_comment.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_next_previous_comment.png new file mode 100644 index 000000000..ece81c396 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_next_previous_comment.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_resolve_reopen.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_resolve_reopen.gif new file mode 100644 index 000000000..1307efbbb Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_resolve_reopen.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_show_comments.gif b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_show_comments.gif new file mode 100644 index 000000000..d033c0c9a Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet_show_comments.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/keyboard-shortcuts.md index c997bad60..6a6669c1e 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/keyboard-shortcuts.md @@ -107,6 +107,7 @@ The keyboard shortcuts supported in the spreadsheet are, | Shift + Enter | Complete the cell editing and select the cell above in the same column. | | Tab | Complete the cell editing and select the next cell in the same row. | | Shift + Tab | Complete the cell editing and select the previous cell in the same row. | +| Ctrl + Shift + F2 | Opens the comment editor for the active cell. Upon pressing the `Esc` key, the comment editor in focus will close. | | Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | | Alt | Focus on the active ribbon tab. | | Left | Move the focus to the previous items in the ribbon content. | diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/angular.json new file mode 100644 index 000000000..98b735ee4 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/index.html new file mode 100644 index 000000000..e57f94347 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/index.html @@ -0,0 +1,31 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
    LOADING....
    +
    + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts new file mode 100644 index 000000000..cd5eae20b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts @@ -0,0 +1,115 @@ +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' + +import { Component, ViewChild } from '@angular/core'; +import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet'; +import { shipmentData } from './datasource'; + +@Component({ + imports: [ + SpreadsheetAllModule + ], + + standalone: true, + selector: 'app-container', + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` +}) +export class AppComponent { + @ViewChild('spreadsheet') + spreadsheetObj: SpreadsheetComponent | undefined; + data: object[] = shipmentData; + public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'; + public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'; + + created() { + this.spreadsheetObj!.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Shipment Details!A1:F1'); + // Add comment using updateCell method. + this.spreadsheetObj!.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Validate customer name for Order 10249.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Confirmed as Karin Josephs', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Perfect, noted.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!B3'); + this.spreadsheetObj!.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Verify address details for delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: true, replies: [{ author: 'Julius Gorner', text: 'Address confirmed as Boulevard Tirou, 255.', createdTime: 'November 18, 2025 at 4:30 PM' }] + } + }, 'Shipment Details!C6'); + this.spreadsheetObj!.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Confirm country for Order 10255 delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Country verified as Switzerland.', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Acknowledged.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!D9'); + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/datasource.ts new file mode 100644 index 000000000..240e4a4a9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/datasource.ts @@ -0,0 +1,16 @@ +/** + * Comment Shipment details data source + */ +export let shipmentData: Object[] = [ + { 'Order ID': 10248, 'Customer Name': 'Paul Henriot', 'Address': '59 rue de l Abbaye', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10249, 'Customer Name': 'Karin Josephs', 'Address': 'Luisenstr. 48', 'Country': 'Germany', 'Status': 'Delivered' }, + { 'Order ID': 10250, 'Customer Name': 'Mario Pontes', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10251, 'Customer Name': 'Mary Saveley', 'Address': '2, rue du Commerce', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10252, 'Customer Name': 'Pascale Cartrain', 'Address': 'Boulevard Tirou, 255', 'Country': 'Belgium', 'Status': 'Shipped' }, + { 'Order ID': 10253, 'Customer Name': 'Carlos Hernández', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Cancelled' }, + { 'Order ID': 10254, 'Customer Name': 'Yang Wang', 'Address': 'Hauptstr. 31', 'Country': 'Switzerland', 'Status': 'Pending' }, + { 'Order ID': 10255, 'Customer Name': 'Antonio Moreno', 'Address': 'Starenweg 5', 'Country': 'Switzerland', 'Status': 'Delivered' }, + { 'Order ID': 10256, 'Customer Name': 'Paula Parente', 'Address': 'Rua do Mercado, 12', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10257, 'Customer Name': 'Michael Holz', 'Address': 'Carrera 22 con Ave.', 'Country': 'Venezuela', 'Status': 'Delivered' }, + { 'Order ID': 10258, 'Customer Name': 'Roland Mendel', 'Address': 'Kirchgasse 6', 'Country': 'Austria', 'Status': 'Cancelled' } +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/main.ts new file mode 100644 index 000000000..3607237bd --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/styles.css new file mode 100644 index 000000000..59140c333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/src/styles.css @@ -0,0 +1,19 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; + +@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/tsconfig.json new file mode 100644 index 000000000..9fa16d633 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/comment-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/datasource.ts new file mode 100644 index 000000000..59abf1326 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/datasource.ts @@ -0,0 +1,16 @@ +/** + * Comment Shipment details data source + */ +export let shipmentData: Object[] = [ + { 'Order ID': 10248, 'Customer Name': 'Paul Henriot', 'Address': '59 rue de l Abbaye', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10249, 'Customer Name': 'Karin Josephs', 'Address': 'Luisenstr. 48', 'Country': 'Germany', 'Status': 'Delivered' }, + { 'Order ID': 10250, 'Customer Name': 'Mario Pontes', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10251, 'Customer Name': 'Mary Saveley', 'Address': '2, rue du Commerce', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10252, 'Customer Name': 'Pascale Cartrain', 'Address': 'Boulevard Tirou, 255', 'Country': 'Belgium', 'Status': 'Shipped' }, + { 'Order ID': 10253, 'Customer Name': 'Carlos Hernández', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Cancelled' }, + { 'Order ID': 10254, 'Customer Name': 'Yang Wang', 'Address': 'Hauptstr. 31', 'Country': 'Switzerland', 'Status': 'Pending' }, + { 'Order ID': 10255, 'Customer Name': 'Antonio Moreno', 'Address': 'Starenweg 5', 'Country': 'Switzerland', 'Status': 'Delivered' }, + { 'Order ID': 10256, 'Customer Name': 'Paula Parente', 'Address': 'Rua do Mercado, 12', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10257, 'Customer Name': 'Michael Holz', 'Address': 'Carrera 22 con Ave.', 'Country': 'Venezuela', 'Status': 'Delivered' }, + { 'Order ID': 10258, 'Customer Name': 'Roland Mendel', 'Address': 'Kirchgasse 6', 'Country': 'Austria', 'Status': 'Cancelled' } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/es5-datasource.js new file mode 100644 index 000000000..edc8bf1df --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/es5-datasource.js @@ -0,0 +1,16 @@ +/** + * Comment Shipment details data source + */ +var shipmentData = [ + { 'Order ID': 10248, 'Customer Name': 'Paul Henriot', 'Address': '59 rue de l Abbaye', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10249, 'Customer Name': 'Karin Josephs', 'Address': 'Luisenstr. 48', 'Country': 'Germany', 'Status': 'Delivered' }, + { 'Order ID': 10250, 'Customer Name': 'Mario Pontes', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10251, 'Customer Name': 'Mary Saveley', 'Address': '2, rue du Commerce', 'Country': 'France', 'Status': 'Delivered' }, + { 'Order ID': 10252, 'Customer Name': 'Pascale Cartrain', 'Address': 'Boulevard Tirou, 255', 'Country': 'Belgium', 'Status': 'Shipped' }, + { 'Order ID': 10253, 'Customer Name': 'Carlos Hernández', 'Address': 'Rua do Paço, 67', 'Country': 'Brazil', 'Status': 'Cancelled' }, + { 'Order ID': 10254, 'Customer Name': 'Yang Wang', 'Address': 'Hauptstr. 31', 'Country': 'Switzerland', 'Status': 'Pending' }, + { 'Order ID': 10255, 'Customer Name': 'Antonio Moreno', 'Address': 'Starenweg 5', 'Country': 'Switzerland', 'Status': 'Delivered' }, + { 'Order ID': 10256, 'Customer Name': 'Paula Parente', 'Address': 'Rua do Mercado, 12', 'Country': 'Brazil', 'Status': 'Shipped' }, + { 'Order ID': 10257, 'Customer Name': 'Michael Holz', 'Address': 'Carrera 22 con Ave.', 'Country': 'Venezuela', 'Status': 'Delivered' }, + { 'Order ID': 10258, 'Customer Name': 'Roland Mendel', 'Address': 'Kirchgasse 6', 'Country': 'Austria', 'Status': 'Cancelled' } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.html new file mode 100644 index 000000000..1faa56632 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.html @@ -0,0 +1,37 @@ + + + + + EJ2 SpreadSheet Comment Sample + + + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.js new file mode 100644 index 000000000..d8288327d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.js @@ -0,0 +1,105 @@ +ej.base.enableRipple(true); + +var sheets = [{ + name: 'Shipment Details', + ranges: [{ dataSource: shipmentData }], + columns: [{ width: 80 }, { width: 130 }, { width: 150 }, { width: 100 }, { width: 100 }], + // Attach comment to the specific cells + rows: [{ + index: 1, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Confirm delivery status for Order 10248.', createdTime: 'November 18, 2025 at 3:00 PM', + isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Status verified as delivered.', createdTime: 'November 18, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Acknowledged, thank you.', createdTime: 'November 18, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 3, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10250 is marked as Shipped, any update on current status?', createdTime: 'November 16, 2025 at 9:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Shipment is in transit.', createdTime: 'November 17, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Thanks for the update.', createdTime: 'November 17, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 6, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Reason for cancellation of Order 10253?', createdTime: 'November 18, 2025 at 1:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer requested cancellation.', createdTime: 'November 18, 2025 at 1:30 PM' }, + { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 3:15 PM' }] + } + }] + }, + { + index: 7, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Pending status for Order 10254 - any progress?', createdTime: 'November 19, 2025 at 3:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Awaiting customs clearance.', createdTime: 'November 19, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Please keep me posted,', createdTime: 'November 19, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 9, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10256 shipped, tracking details shared?', createdTime: 'November 18, 2025 at 3:00 AM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Tracking sent via email,', createdTime: 'November 18, 2025 at 3:30 AM' }, + { author: 'Julius Gorner', text: 'Received, thank you,', createdTime: 'November 18, 2025 at 3:45 AM' }] + } + }] + }, + { + index: 10, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Delivered order 10257, confirm recipient name.', createdTime: 'November 18, 2025 at 2:00 PM', + isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Recipient verified as Michael Holz.', createdTime: 'November 18, 2025 at 2:30 PM' }, + { author: 'Julius Gorner', text: 'Great, noted.', createdTime: 'November 18, 2025 at 2:45 PM' }] + } + }] + }, + { + index: 11, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10258 cancelled, reason documented?', createdTime: 'November 18, 2025 at 12:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer changed requirements', createdTime: 'November 18, 2025 at 12:30 PM' }, + { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 12:45 PM' }] + } + }] + }], +}]; + +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + showCommentsPane: true, // Show the comments review pane on initial rendering + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', + sheets: sheets, + created: function () { + spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Shipment Details!A1:F1'); + // Add comment using updateCell. + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Validate customer name for Order 10249.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Confirmed as Karin Josephs', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Perfect, noted.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!B3'); + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Verify address details for delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: true, replies: [{ author: 'Julius Gorner', text: 'Address confirmed as Boulevard Tirou, 255.', createdTime: 'November 18, 2025 at 4:30 PM' }] + } + }, 'Shipment Details!C6'); + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Confirm country for Order 10255 delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Country verified as Switzerland.', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Acknowledged.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!D9'); + } +}); +// Render the Spreadsheet +spreadsheet.appendTo('#spreadsheet'); + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.ts new file mode 100644 index 000000000..9c146ce34 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/index.ts @@ -0,0 +1,105 @@ +import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet'; +import { shipmentData } from './datasource.ts'; + +let sheets: SheetModel[] = [{ + name: 'Shipment Details', + ranges: [{ dataSource: shipmentData }], + columns: [{ width: 80 }, { width: 130 }, { width: 150 }, { width: 100 }, { width: 100 }], + // Attach comment to the specific cells + rows: [{ + index: 1, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Confirm delivery status for Order 10248.', createdTime: 'November 18, 2025 at 3:00 PM', + isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Status verified as delivered.', createdTime: 'November 18, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Acknowledged, thank you.', createdTime: 'November 18, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 3, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10250 is marked as Shipped, any update on current status?', createdTime: 'November 16, 2025 at 9:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Shipment is in transit.', createdTime: 'November 17, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Thanks for the update.', createdTime: 'November 17, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 6, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Reason for cancellation of Order 10253?', createdTime: 'November 18, 2025 at 1:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer requested cancellation.', createdTime: 'November 18, 2025 at 1:30 PM' }, + { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 3:15 PM' }] + } + }] + }, + { + index: 7, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Pending status for Order 10254 - any progress?', createdTime: 'November 19, 2025 at 3:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Awaiting customs clearance.', createdTime: 'November 19, 2025 at 3:30 PM' }, + { author: 'Julius Gorner', text: 'Please keep me posted,', createdTime: 'November 19, 2025 at 3:45 PM' }] + } + }] + }, + { + index: 9, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10256 shipped, tracking details shared?', createdTime: 'November 18, 2025 at 3:00 AM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Tracking sent via email,', createdTime: 'November 18, 2025 at 3:30 AM' }, + { author: 'Julius Gorner', text: 'Received, thank you,', createdTime: 'November 18, 2025 at 3:45 AM' }] + } + }] + }, + { + index: 10, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Delivered order 10257, confirm recipient name.', createdTime: 'November 18, 2025 at 2:00 PM', + isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Recipient verified as Michael Holz.', createdTime: 'November 18, 2025 at 2:30 PM' }, + { author: 'Julius Gorner', text: 'Great, noted.', createdTime: 'November 18, 2025 at 2:45 PM' }] + } + }] + }, + { + index: 11, cells: [{ + index: 4, comment: { + author: 'Julius Gorner', text: 'Order 10258 cancelled, reason documented?', createdTime: 'November 18, 2025 at 12:00 PM', + isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer changed requirements', createdTime: 'November 18, 2025 at 12:30 PM' }, + { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 12:45 PM' }] + } + }] + }], +}]; + +let spreadsheet: Spreadsheet = new Spreadsheet({ + showCommentsPane: true, // Show the comments review pane on initial rendering + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', + sheets: sheets, + created: (): void => { + spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Shipment Details!A1:F1'); + // Add comment using updateCell. + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Validate customer name for Order 10249.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Confirmed as Karin Josephs', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Perfect, noted.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!B3'); + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Verify address details for delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: true, replies: [{ author: 'Julius Gorner', text: 'Address confirmed as Boulevard Tirou, 255.', createdTime: 'November 18, 2025 at 4:30 PM' }] + } + }, 'Shipment Details!C6'); + spreadsheet.updateCell({ + comment: { + author: 'Cristi Espinos', text: 'Confirm country for Order 10255 delivery.', createdTime: 'November 18, 2025 at 4:00 PM', + isResolved: false, replies: [{ author: 'Julius Gorner', text: 'Country verified as Switzerland.', createdTime: 'November 18, 2025 at 4:30 PM' }, + { author: 'Cristi Espinos', text: 'Acknowledged.', createdTime: 'November 18, 2025 at 5:30 PM' }] + } + }, 'Shipment Details!D9'); + } +}); +// Render the Spreadsheet +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/styles.css new file mode 100644 index 000000000..49d610a86 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/styles.css @@ -0,0 +1,15 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 425px; +} diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/system.config.js new file mode 100644 index 000000000..f0a1ac98d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/comemnt-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file