ContextMenu HtmlHelper Overview
The Telerik UI ContextMenu HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ContextMenu widget.
The ContextMenu displays hierarchical data as a multi-level menu in a popup. It provides rich styling for unordered lists of items, and can be used for both navigation and execution of JavaScript commands.
The ContextMenu is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Usage
The following example demonstrates how to define the ContextMenu by using the ContextMenu HtmlHelper.
<div id="target">Click to open</div>
@(Html.Kendo().ContextMenu()
.Name("contextmenu")
.Target("#target")
.ShowOn("click")
.Items(items =>
{
items.Add()
.Text("Furniture") //Add an item with the text "Item1".)
.Items(children =>{
children.Add().Text("Sofas");
children.Add().Text("Chairs");
children.Add()
.Text("Tables")
.Items(i =>{
i.Add().Text("Dinning Tables");
i.Add().Text("Coffee Tables");
})
children.Add().Text("Accessories");
});
items.Add()
.Text("Electronics"); //Add an item with the text "Item2".)
.Items(children =>{
children.Add().Text("TVs");
children.Add().Text("Laptops");
});
})
)
Configuration
The following example demonstrates the basic configuration of the ContextMenu HtmlHelper and how to get the ContextMenu instance.
<div id="target">Click to open</div>
@(Html.Kendo().ContextMenu()
.Name("contextmenu")
.Target("#target")
.ShowOn("click")
.Items(items =>
{
items.Add().Text("Item 1")
.ImageUrl(Url.Content("https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
children.Add().Separator(true);
children.Add().Text("Videos Records");
children.Add().Text("Radio Records");
});
items.Add().Text("Item 2")
.ImageUrl(Url.Content("https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
children.Add().Separator(true);
children.Add().Text("Videos Records");
children.Add().Text("Radio Records");
});
items.Add().Text("Item 3")
.ImageUrl(Url.Content("https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"))
.Items(children =>
{
children.Add().Text("Top News");
children.Add().Text("Photo Galleries");
});
})
.Animation(animation =>
{
animation.Open(fade => fade.Fade(FadeDirection.In));
animation.Open(open => open.Expand(ExpandDirection.Vertical));
})
.HoverDelay(500)
.Direction("left")
.Orientation(ContextMenuOrientation.Horizontal)
.Events(events => events
.Open("onOpen")
)
)
<script type="text/javascript">
function onOpen() {
// The Name() of the ContextMenu is used to get its instance.
var menu = $("#contextmenu").data("kendoContextMenu");
console.log(menu);
}
</script>
Events
You can subscribe to all ContextMenu events.
By Handler Names
The following example demonstrates how to subscribe to events by a handler name.
<div id="target">Click to open</div>
@(Html.Kendo().ContextMenu()
.Name("contextmenu")
.Target("#target")
.ShowOn("click")
.Events(events => events
.Open("openMenu")
.Close("closeMenu")
.Select("onSelect")
)
)
<script>
function openMenu(){
// Handle the open event.
}
function closeMenu(){
// Handle the close event.
}
function onSelect(){
// Handle the select event.
}
</script>
By Template Delegates
The following example demonstrates how to subscribe to events by a template delegate.
<div id="target">Click to open</div>
@(Html.Kendo().ContextMenu()
.Name("contextmenu")
.Target("#target")
.ShowOn("click")
.Events(events => events
.Open(@<text>
function(){
// Handle the open event inline.
}
</text>)
.Close(@<text>
function(){
// Handle the close event inline.
}
</text>)
)
)
By HTML Attributes
The following example demonstrates how to subscribe to the select
event of a single ContextMenu item.
<div id="target">Click to open</div>
@(Html.Kendo().ContextMenu()
.Name("contextmenu")
.Target("#target")
.ShowOn("click")
.Items(items =>
{
items.Add().Text("First Item");
items.Add().Text("Second Item").HtmlAttributes(new { @onclick = "alert('select');" });
})
)