Search results

Add link to Toolbar Item in JavaScript Toolbar control

08 May 2023 / 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"
Copied to clipboard
import {Toolbar} from '@syncfusion/ej2-navigations';

let toolbar: Toolbar = new Toolbar({
    items: [
        { text: "Cut" },
        { text: "Copy" },
        { type: "Separator" },
        { text: "Paste" },
        { type: "Separator" },
        { template: '#AnchorTemplate' }
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <div id='AnchorTemplate'>
            <a target="_blank"
                href="">Anchor Toolbar Link</a>