Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the allowHyperlink
property to enable or disable hyperlink functionality.
- The default value for
allowHyperlink
property istrue
.
You can insert a hyperlink in a worksheet cell for quick access to related information.
User Interface:
In the active spreadsheet, click the cell where you want to create a hyperlink. Insert hyperlink can be done by any of the following ways:
Link
item.addHyperlink()
method programmatically.You can change an existing hyperlink in your workbook by changing its destination or the text that is used to represent it.
User Interface:
In the active spreadsheet, Select the cell that contains the hyperlink that you want to change. Editing the hyperlink while opening the dialog can be done by any one of the following ways:
Link
item.In the Edit Link dialog box, make the changes that you want, and click UPDATE.
Performing this operation remove a single hyperlink without losing the display text.
User Interface:
In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways:
removeHyperlink()
method programmatically.There is an event named beforeHyperlinkClick
which triggers only on clicking hyperlink. You can customize where to open the hyperlink by using the target
property in the arguments of that event.
<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" hyperlink="www.amazon.com">
</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" hyperlink="Stock!A3:B3">
</e-spreadsheet-cell>
<e-spreadsheet-cell value="Overstack" hyperlink="www.overstock.com">
</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" hyperlink="Stock!A2:B2">
</e-spreadsheet-cell>
<e-spreadsheet-cell value="Aliexpress" hyperlink="www.aliexpress.com">
</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" hyperlink="www.alibaba.com">
</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" hyperlink="Stock!A4:B4">
</e-spreadsheet-cell>
<e-spreadsheet-cell value="Taobao" hyperlink="www.taobao.com">
</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();
}