How to set custom template in ASP.NET CORE Toolbar

26 Aug 20262 minutes to read

The Toolbar supports adding custom templates to items using the template property, which accepts HTML as either an inline string or a query selector.

As a string

You can provide the HTML element as a string for the template property. In this example, a checkbox is rendered as an inline HTML template.

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

As a selector

The template property also allows you to reference template content through a query selector. Here, the checkbox ID attribute is specified in the template.

template: "#Template"

CSHTML

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

Selector.cs

public ActionResult Index()
{
    return View();
}