Search results

Getting Started

This section briefly explains about how to include a simple Toolbar in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.

Adding component to the Application

  • Now open your view and controller page to render Toolbar component.
tagHelper
data.cs
@using Syncfusion.EJ2.Navigations;

<ejs-toolbar id="defaultToolbar" width="600px">
    <e-toolbar-items>
        <e-toolbar-item text="Cut" prefixIcon="e-cut-icon tb-icons" tooltipText="Cut"></e-toolbar-item>
        <e-toolbar-item text="Copy" prefixIcon="e-copy-icon tb-icons" tooltipText="Copy"></e-toolbar-item>
        <e-toolbar-item text="Paste" prefixIcon="e-paste-icon tb-icons" tooltipText="Paste"></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item text="Bold" prefixIcon="e-bold-icon tb-icons" tooltipText="Bold"></e-toolbar-item>
        <e-toolbar-item text="Underline" prefixIcon="e-underline-icon tb-icons" tooltipText="Underline"></e-toolbar-item>
        <e-toolbar-item text="Italic" prefixIcon="e-italic-icon tb-icons" tooltipText="Italic"></e-toolbar-item>
        <e-toolbar-item text="Color Picker" prefixIcon="e-color-icon tb-icons" tooltipText="Color-Picker"></e-toolbar-item>
    </e-toolbar-items>
</ejs-toolbar>
public ActionResult Index()
{
    return View();
}

Output be like the below.

getting started

Render the Toolbar items using content template

You can bind any HTML elements or other components in Toolbar items, by simply using the content template property in ASP.NET Toolbar.

In the below demo, the Toolbar items are given as Button, MaskedTextBox, RadioButton, DropDownList using the content template. In the content template property of Toolbar, you can directly render these controls like below in the code.

tagHelper
contenttemplate.cs
@using Syncfusion.EJ2.Navigations;
@using Syncfusion.EJ2.DropDowns;

<ejs-toolbar id="default">
    <e-toolbar-items>
        <e-content-template>
            <div>
                <div> <ejs-button id="btn" content="Click" isPrimary="true"></ejs-button></div>
                <div class='e-separator'> </div>
                <div> <ejs-maskedtextbox id="mask1" mask="345-678-4673"></ejs-maskedtextbox> </div>
                <div class='e-separator'> </div>
                <div>  <ejs-radiobutton id="radio1" label="Credit/Debit Card" name="payment" value="credit/debit"></ejs-radiobutton> </div>
                <div class='e-separator'> </div>
                <div>
                    <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="220px" />
                </div>
            </div>
        </e-content-template>
    </e-toolbar-items>
</ejs-toolbar>
<style>
    .separator {
        width: 10px;
    }
</style>
public ActionResult Index()
{
    ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" };
    return View();
}

Output be like the below.

content template

See Also