965862: Added the content for cell range and hyperlink

Author: SanthanalakshmiSF4847

blazor-toc.html

@@ -4568,15 +4568,15 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/spreadsheet/open-and-save">Open and Save</a></li>
-			<!-- <li><a href="/blazor/spreadsheet/worksheet">Worksheet</a></li>
-			<li><a href="/blazor/spreadsheet/cell-range">Cell Range</a></li> -->
+			<!-- <li><a href="/blazor/spreadsheet/worksheet">Worksheet</a></li> -->
+			<li><a href="/blazor/spreadsheet/cell-range">Cell Range</a></li> 
 			<li><a href="/blazor/spreadsheet/editing">Editing</a></li>
 			<!-- <li><a href="/blazor/spreadsheet/formulas">Formulas</a></li> -->
 			<li><a href="/blazor/spreadsheet/contextmenu">Context Menu</a></li>
 			<!-- <li><a href="/blazor/spreadsheet/filtering">Filtering</a></li>
-			<li><a href="/blazor/spreadsheet/sorting">Sorting</a></li>
+			<li><a href="/blazor/spreadsheet/sorting">Sorting</a></li> -->
 			<li><a href="/blazor/spreadsheet/hyperlink">Hyperlink</a></li>
-			<li><a href="/blazor/spreadsheet/clipboard">Clipboard</a></li>
+			<!-- <li><a href="/blazor/spreadsheet/clipboard">Clipboard</a></li>
 			<li><a href="/blazor/spreadsheet/selection">Selection</a></li> -->
 			<li><a href="/blazor/spreadsheet/protection">Protection</a></li>
 			<li><a href="/blazor/spreadsheet/undo-redo">Undo and Redo</a></li>

blazor/spreadsheet/cell-range.md

