Hyperlink in ASP.NET Core Spreadsheet control

30 Jul 202623 minutes to read

Hyperlinks allow users to navigate to web pages, cell references within the current worksheet, or cells in other worksheets. Use the allowHyperlink property to enable or disable hyperlink functionality in the Spreadsheet.

NOTE

The default value of the allowHyperlink property is true.

Insert Link

You can insert a hyperlink into a worksheet cell for quick access to related information.

To insert a hyperlink through the user interface:

Select the cell where you want to insert the hyperlink.
Open the Insert tab in the Ribbon and select Link.
Alternatively, right-click the cell and select Hyperlink from the context menu, or press Ctrl + K.
Enter the destination and display text in the dialog, and then apply the changes.

You can also use the addHyperlink() method to insert a hyperlink programmatically.

Edit Hyperlink

You can edit an existing hyperlink by changing its destination or display text.

User Interface:

In the active Spreadsheet, select the cell containing the hyperlink. You can open the Edit Link dialog in one of the following ways:

Select the Insert tab in the Ribbon, and then select Link.
Right-click the cell and select Edit Hyperlink from the context menu, or press Ctrl + K.

In the Edit Link dialog, make the required changes, and then click Update.

Remove Hyperlink

Removing a hyperlink deletes the link without removing its display text.

User Interface:

In the active Spreadsheet, select the cell where you want to insert a hyperlink. You can insert a hyperlink in one of the following ways:

Right-click the cell and then click Remove Hyperlink item in the context menu.
Use the removeHyperlink() method programmatically.

Change the hyperlink target

The beforeHyperlinkClick event is triggered before a hyperlink is opened. Use the target property in the event arguments to specify where the hyperlink opens.

CSHTML
HyperlinkController.cs
<ejs-spreadsheet id="spreadsheet" beforeHyperlinkClick="beforeHyperlinkClick">
    <e-spreadsheet-sheets>
        <e-spreadsheet-sheet name="PriceDetails" selectedRange="D13">
            <e-spreadsheet-rows>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Item Name">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Quantity">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Price">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Amount">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Stock Detail">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Website">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Casual Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="10">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$20">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$200">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="OUT OF STOCK">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Amazon">
                            <e-cell-hyperlink address="www.amazon.com"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Sports Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="20">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$30">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$300">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="IN STOCK">
                            <e-cell-hyperlink address="Stock!A3:B3"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Overstack">
                            <e-cell-hyperlink address="www.overstock.com"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Formal Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="20">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$15">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$300">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="IN STOCK">
                            <e-cell-hyperlink address="Stock!A2:B2"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Aliexpress">
                            <e-cell-hyperlink address="www.aliexpress.com"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Sandals & Floaters">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="15">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$25">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$300">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="OUT OF STOCK">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Alibaba">
                            <e-cell-hyperlink address="www.alibaba.com"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Flip-Flops & Slippers">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="30">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$10">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="$300">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="IN STOCK">
                            <e-cell-hyperlink address="Stock!A4:B4"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Taobao">
                            <e-cell-hyperlink address="www.taobao.com"></e-cell-hyperlink>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
            </e-spreadsheet-rows>
        </e-spreadsheet-sheet>
        <e-spreadsheet-sheet name="Stock" selectedRange="D13">
            <e-spreadsheet-rows>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Item Name">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="Available Count">
                            <e-spreadsheet-cellstyle fontWeight="Bold" textAlign="Center"></e-spreadsheet-cellstyle>
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Casual Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="10">
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Sports Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="20">
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Formal Shoes">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="20">
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Sandals & Floaters">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="15">
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
                <e-spreadsheet-row>
                    <e-spreadsheet-cells>
                        <e-spreadsheet-cell value="Flip-Flops & Slippers">
                        </e-spreadsheet-cell>
                        <e-spreadsheet-cell value="30">
                        </e-spreadsheet-cell>
                    </e-spreadsheet-cells>
                </e-spreadsheet-row>
            </e-spreadsheet-rows>
        </e-spreadsheet-sheet>
    </e-spreadsheet-sheets>
</ejs-spreadsheet>

<script>

    function beforeHyperlinkClick(args) {
        args.target = '_self'; //change target attribute
    }

</script>
public IActionResult Index()
{
    return View();
}

Limitations

Inserting hyperlinks into multiple ranges is not supported.

Search docs

Ask Syncfusion AI Assistant