Link in EJ2 JavaScript Spreadsheet control
4 Jul 202424 minutes to read
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
.
Insert Link
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:
- Select the INSERT tab in the Ribbon toolbar and choose the
Link
item. - Right-click the cell and then click Hyperlink item in the context menu.
-
Use
Ctrl + K
keyboard shortcut to apply the hyperlink. - Use the
addHyperlink
method programmatically.
Edit Hyperlink
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:
- Select the INSERT tab in the Ribbon toolbar and choose the
Link
item. - Right-click the cell and then click Edit Hyperlink item in the context menu, or you can press Ctrl+K.
In the Edit Link dialog box, make the changes that you want, and click UPDATE.
Remove Hyperlink
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:
- Right-click the cell and then click Remove Hyperlink item in the context menu.
- Use the
removeHyperlink()
method programmatically.
How to change target attribute
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.
// Initialize the Spreadsheet component.
var sheet = [
{
name: 'PriceDetails',
rows: [
{
cells: [
{ value: 'Item Name' },
{ value: 'Quantity' },
{ value: 'Price' },
{ value: 'Amount' },
{ value: 'Stock Detail' },
{ value: 'Website' }
]
},
{
cells: [
{ value: 'Casual Shoes' },
{ value: '10' },
{ value: '$20' },
{ value: '$200' },
{ value: 'OUT OF STOCK' },
{ value: 'Amazon', hyperlink: 'https://www.amazon.com/' }
]
},
{
cells: [
{ value: 'Sports Shoes' },
{ value: '20' },
{ value: '$30' },
{ value: '$600' },
{ value: 'IN STOCK', hyperlink: 'Stock!A2:B2'},
{ value: 'Overstack', hyperlink: 'https://www.overstock.com/' }
]
},
{
cells: [
{ value: 'Formal Shoes' },
{ value: '20' },
{ value: '$15' },
{ value: '$300' },
{ value: 'IN STOCK', hyperlink: 'Stock!A3:B3'},
{ value: 'AliExpress', hyperlink: 'https://www.aliexpress.com/' }
]
},
{
cells: [
{ value: 'Sandals & Floaters' },
{ value: '15' },
{ value: '$20' },
{ value: '$300' },
{ value: 'OUT OF STOCK'},
{ value: 'AliBaba', hyperlink: 'http://www.alibaba.com/' }
]
},
{
cells: [
{ value: 'Flip-Flops & Slippers' },
{ value: '30' },
{ value: '$10' },
{ value: '$300' },
{ value: 'IN STOCK', hyperlink: 'Stock!A4:B4' },
{ value: 'Taobao', hyperlink: 'https://taobao.com/' }
]
},
{
cells: [
{ value: 'Sneakers' },
{ value: '40' },
{ value: '$20' },
{ value: '$800' },
{ value: 'OUT OF STOCK' },
{ value: 'Walmart', hyperlink: 'https://www.walmart.com/' }
]
},
{
cells: [
{ value: 'Running Shoes' },
{ value: '20' },
{ value: '$10' },
{ value: '$200' },
{ value: 'IN STOCK', hyperlink: 'Stock!A5:B5' },
{ value: 'Ebay', hyperlink: 'https://www.ebay.com/' }
]
},
{
cells: [
{ value: 'Loafers' },
{ value: '31' },
{ value: '$10' },
{ value: '$310' },
{ value: 'IN STOCK', hyperlink: 'Stock!A6:B6' },
{ value: 'Flipkart', hyperlink: 'https://www.flipkart.com/' }
]
},
{
cells: [
{ value: 'Cricket Shoes', },
{ value: '41' },
{ value: '$30' },
{ value: '$1210' },
{ value: 'IN STOCK', hyperlink: 'Stock!A7:B7' },
{ value: 'NewEgg', hyperlink: 'https://www.newegg.com/' }
]
},
{
cells: [
{ value: 'T-Shirts' },
{ value: '50' },
{ value: '$10' },
{ value: '$500' },
{ value: 'IN STOCK', hyperlink: 'Stock!A8:B8' },
{ value: 'Overstock', hyperlink: 'https://www.overstock.com/' }
]
}
],
columns: [
{ width: 160 }, { width: 80 }, { width: 80 },
{ width: 80 }, { width: 160 }, { width: 120 }
]
},
{
name: 'Stock',
rows: [
{
cells: [
{ value: 'Item Name' },
{ value: 'Available Count' },
]
},
{
cells: [
{ value: 'Sports Shoes' },
{ value: '30' },
]
},
{
cells: [
{ value: 'Formal Shoes' },
{ value: '25' },
]
},
{
cells: [
{ value: 'Flip-Flops & Slippers' },
{ value: '40' },
]
},
{
cells: [
{ value: 'Running Shoes' },
{ value: '25' },
]
},
{
cells: [
{ value: 'Loafers' },
{ value: '31' },
]
},
{
cells: [
{ value: 'Cricket Shoes', },
{ value: '47' },
]
},
{
cells: [
{ value: 'T-Shirts' },
{ value: '60' },
]
}
],
columns: [
{ width: 160 }, { width: 120 }
]
}
];
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: sheet,
beforeHyperlinkClick: function(args) {
args.target = '_self'; //change target attribute
}
}
);
// Render initialized Spreadsheet.
spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 SpreadSheet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link rel="shortcut icon" href="resources/favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-spreadsheet/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<!--Element which is going to render-->
<div id="container">
<div id="spreadsheet"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Limitations
- Inserting hyperlink not supported for multiple ranges.