The Toolbar supports adding template commands using the template
property. Template property can be given as the HTML element
that is either a string
or a query selector
.
The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.
template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"
The template property also allows getting template content through query selector
. Here, checkbox ‘ID’ attribute is specified in the template.
template: "#Template"
@using Syncfusion.EJ2.Navigations;
@{
var content = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>";
}
<div>
<div>
<ejs-toolbar id="defaultToolbar" width="330">
<e-toolbar-items>
<e-toolbar-item text="Cut"></e-toolbar-item>
<e-toolbar-item type="Separator"></e-toolbar-item>
<e-toolbar-item text="Paste"></e-toolbar-item>
<e-toolbar-item type="Separator"></e-toolbar-item>
<e-toolbar-item template=content></e-toolbar-item>
<e-toolbar-item text="Undo"></e-toolbar-item>
<e-toolbar-item text="Redo"></e-toolbar-item>
<e-toolbar-item template="#Template"></e-toolbar-item>
</e-toolbar-items>
</ejs-toolbar>
</div>
<button id='Template' class='e-btn'>Template</button>
</div>
public ActionResult Index()
{
return View();
}