Having trouble getting help?
Contact Support
Contact Support
Hyper link navigation in EJ2 TypeScript ListView control
28 Jan 20254 minutes to read
You can utilize the anchor
tag along with the href
attribute in the ListView’s template
property for enabling navigation links.
let anchor_template: string = "<a target='_blank' href='${url}'>${name}</a>";
In the example below, a ListView
is rendered with hyperlinks to different search engines. The links open in a new tab or window as specified by the target='_blank'
attribute.
import { ListView } from '@syncfusion/ej2-lists';
//Define an array of JSON data
let dataSource: { [key: string]: Object }[] = [
{ name: 'Google', url: 'https://www.google.com' },
{ name: 'Bing', url: 'https://www.bing.com' },
{ name: 'Yahoo', url: 'https://www.yahoo.com' },
{ name: 'Ask.com', url: 'https://www.ask.com' },
{ name: 'AOL.com', url: 'https://www.aol.com' }
];
let anchor_template: string = "<a target='_blank' href='${url}'>${name}</a>";
// Initialize ListView control
let listObj: ListView = new ListView({
//Set defined data to dataSource property
dataSource: dataSource,
//Set header title
headerTitle: 'Search engines',
//Set true to show header title
showHeader: true,
template: anchor_template
});
//Render initialized ListView control
listObj.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
<style>
#element {
display: block;
max-width: 350px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#element a {
text-decoration: none;
}
#element .e-list-header {
background: rgb(2, 120, 215);
color: white;
font-size: 19px;
font-weight: 500;
}
</style>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}