Search results

Getting Started

This section briefly explains about how to include a simple Toolbar in your ASP.NET MVC application. You can refer ASP.NET MVC 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.
razor
data.cs
@using Syncfusion.EJ2.Navigations;

@(Html.EJS().Toolbar("defaultToolbar")
    .Width("600px")
    .Items(new List<ToolbarItem> {
        new ToolbarItem { Text="Cut", PrefixIcon = "e-cut-icon tb-icons", TooltipText = "Cut" },
        new ToolbarItem { Text="Copy", PrefixIcon = "e-copy-icon tb-icons", TooltipText = "Copy" },
        new ToolbarItem { Text="Paste", PrefixIcon = "e-paste-icon tb-icons", TooltipText = "Paste" },
        new ToolbarItem { Type = ItemType.Separator },
        new ToolbarItem { Text="Bold", PrefixIcon = "e-bold-icon tb-icons", TooltipText = "Bold" },
        new ToolbarItem { Text="Underline", PrefixIcon = "e-underline-icon tb-icons", TooltipText = "Underline" },
        new ToolbarItem { Text="Italic", PrefixIcon = "e-italic-icon tb-icons", TooltipText = "Italic" },
        new ToolbarItem { Text="Color Picker", PrefixIcon = "e-color-icon tb-icons", TooltipText = "Color-Picker" }
    })
    .Render()
)
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.

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

@(Html.EJS().Toolbar("defaultToolbar")
    .ContentTemplate(
        @<div>
            <div>
                <div>@Html.EJS().Button("btn").Content("Click").IsPrimary(true).Render()</div>
                <div class='separator'> </div>
                <div>@Html.EJS().MaskedTextBox("mask1").Mask("345-678-4673").Render() </div>
                <div class='separator'> </div>
                <div>@Html.EJS().RadioButton("radio1").Label("Credit/Debit Card").Name("payment").Value("credit/debit").Render() </div>
                <div class='separator'> </div>
                <div>
                    @Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("220px").Index(2).DataSource(
                            (IEnumerable<object>)ViewBag.data).Fields(new DropDownListFieldSettings { Text = "Game", Value = "Id" }).Render()
                </div>
            </div>
        </div>
    )
    .Render()
)

<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