How to set custom template in ASP.NET MVC 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;

<div>
    <div>
        @(Html.EJS().Toolbar("defaultToolbar")
            .Items(new List<ToolbarItem> {
                new ToolbarItem { Text = "Cut" },
                new ToolbarItem { Type = ItemType.Separator },
                new ToolbarItem { Text = "Paste" },
                new ToolbarItem { Type = ItemType.Separator },
                new ToolbarItem { Template = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" },
                new ToolbarItem { Text = "Undo" },
                new ToolbarItem { Text = "Redo" },
                new ToolbarItem { Template = "#Template" }
            })
            .Width("330")
            .Render()
        )
    </div>
    <button id='Template' class='e-btn'>Template</button>
</div>

Selector.cs

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