ASP.NET MVC ContextMenu Overview
The ContextMenu is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ContextMenu HtmlHelper for ASP.NET MVC 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.
Basic Usage
The following example demonstrates how to define the ContextMenu.
<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>
Functionality and Features
The ContextMenu derives from the Menu component and largely shares the same functionalities, features, and configuration options. To learn more about them, refer to the Menu Overview article.