Search results

Getting Started

22 Jul 2021 / 1 minute to read

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
Copied to clipboard
@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>
Copied to clipboard
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
Copied to clipboard
@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>
Copied to clipboard
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