Merge branch 'development' into 965441-KBLinks

Author: ParameshwaranSF4845

blazor-toc.html

@@ -4567,6 +4567,8 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/spreadsheet/open-and-save">Open and Save</a></li>
+			<li><a href="/blazor/spreadsheet/editing">Editing</a></li>
+			<li><a href="/blazor/spreadsheet/contextmenu">Context Menu</a></li>
 		</ul>
 	</li>
 	<li>Stepper

blazor/spreadsheet/contextmenu.md

@@ -0,0 +1,62 @@
+---
+layout: post
+title: Context Menu in Blazor Spreadsheet component | Syncfusion
+description: Checkout and learn here about the context menu functionality in the Syncfusion Blazor Spreadsheet component and more.
+platform: Blazor
+control: Spreadsheet
+documentation: ug
+---
+
+# Context Menu in Blazor Spreadsheet component
+
+The context menu is used to improve user interaction with the Spreadsheet component using the built-in popup menu. It opens when right-clicking on a cell, column header, row header, or sheet tab in the Spreadsheet. The [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property can be used to enable/disable the context menu.
+
+> The default value for the `EnableContextMenu` property is **true**.
+
+## Cell context menu options
+
+Please find the table below for the default context menu options and their actions.
+
+| Options | Action |
+| -- | -- |
+| Cut | Cut the selected cells data to the clipboard. The data can be pasted into a different cell location. |
+| Copy | Copy the selected cells data to the clipboard for pasting elsewhere. |
+| Paste | Paste the data from clipboard to Spreadsheet. |
+| Hyperlink | Create a link in the Spreadsheet to navigate to web links or cell reference within the sheet or other sheets in the Spreadsheet. |
+| Sort | Perform sorting to the selected range of cells by ascending or descending. |
+| Clear Contents | Remove the selected cells data. |
+| Filter | Perform filtering to the selected cells based on an active cells value. |
+
+![UI showing context menu options for cell](./images/cell-contextmenu.png)
+
+## Row and column header context menu options
+
+Please find the table below for the default context menu options and their actions.
+
+| Options | Action |
+| -- | -- |
+| Cut | Cut the selected row/column header data to the clipboard. The data can be pasted into a different cell location. |
+| Copy | Copy the selected row/column header data to the clipboard for pasting elsewhere. |
+| Paste | Paste the data from the clipboard to Spreadsheet. |
+| Insert Rows / Insert Columns | Insert new rows or columns into the worksheet. |
+
+![UI showing context menu options for row header](./images/row-header-contextmenu.png)
+
+![UI showing context menu options for column header](./images/column-header-contextmenu.png)
+
+## Sheet tab context menu options
+
+Please find the table below for the default context menu options and their actions.
+
+| Options | Action |
+| -- | -- |
+| Insert | Insert a new worksheet after the existing worksheet in the Spreadsheet. |
+| Delete | Delete the selected worksheet from the Spreadsheet. |
+| Duplicate | Create a copy of the selected worksheet in the Spreadsheet. |
+| Rename | Rename the selected worksheet. |
+| Protect Sheet / Unprotect Sheet | Protect sheet prevents unwanted changes from others by limiting their ability to edit. Unprotect sheet removes these restrictions. |
+| Move Right | Move the selected worksheet to the right of the next sheet. |
+| Move Left | Move the selected worksheet to the left of the previous sheet. |
+| Hide | Hide the selected worksheet. |
+
+![UI showing context menu options for sheet tab](./images/sheet-tab-contextmenu.png)

blazor/spreadsheet/editing.md

@@ -0,0 +1,39 @@
+---
+layout: post
+title: Cell Editing in Blazor Spreadsheet component | Syncfusion
+description: Checkout and learn here about the cell editing features in the Syncfusion Blazor Spreadsheet component and more.
+platform: Blazor
+control: Spreadsheet
+documentation: ug
+---
+
+# Editing in Blazor Spreadsheet component
+
+The contents of a cell can be edited directly within the cell or by typing in the formula bar. By default, the editing feature is enabled in the Spreadsheet. Use the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowEditing) property to enable or disable the editing feature.
+
+## Edit cell
+
+Editing can be started in one of the following ways,
+
+* Double-click a cell to start edit mode.
+* Press the `F2` key to edit the active cell.
+* Use the formula bar to perform editing.
+* Press `BACKSPACE` or `SPACE` key to clear the cell content and start edit mode.
+
+## Save cell
+
+If the cell is in an editable state, the edited cell can be saved in one of the following ways,
+
+* Click any other cell except the one currently being edited.
+
+* Press the `Enter` or `Tab` key to save the edited cell.
+
+## Cancel editing
+
+To cancel editing without saving changes, press the `ESCAPE` key. This exits the editable state and restores the original cell content.
+
+The following animation illustrates basic cell editing operations in the Spreadsheet component, including double-clicking a cell to enter edit mode, editing values directly, saving changes by pressing `ENTER` key, and canceling edits with the `ESCAPE` key.
+
+![UI showing cell editing](./images/cell-editing.gif)
+
+

blazor/spreadsheet/getting-started-webapp.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Spreadsheet in Web App
 
-This section briefly explains about how to include [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/blazor-components) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -27,7 +27,7 @@ You need to configure the corresponding [Interactive render mode](https://learn.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet and Themes NuGet in the App
 
-To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
 If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
 
@@ -78,7 +78,7 @@ If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need t
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
 
 {% tabs %}
 

blazor/spreadsheet/getting-started.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Spreadsheet Component
 
-This section briefly explains about how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -25,7 +25,7 @@ You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft T
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet and Themes NuGet in the App
 
-To add **Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add **Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -67,7 +67,7 @@ cd BlazorApp
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
 
 {% tabs %}