From 77984c75e5ec81c6940d89102e7f9c8642533bbc Mon Sep 17 00:00:00 2001 From: gopinathan-sf4977 Date: Fri, 19 Dec 2025 15:59:32 +0530 Subject: [PATCH 1/4] 999367: Updated Notes UG to Hotfix JS, React, Vue, Core and MVC --- .../Excel/Spreadsheet/ASP-NET-CORE/notes.md | 89 +++++++++++++++--- .../Excel/Spreadsheet/ASP-NET-MVC/notes.md | 91 +++++++++++++++--- .../Excel/Spreadsheet/Javascript-ES5/notes.md | 93 ++++++++++++++++--- .../Excel/Spreadsheet/React/notes.md | 91 +++++++++++++++--- .../Excel/Spreadsheet/Vue/notes.md | 91 +++++++++++++++--- .../spreadsheet/asp-net-core/note-cs3/razor | 7 +- .../asp-net-core/note-cs3/tagHelper | 9 +- .../spreadsheet/asp-net-mvc/note-cs3/razor | 7 +- .../asp-net-mvc/note-cs3/tagHelper | 9 +- .../javascript-es5/note-cs1/index.html | 8 +- .../javascript-es5/note-cs1/system.config.js | 2 +- .../javascript-es5/note-cs2/index.html | 8 +- .../javascript-es5/note-cs2/system.config.js | 2 +- .../javascript-es5/note-cs3/index.html | 8 +- .../javascript-es5/note-cs3/index.js | 12 +-- .../javascript-es5/note-cs3/index.ts | 12 +-- .../javascript-es5/note-cs3/system.config.js | 2 +- .../spreadsheet/react/note-cs1/index.html | 2 +- .../react/note-cs1/systemjs.config.js | 2 +- .../spreadsheet/react/note-cs2/index.html | 2 +- .../react/note-cs2/systemjs.config.js | 2 +- .../spreadsheet/react/note-cs3/app/app.jsx | 8 +- .../spreadsheet/react/note-cs3/app/app.tsx | 8 +- .../spreadsheet/react/note-cs3/index.html | 2 +- .../react/note-cs3/systemjs.config.js | 2 +- .../spreadsheet/vue/note-cs1/index.html | 2 +- .../vue/note-cs1/systemjs.config.js | 2 +- .../spreadsheet/vue/note-cs2/index.html | 2 +- .../vue/note-cs2/systemjs.config.js | 2 +- .../vue/note-cs3/app-composition.vue | 5 +- .../spreadsheet/vue/note-cs3/app.vue | 5 +- .../spreadsheet/vue/note-cs3/index.html | 2 +- .../vue/note-cs3/systemjs.config.js | 2 +- 33 files changed, 450 insertions(+), 141 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md index a71451518..126d4fe12 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. ![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif) ## 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. ![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif) ## 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. ![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif) +## 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. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -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/notes.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/notes.md index ecaeea236..878eb042d 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. ![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif) ## 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. ![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif) ## 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. ![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif) +## 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. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -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/notes.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/notes.md index 9f4ac3852..abd669c0d 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. ![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif) ## 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. ![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif) ## 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. ![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif) +## 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. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -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/notes.md b/Document-Processing/Excel/Spreadsheet/React/notes.md index 832fccab7..bca9e39d2 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. ![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif) ## 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. ![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif) ## 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. ![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif) +## 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. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -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/notes.md b/Document-Processing/Excel/Spreadsheet/Vue/notes.md index ac3edef37..82e1f805a 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. ![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif) ## 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. ![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif) ## 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. ![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif) +## 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. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -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/code-snippet/spreadsheet/asp-net-core/note-cs3/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/razor index 9df7753f9..0e02ad8f5 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/razor +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/razor @@ -7,12 +7,8 @@ { row.Index(2).Cells(cell => { - cell.Index(0).Notes("These shoes have the highest sales in terms of quantity this month.").Add(); + cell.Index(0).Notes(new SpreadsheetNotes(){ Text = "These shoes have the highest sales in terms of quantity this month.", IsVisible = True}).Add(); }).Add(); - row.Index(5).Cells(cell => - { - cell.Index(0).Notes("These shoes have been the most profitable this month.").Add(); - }).Add(); }).Columns(column => { column.Width(130).Add(); @@ -26,6 +22,7 @@ function created() { this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1'); + this.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/tagHelper index c93d9d07b..55f4e8892 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/tagHelper +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/note-cs3/tagHelper @@ -8,13 +8,7 @@ - - - - - + notes={ text:"These shoes have the highest sales in terms of quantity this month.", isVisible: true}> @@ -33,5 +27,6 @@ function created() { this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1'); + this.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/razor index 9df7753f9..0e02ad8f5 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/razor +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/razor @@ -7,12 +7,8 @@ { row.Index(2).Cells(cell => { - cell.Index(0).Notes("These shoes have the highest sales in terms of quantity this month.").Add(); + cell.Index(0).Notes(new SpreadsheetNotes(){ Text = "These shoes have the highest sales in terms of quantity this month.", IsVisible = True}).Add(); }).Add(); - row.Index(5).Cells(cell => - { - cell.Index(0).Notes("These shoes have been the most profitable this month.").Add(); - }).Add(); }).Columns(column => { column.Width(130).Add(); @@ -26,6 +22,7 @@ function created() { this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1'); + this.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/tagHelper index c93d9d07b..55f4e8892 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/tagHelper +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/note-cs3/tagHelper @@ -8,13 +8,7 @@ - - - - - + notes={ text:"These shoes have the highest sales in terms of quantity this month.", isVisible: true}> @@ -33,5 +27,6 @@ function created() { this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1'); + this.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/index.html index b6442396e..b100e7aa3 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/index.html +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/index.html @@ -8,12 +8,12 @@ - - - + + + - + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/system.config.js index b1a308828..f0a1ac98d 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/system.config.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs1/system.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { main: "index.ts", diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/index.html index b6442396e..b100e7aa3 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/index.html +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/index.html @@ -8,12 +8,12 @@ - - - + + + - + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/system.config.js index b1a308828..f0a1ac98d 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/system.config.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs2/system.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { main: "index.ts", diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.html index b6442396e..b100e7aa3 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.html +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.html @@ -8,12 +8,12 @@ - - - + + + - + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.js index 13c707a8b..4651c34a2 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.js @@ -20,8 +20,10 @@ var sheet = [ cells: [ { value: 'Sports Shoes', - notes: - 'These shoes have the highest sales in terms of quantity this month.', + notes: { + text: 'These shoes have the highest sales in terms of quantity this month.', + isVisible: true + }, }, { value: 'IN STOCK' }, { value: 'Overstack' }, @@ -43,10 +45,7 @@ var sheet = [ }, { cells: [ - { - value: 'Flip-Flops & Slippers', - notes: 'These shoes have been the most profitable this month.', - }, + { value: 'Flip-Flops & Slippers' }, { value: 'IN STOCK' }, { value: 'Taobao' }, ], @@ -84,6 +83,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({ saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', created: function () { spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:C1'); + spreadsheet.updateCell({ notes: { text: 'This website is best for buying sports shoes.' } }, 'C3:C3'); } }); spreadsheet.appendTo('#spreadsheet'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.ts index 483b6927a..04252d3f4 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.ts +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/index.ts @@ -22,8 +22,10 @@ let sheet: SheetModel[] = [ cells: [ { value: 'Sports Shoes', - notes: - 'These shoes have the highest sales in terms of quantity this month.', + notes: { + text: 'These shoes have the highest sales in terms of quantity this month.', + isVisible: true + }, }, { value: 'IN STOCK' }, { value: 'Overstack' }, @@ -45,10 +47,7 @@ let sheet: SheetModel[] = [ }, { cells: [ - { - value: 'Flip-Flops & Slippers', - notes: 'These shoes have been the most profitable this month.', - }, + { value: 'Flip-Flops & Slippers' }, { value: 'IN STOCK' }, { value: 'Taobao' }, ], @@ -87,6 +86,7 @@ let spreadsheet: Spreadsheet = new Spreadsheet({ saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', created: function (): void { spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:C1'); + spreadsheet.updateCell({ notes: { text: 'This website is best for buying sports shoes.' } }, 'C3:C3'); } }); spreadsheet.appendTo('#spreadsheet'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/system.config.js index b1a308828..f0a1ac98d 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/system.config.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/note-cs3/system.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { main: "index.ts", diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/note-cs1/index.html index b278908a1..e0378fae6 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs1/index.html +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs1/index.html @@ -7,7 +7,7 @@ - + diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/note-cs1/systemjs.config.js index 503d4886b..4b4909d0f 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs1/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs1/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { app: 'app', diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/note-cs2/index.html index b278908a1..e0378fae6 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs2/index.html +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs2/index.html @@ -7,7 +7,7 @@ - + diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/note-cs2/systemjs.config.js index 503d4886b..4b4909d0f 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs2/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs2/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { app: 'app', diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.jsx index c63a57cd7..6b7d73c56 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.jsx +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.jsx @@ -10,6 +10,7 @@ function App() { let spreadsheet = spreadsheetRef.current; if (spreadsheet) { spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:H1'); + spreadsheet.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } } @@ -24,12 +25,7 @@ function App() { - - - - - - + diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.tsx index 795cf2a4e..4cb93f2e4 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.tsx +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/app/app.tsx @@ -10,6 +10,7 @@ function App() { let spreadsheet = spreadsheetRef.current; if (spreadsheet) { spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:H1'); + spreadsheet.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } } @@ -24,12 +25,7 @@ function App() { - - - - - - + diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/index.html index b278908a1..e0378fae6 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/index.html +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/index.html @@ -7,7 +7,7 @@ - + diff --git a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/systemjs.config.js index 503d4886b..4b4909d0f 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/note-cs3/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/react/note-cs3/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { app: 'app', diff --git a/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/index.html index fbfb4e36f..0f48f4cb8 100644 --- a/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/index.html +++ b/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/index.html @@ -9,7 +9,7 @@ - + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/systemjs.config.js index 48afc5ccb..00e94a4b5 100644 --- a/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/vue/note-cs1/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", diff --git a/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/index.html index fbfb4e36f..0f48f4cb8 100644 --- a/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/index.html +++ b/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/index.html @@ -9,7 +9,7 @@ - + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/systemjs.config.js index 48afc5ccb..00e94a4b5 100644 --- a/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/vue/note-cs2/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" }, map: { typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", diff --git a/Document-Processing/code-snippet/spreadsheet/vue/note-cs3/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/note-cs3/app-composition.vue index 5b7b1b365..465d8c6e9 100644 --- a/Document-Processing/code-snippet/spreadsheet/vue/note-cs3/app-composition.vue +++ b/Document-Processing/code-snippet/spreadsheet/vue/note-cs3/app-composition.vue @@ -33,12 +33,11 @@ const width1 = 180; const width2 = 130; const width3 = 120; const rowIndex= 2; -const rowIndex1 = 5; -const cells = [{ index: 0, notes: 'These shoes have the highest sales in terms of quantity this month.'}]; -const cells1= [{index: 0, notes: 'These shoes have been the most profitable this month.'}]; +const cells: [{index: 0, notes: { text: 'These shoes have the highest sales in terms of quantity this month.', isVisible: true } }]; const created = function () { spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); spreadsheet.value.cellFormat({ verticalAlign: 'middle' }, 'A1:H11'); + spreadsheet.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10'); } + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/systemjs.config.js new file mode 100644 index 000000000..4b4909d0f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/systemjs.config.js @@ -0,0 +1,55 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@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-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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app-composition.vue new file mode 100644 index 000000000..87a34e311 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app-composition.vue @@ -0,0 +1,190 @@ + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app.vue b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app.vue new file mode 100644 index 000000000..fbcb4a65e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/app.vue @@ -0,0 +1,203 @@ + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/data.js b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/data.js new file mode 100644 index 000000000..d886bfa1c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/data.js @@ -0,0 +1,17 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.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' } + ]; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.css b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.css new file mode 100644 index 000000000..dd4453b8f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.css @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.html new file mode 100644 index 000000000..0f48f4cb8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.html @@ -0,0 +1,21 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.js new file mode 100644 index 000000000..9a4ef7890 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/index.js @@ -0,0 +1,177 @@ +import Vue from "vue"; +import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet"; +import { shipmentData } from './data.js'; +Vue.use(SpreadsheetPlugin); + +new Vue({ + el: '#app', + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + `, + data: () => { + return { + dataSource: shipmentData, + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', + cells1: [{ + 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' } + ] + } + }], + cells2: [{ + 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' } + ] + } + }], + cells3: [{ + 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' } + ] + } + }], + cells4: [{ + 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' } + ] + } + }], + cells5: [{ + 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' } + ] + } + }], + cells6: [{ + 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' } + ] + } + }], + cells7: [{ + 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' } + ] + } + }] + } + }, + methods: { + created: function () { + var spreadsheet = this.$refs.spreadsheet; + 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'); + } + } +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/systemjs.config.js new file mode 100644 index 000000000..00e94a4b5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/comment-cs1/systemjs.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: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-spreadsheet": "syncfusion:ej2-vue-spreadsheet/dist/ej2-vue-spreadsheet.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file From 6678d90eb2f366e9642ceda1fc6d9b6346a3ddf6 Mon Sep 17 00:00:00 2001 From: gopinathan-sf4977 Date: Fri, 19 Dec 2025 19:44:22 +0530 Subject: [PATCH 3/4] 999367: Resolved preview sample issue --- Document-Processing/Excel/Spreadsheet/Angular/comment.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/comment.md b/Document-Processing/Excel/Spreadsheet/Angular/comment.md index 43f35f1b8..f6b481ace 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/comment.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/comment.md @@ -183,8 +183,6 @@ In the below sample, comments are added to a specific cell using cell data bindi {% 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. From 44191fd4ae4138fd87e6bb011f15957bde08f671 Mon Sep 17 00:00:00 2001 From: gopinathan-sf4977 Date: Fri, 19 Dec 2025 19:51:04 +0530 Subject: [PATCH 4/4] 999367: Resolved preview sample issue --- Document-Processing/Excel/Spreadsheet/Angular/comment.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/comment.md b/Document-Processing/Excel/Spreadsheet/Angular/comment.md index f6b481ace..43f35f1b8 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/comment.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/comment.md @@ -183,6 +183,8 @@ In the below sample, comments are added to a specific cell using cell data bindi {% 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.