Add link to toolbar item in EJ2 JavaScript Toolbar control

20 Dec 20243 minutes to read

Toolbar supports to add link by using the template configuration. The Toolbar can be rendered by item based collection and by HTML elements. Template property can be given as the HTML element that is either a string or a query selector.

The template property also allows getting template content through query selector. Here, anchor element ‘ID’ attribute is specified in the template.

The Toolbar supports adding links using the template configuration. It can be rendered by either item-based collections or HTML elements.The template property can be specified as an HTML element, either as a string or a query selector. The template property also allows obtaining template content through a query selector. Here, the anchor element’s ‘ID’ attribute is specified in the template.

template: "#AnchorTemplate"
ej.base.enableRipple(true);

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
items: [
    { text: "Cut" },
    { text: "Copy" },
    { type: "Separator" },
    { text: "Paste" },
    { type: "Separator" },
    { template: '#AnchorTemplate' }
]
});

//Render initialized Toolbar component
toolbar.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet">
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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 id="AnchorTemplate">
            <a target="_blank" href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/">Anchor Toolbar Link</a>
        </div>
        <br><br>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>