Set item wise custom template in EJ2 JavaScript Toolbar control

20 Dec 20242 minutes to read

The Toolbar supports adding template commands using the template property. The template property can be specified as an HTML element, either as a string or a query selector.

As a string

The HTML element tag can be specified as a string for the template property. Here, a checkbox is rendered as an HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As a selector

The template property also allows retrieving template content through a query selector. Here, the button’s ‘ID’ attribute is specified in the template.

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

//Initialize Toolbar component

var toolbar = new ej.navigations.Toolbar({
items: [
    { text: "Cut" },
    { type: "Separator" },
    { text: "Paste" },
    { type: "Separator" },
    { template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" },
    { text: "Undo" },
    { text: "Redo" },
    { template: "#Template" }
]
});

//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>
        <br><br>
        <button id="Template" class="e-btn">Template</button>
    </div>


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