Skip to content

Commit ab13748

Browse files
996216: Updated the preview sample for updateCell and angular UG content
1 parent 048bb12 commit ab13748

5 files changed

Lines changed: 85 additions & 28 deletions

File tree

Document-Processing/Excel/Spreadsheet/Angular/notes.md

Lines changed: 76 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Notes in Angular Spreadsheet component
1111

12-
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/angular/documentation/api/spreadsheet/#enablenotes) property, which defaults to **true**.
12+
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/angular/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**.
1313

1414
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.
1515

@@ -33,38 +33,100 @@ In the below example, you can add, edit, save, and delete notes.
3333

3434
In the active worksheet, you can add a note in the following ways:
3535

36-
* 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.
37-
* 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.
38-
* 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.
36+
* **Context Menu**: Right-click the desired cell and select **Add Note**.
37+
* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
38+
* **Keyboard Shortcut**: Select the cell and press <kbd>Shift</kbd> + <kbd>F2</kbd>.
39+
40+
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 <kbd>Esc</kbd> button to automatically save the note and close the dialog box.
3941

4042
![Adding a note in Spreadsheet](./images/spreadsheet_add_note.gif)
4143

4244
## Editing a note
4345

44-
In the active worksheet, you can modify the content of existing notes in the document.
46+
In the active worksheet, you can modify the content of existing notes in the document:
47+
48+
* **Context Menu**: Right-click the cell containing the note and select **Edit Note**.
49+
* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Edit Note**.
50+
* **Keyboard Shortcut**: Select the cell containing the note and press <kbd>Shift</kbd> + <kbd>F2</kbd>.
4551

46-
* To edit a note, right-click on the desired cell containing the note, which will open the context menu.
47-
* Select the **"Edit Note"** option from the context menu.
48-
* 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.
49-
* 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.
52+
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 <kbd>Esc</kbd> button to automatically save the changes and close the dialog box.
5053

5154
![Editing a note in Spreadsheet](./images/spreadsheet_edit_note.gif)
5255

5356
## Deleting a note
5457

55-
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.
58+
You can remove notes from cells using the following ways:
59+
60+
* **Context Menu**: Right-click the cell containing the note and select **Delete Note**.
61+
* **Ribbon**: Select the cell containing the note, navigate to the **Review** tab, click the **Notes** dropdown, and select **Delete Note**.
62+
63+
The note will be removed from the cell, and the red triangle indicator will be removed.
5664

5765
![Deleting a note in Spreadsheet](./images/spreadsheet_delete_note.gif)
5866

67+
## Navigating between notes
68+
69+
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.
70+
71+
### Previous Note
72+
73+
To navigate to the previous note:
74+
75+
* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**.
76+
* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward.
77+
* If no prior note exists in the sheet, the search continues to the previous worksheet in order.
78+
* If the workbook contains no notes, the selection remains on the current cell.
79+
80+
### Next Note
81+
82+
To navigate to the next note:
83+
84+
* In the **Review** tab, open the **Notes** dropdown and select **Next Note**.
85+
* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward.
86+
* If no subsequent note exists in the sheet, the search continues to the next worksheet in order.
87+
* If the workbook contains no notes, the selection remains on the current cell.
88+
89+
This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery.
90+
91+
## Show/Hide Note
92+
93+
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.
94+
95+
To toggle the visibility of a note:
96+
97+
* **Context Menu**: Right-click the cell containing the note and select **Show/Hide Note**.
98+
* **Ribbon**: Select the cell, go to the **Review** tab, click the **Notes** dropdown, and choose **Show/Hide Note**.
99+
100+
**Behavior:**
101+
102+
* **Default State (Hidden)**: Notes are hidden by default and only appear when hovering over the cell, which displays a red triangle indicator.
103+
* **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.
104+
* **Toggle Functionality**: Selecting Show/Hide Note again on a visible note hides it, reverting to the default state.
105+
* **Independent Control**: Each note can be toggled individually, allowing you to display only the most relevant notes for your current task.
106+
107+
## Show All Notes
108+
109+
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.
110+
111+
To activate:
112+
113+
* Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**.
114+
115+
All notes in the worksheet will appear as floating text boxes near their respective cells.
116+
117+
> **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.
118+
119+
This functionality enhances workflow efficiency by providing flexible control over note visibility, whether for individual focus or comprehensive review.
120+
59121
## Saving the document with notes
60122

