Search results

Add link to Toolbar Item in JavaScript (ES5) Toolbar control

08 Dec 2021 / 1 minute 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.

Copied to clipboard
template: "#AnchorTemplate"
Source
Preview
index.js
index.html
Copied to clipboard
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');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/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/dist/ej2.min.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>