Getting Started
17 Feb 20223 minutes to read
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.
@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.
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.
@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.