61-
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).
123+
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).
62124

63125
> 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.
64126
65127
## Disabling notes
66128

67-
To disable the note functionality, you need to set the [`enableNotes`](https://ej2.syncfusion.com/angular/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.
129+
To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/angular/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.
68130

69131
![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png)
70132

@@ -86,6 +148,8 @@ In the below example, the note functionality is disabled in the Spreadsheet.
86148

87149
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.
88150

151+
In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, and display all notes at once using **Show All Notes**.
152+
89153
{% tabs %}
90154
{% highlight ts tabtitle="app.component.ts" %}
91155
{% include code-snippet/spreadsheet/angular/note-cs3/src/app.component.ts %}

Document-Processing/Excel/Spreadsheet/Javascript-ES6/notes.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ In the active worksheet, you can add a note in the following ways:
3535
* **Context Menu**: Right-click the desired cell and select **Add Note**.
3636
* **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**.
3737
* **Keyboard Shortcut**: Select the cell and press <kbd>Shift</kbd> + <kbd>F2</kbd>.
38+
* **Programmatically**: Use the `updateCell` method with the note model to add a note to a specific cell.
3839

3940
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 <kbd>Esc</kbd> button to automatically save the note and close the dialog box.
4041

@@ -144,9 +145,9 @@ In the below example, the note functionality is disabled in the Spreadsheet.
144145

145146
## Integrating notes during initial loading and using cell data binding
146147

147-
The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the [notes](https://ej2.syncfusion.com/documentation/api/spreadsheet/cell#notes) property in the cell settings to add notes to the Spreadsheet.
148+
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.
148149

149-
In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, and display all notes at once using **Show All Notes**.
150+
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 how notes are added using `updateCell` method in the `created` event.
150151

151152
{% tabs %}
152153
{% highlight ts tabtitle="index.ts" %}

Document-Processing/code-snippet/spreadsheet/angular/note-cs3/src/app.component.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,7 @@ import { dataSource } from './datasource';
2020
<e-rows>
2121
<e-row [index]=2>
2222
<e-cells>
23-
<e-cell [index]=0 notes="These shoes have the highest sales in terms of quantity this month."></e-cell>
24-
</e-cells>
25-
</e-row>
26-
<e-row [index]=5>
27-
<e-cells>
28-
<e-cell [index]=0 notes="These shoes have been the most profitable this month."></e-cell>
23+
<e-cell [index]=0 [notes]="{ text: 'These shoes have the highest sales in terms of quantity this month.', isVisible: true }"></e-cell>
2924
</e-cells>
3025
</e-row>
3126
</e-rows>
@@ -49,5 +44,6 @@ export class AppComponent {
4944
'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
5045
created() {
5146
this.spreadsheetObj!.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:H1');
47+
this.spreadsheetObj!.updateCell({ notes: { text: 'These shoes have been the most profitable this month.' } }, 'A10:A10');
5248
}
5349
}

Document-Processing/code-snippet/spreadsheet/javascript-es6/note-cs3/index.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ var sheet = [
2626
},
2727
},
2828
{ value: 'IN STOCK' },
29-
{
30-
value: 'Overstack',
31-
notes: { text: 'This website is best for buying sports shoes.' },
32-
},
29+
{ value: 'Overstack' },
3330
],
3431
},
3532
{
@@ -86,6 +83,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
8683
saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
8784
created: function () {
8885
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:C1');
86+
spreadsheet.updateCell({ notes: { text: 'This website is best for buying sports shoes.' } }, 'C3:C3')
8987
}
9088
});
9189
spreadsheet.appendTo('#spreadsheet');

Document-Processing/code-snippet/spreadsheet/javascript-es6/note-cs3/index.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ let sheet: SheetModel[] = [
2828
},
2929
},
3030
{ value: 'IN STOCK' },
31-
{
32-
value: 'Overstack',
33-
notes: { text: 'This website is best for buying sports shoes.' },
34-
},
31+
{ value: 'Overstack' },
3532
],
3633
},
3734
{
@@ -89,6 +86,7 @@ let spreadsheet: Spreadsheet = new Spreadsheet({
8986
saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
9087
created: function (): void {
9188
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:C1');
89+
spreadsheet.updateCell({ notes: { text: 'This website is best for buying sports shoes.' } }, 'C3:C3')
9290
}
9391
});
9492
spreadsheet.appendTo('#spreadsheet');

0 commit comments

Comments
 (0)