Search results

Set item-wise custom template

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.

As a string

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>"

As a selector

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

template: "#Template"
tagHelper
selector.cs
@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();
}