Hyper link navigation in EJ2 JavaScript ListView control

28 Jan 20255 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.

//Define an array of JSON data
var dataSource = [
    { 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' },
];
var anchor_template = "<a target='_blank' href='${url}'>${name}</a>";

// Initialize ListView control
var listObj = new ej.lists.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://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="element"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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%;
}