@@ -0,0 +1,124 @@
+---
+layout: post
+title: Managing Cell Ranges in Blazor Spreadsheet component | Syncfusion
+description: Checkout and learn to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more.
+platform: Blazor
+control: Spreadsheet
+documentation: ug
+---
+
+# Managing Cell Ranges in Blazor Spreadsheet component
+
+A cell range refers to a group of selected cells in a Spreadsheet that can be manipulated or processed collectively.
+
+## Cell formatting
+
+Cell formatting enhances the visual presentation of data in a Spreadsheet by applying styles such as font changes, colors, borders, and alignment to individual cells or cell ranges. This helps in organizing and emphasizing important information effectively.
+
+Cell formatting options include:
+
+* **Bold** - Applies a heavier font weight to make the text stand out in the Spreadsheet.
+
+* **Italic** - Slants the text to give it a distinct look, often used for emphasis or to highlight differences.
+
+* **Underline** - Adds a line below the text, commonly used for emphasis or to indicate hyperlinks.
+
+* **Strikethrough** - Draws a line through the text, often used to show completed tasks or outdated information.
+
+* **Font Family** - Changes the typeface of the text (e.g., Arial, Calibri, Times New Roman, and more) to enhance readability or visual appeal.
+
+* **Font Size** - Adjusts the size of the text to create visual hierarchy or improve readability in the Spreadsheet.
+
+* **Font Color** - Changes the color of the text to improve visual hierarchy or to organize information using color codes.
+
+* **Fill Color** - Adds color to the cell background to visually organize data or highlight important information.
+
+* **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include:
+    * **Left** - Default for text
+    * **Center** - Useful for headings
+    * **Right** - Default for numbers
+
+* **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include:
+    * **Top** – Aligns content to the top of the cell
+    * **Middle** – Centers content vertically
+    * **Bottom** – Default alignment
+
+* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells.
+
+Cell formatting can be applied to or removed from a cell or range of cells by using the formatting options available in the Ribbon toolbar under the **Home** tab.
+
+## Autofill
+
+Autofill is used to fill cells with data based on adjacent cells. It follows patterns from adjacent cells when available, eliminating the need to enter repeated data manually. The [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property can be used to enable or disable the autofill support.
+
+> * The default value of the `AllowAutofill` property is **true**.
+
+Autofill can be performed in one of the following ways:
+
+* Drag and drop the cell using the fill handle element.
+* Use the `AutofillAsync()` method programmatically.
+
+The available parameters in the `AutofillAsync()` method are:
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| fillRange | string | Specifies the fill range. |
+| dataRange | string | Specifies the data range. |
+| direction | string | Specifies the direction ("Up", "Right", "Down", and "Left") to be filled. |
+
+### Implementing autofill programmatically
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="AutofillRangeHandler">Autofill</button>
+<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet spreadsheetObj;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task AutofillRangeHandler()
+    {
+	    // Basic usage with only the fill range parameter.
+        await spreadsheetObj.AutofillAsync("B7:B8");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+The following illustration demonstrates the use of autofill in the Spreadsheet component.
+
+![Autofill: Illustration](images/autofill.gif)
+
+## Clear
+
+Clear support helps clear the cell contents (formulas and data) and formats (including number formats) in a Spreadsheet. When **Clear All** is applied, both the contents and the formats will be cleared simultaneously.
+
+### Applying the clear functionality
+
+The clear support can be applied using the following way:
+
+* Select the **Clear** icon in the Ribbon toolbar under the **Home** tab.
+
+| Options | Uses |
+| -- | -- |
+| **Clear All** | Used to clear all contents, formats, and hyperlinks. |
+| **Clear Formats** | Used to clear the formats (including number formats) in a cell. |
+| **Clear Contents** | Used to clear the contents (formulas and data) in a cell. |
+| **Clear Hyperlinks** | Used to clear the hyperlink in a cell. |
+
+The following image displays the clear options available in the Ribbon toolbar under the **Home** tab of the Blazor Spreadsheet.
+
+![Clear options in the Blazor Spreadsheet](images/clear-feature.png)

blazor/spreadsheet/hyperlink.md

@@ -0,0 +1,136 @@
+---
+layout: post
+title: Hyperlink in the Blazor Spreadsheet component | Syncfusion
+description: Checkout and learn how to insert, edit, and remove hyperlink in the Syncfusion Blazor Spreadsheet component and more.
+platform: Blazor
+control: Spreadsheet
+documentation: ug
+---
+
+# Hyperlink in Blazor Spreadsheet component
+
+Hyperlink in the Spreadsheet component allow users to navigate to web URLs, specific cell references within the same sheet, or to other sheets. To control this functionality, use the [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperLink) property, which enables or disables hyperlink support in the Spreadsheet.
+
+> * The default value for the `AllowHyperlink` property is **true**.
+
+## Insert hyperlink
+
+Hyperlink can be inserted into worksheet cells to provide direct access to external web pages, specific cell references within the same worksheet, or cells in other worksheets. This functionality enhances navigation and improves the interactivity of the Spreadsheet.
+
+### Insert hyperlink via the UI
+
+In the active sheet, select the cell where the hyperlink should be inserted. A hyperlink can be inserted using any of the following methods:
+
+* Select the **Insert** tab in the Ribbon toolbar and choose the **Link** option.
+
+* Right click the selected cell, then choose the **Hyperlink** option from the context menu.
+
+* Hyperlink can be inserted or edited using the `Ctrl + K` keyboard shortcut.
+
+
+![Insert tab in the Ribbon toolbar with the Link option highlighted](images/insert-link.png)
+
+![Hyperlink dialog box displaying options for inserting a web URL](images/insert-hyperlink-dialogbox.png)
+
+### Insert hyperlink programmatically
+
+To add hyperlink programmatically in the Spreadsheet component, the [AddHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method can be used.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="AddHyperlinkHandler">Add Hyperlink</button>
+<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet spreadsheetObj;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task AddHyperlinkHandler()
+    {
+	    await spreadsheetObj.AddHyperlinkAsync("https://www.syncfusion.com/blazor-components/blazor-spreadsheet","A2:A5");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit hyperlink
+
+Existing hyperlink in the workbook can be modified to update the destination or the display text. This includes:
+
+* **Changing the Web URL**: Update the hyperlink to point to a different website or online resource.
+
+* **Modifying the Display Text**: Adjust the text shown in the cell without altering the hyperlink destination.
+
+* **Editing Cell References**: Update the hyperlink to point to a different cell within the same sheet by changing the cell address (e.g., from A1 to B5).
+
+* **Updating Sheet Information**: Redirect the hyperlink to a different sheet by modifying the sheet name in the reference (e.g., from Sheet1!A1 to Sheet2!C3).
+
+### Edit hyperlink via the UI
+
+In the active sheet, select the cell that contains the hyperlink to be modified. The hyperlink can be edited by opening the dialog using any of the following methods:
+
+* Select the **Insert** tab in the Ribbon toolbar and click the **Link** option.
+
+* Right click the cell and choose **Edit Hyperlink** option from the context menu, or press `Ctrl + K`.
+
+* In the dialog box, make the necessary changes and click **Update** to apply them.
+
+![Edit hyperlink dialog with options to modify an existing link](images/edit-hyperlink-dialogbox.png)
+
+## Remove hyperlink
+
+Performing this operation removes the hyperlink without affecting the display text.
+
+### Remove hyperlink via the UI
+
+In the active sheet, select the cell containing the hyperlink to be removed. Hyperlinks can be removed in the following way:
+
+* Right click the cell and then click **Remove Hyperlink** option in the context menu.
+
+![Remove Hyperlink option in the cell context menu](images/remove-hyperlink.png)
+
+### Remove hyperlink programmatically
+
+To remove hyperlink programmatically in the Spreadsheet component, the [RemoveHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method can be used.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="RemoveHyperlinkHandler">Remove Hyperlink</button>
+<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet spreadsheetObj;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task RemoveHyperlinkHandler()
+    {
+	    await spreadsheetObj.RemoveHyperlinkAsync("A2:A5");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+