Kendo UI Vertical and Horizontal Menu

Article

Menu

A menu is a list of commands or choices offered to the user. Menus commonly allow a user to access the various options the software program is capable of performing. The vertical menu displays the menu one by one. The horizontal menu is used to display the menu in a single row.

Kendo UI Menu

The Kendo UI menu represents the Kendo UI menu widget. The Menu displays hierarchical data as a multi-level menu. It can be defined and initialized from HTML, or the API can be used to add and remove items. The Kendo UI menu is shown in one of the following three ways.

Configuration
Methods
Events

Configuration

Animation Object: The animation objects are used to change default animations. A value of false will disable all animations in the widget.
Animation.close Object: The animation.close object that will be used when closing sub menus.
Animation.close.effects: This effect is used to closing the popup string.
Animation.close.duration: It is used to define the animation duration of seconds.
Animation.open Object: The animation that is used when opening sub menus.
Animation.open.effects String: Effect to be used for opening of the popup.
Animation.open.duration Number: Defines the animation duration in milliseconds.
CloseOnClick Boolean: Specifies that sub menus should close after item selection. The closeOnClick Boolean is set as the default of true.
DataSource Object|Array: The data source of the widget is used to render its items. It contains an item or an Array of items to be rendered.
Direction String(default: "default"): Specifies the menu opening direction. Can be "top", "bottom", "left", "right". The user also can specify a different direction for root and sub menu items separating them with a space.
HoverDelay Number(default: 100): The delay prior to the menu being opened/closed, to avoid accidental closure on leaving.
OpenOnClick Boolean(default: false): The root sub menus will be opened on item click.
Orientation String(default: "horizontal"): Root menu orientation could be horizontal or vertical.

Methods

Append: Appends menu is specified reference sub menu.
Close: Closes a sub-menu of a specified item in a menu.
Destroy: All event handlers and removes jQuery data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.
Enable: Enables or disables an item of a menu.
InsertAfter: Inserts an item into a menu after the specified reference item.
InsertBefore: Inserts an item into a menu before the specified reference item.
Open: Opens a sub-menu of a specified item in a menu.
Remove: Removes a specified item from a menu.

Events

Close: Before a sub menu is closed. The user cancels this event to prevent closure.
Open: Before a sub menu is opened. The user cancels this event to prevent opening the sub menu.
Activate: When a sub menu is opened and its animation is finished.
Deactivate: When a sub menu is closed and its animation is finished.
Select: when a menu item is selected.

Now for how to use the Kendo UI vertical and horizontal menu in ASP.NET. First create a simple web application and add a HTML page and JavaScript page. Install the Kendo UI then start writing the code. You want to learn how to create a simple web application in ASP.NET, refer to my previous article Using Kendo UI Templates.

First you design the HTML page using the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome kendo Menu</title>
<link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>
<script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>
<script src="Scripts/JavaScript1.js"></script>
</head>
<body>
<div id="menu"></div>
</body>
</html>

Now you design the JavaScript page using the following code:

/// <reference path="kendo/2014.1.318/jquery.min.js" />
/// <reference path="kendo/2014.1.318/kendo.web.min.js" />
$(document).ready(function () {
$("#menu").kendoMenu({
dataSource: [
{
text: "ASP.NET MVC Versions",
value: "Item 1 Value",
items: [
{
text: " MVC 1",
value: "Sub Item 1 Value",
items: [
{
text: "MVC Pattern architecture with WebForm Engine, Runs on .Net 3.5 and with Visual Studio 2008 & Visual Studio 2008 SP1, Html and Ajax helpers, Routing, Unit Testing.",
value: "Sub Sub Item 1 Value"
},
]
},
{
text: " MVC 2",
value: "Sub Item 2 Value",
items: [
{
text: "Strongly typed HTML helpers means lambda expression based Html Helpers, Templated and UI helpers with automatic scaffolding & customizable templates, Client-side validation, Asynchronous controllers.",
value: "Sub Sub Item 2 Value"
},
]
},
{
text: " MVC 3",
value: "Sub Item 3 Value",
items: [
{
text: "Improved Support for Data Annotations, Remote Validation, Dependency Resolver, Entity Framework Code First support, Good Intellisense support for Razor into Visual Studio, Use of NuGet to deliver software and manage dependencies throughout the platform.",
value: "Sub Sub Item 3 Value"
},
]
},
{
text: " MVC 4",
value: "Sub Item 4 Value",
items: [
{
text: "ASP.NET Web API, Runs on .Net 4.0, 4.5 and with Visual Studio 2010SP1 & Visual Studio 2012, Display Modes, Enhancements to default project templates, Mobile project template using jQuery Mobile, Support for the Windows Azure SDK.",
value: "Sub Sub Item 4 Value"
},
]
},
{
text: " MVC 5",
value: "Sub Item 5 Value",
items: [
{
text: "Runs on .Net 4.5, 4.5.1 and with Visual Studio 2013, Asp.Net Identity and Scaffolding, Bootstrap in the MVC template, ASP.NET Web API2, Authentication filters - run prior to authorization filters in the ASP.NET MVC pipeline.",
value: "Sub Sub Item 5 Value"
},
]
},
]
},
{
text: ".NET Framework Versions",
value: "Item 1 Value",
items: [
{
text: ".NET Framework 1.0",
value: "Sub Item 1 Value",
items: [
{
text: "This is the First version of the .NET Framework.",
value: "Sub Sub Item 1 Value"
},
]
},
{
text: ".NET Framework 1.1",
value: "Sub Item 2 Value",
items: [
{
text: "ASP.NET and ADO.NET updates, Side-by-side execution.",
value: "Sub Sub Item 2 Value"
},
]
},
{
text: ".NET Framework 2.0",
value: "Sub Item 3 Value",
items: [
{
text: "ASP.NET and ADO.NET updates, Access Control List Support. 64-Bit Platform Support, Authenticated Streams, COM Interop Services Enhancements.",
value: "Sub Sub Item 3 Value"
},
]
},
{
text: ".NET Framework 3.0",
value: "Sub Item 4 Value",
items: [
{
text: "This 3.0 version support to WPF, WCF, WF, CardSpace.",
value: "Sub Sub Item 4 Value"
},
]
},
{
text: " .NET Framework 3.5",
value: "Sub Item 5 Value",
items: [
{
text: "AJAX-enabled websites, LINQ, Dynamic data, Cryptography.",
value: "Sub Sub Item 5 Value"
},
]
},
{
text: ".NET Framework 4",
value: "Sub Item 2 Value",
items: [
{
text: "Expanded base class libraries, Cross-platform development with Portable Class Library, MEF, DLR, code contracts.",
value: "Sub Sub Item 2 Value"
},
]
},
{
text: ".NET Framework 4.5",
value: "Sub Item 3 Value",
items: [
{
text: "WPF, WCF, WF, ASP.NET updates, Support for Windows Store apps, Type reflection support split between Type and TypeInfo classes.",
value: "Sub Sub Item 3 Value"
},
]
},
{
text: ".NET Framework 4.5.1",
value: "Sub Item 4 Value",
items: [
{
text: ".NET Native, Support for Windows Phone Store apps, Automatic binding redirection, Performance and debugging improvements.",
value: "Sub Sub Item 4 Value"
},
]
},
{
text: ".NET Framework 4.5.2",
value: "Sub Item 5 Value",
items: [
{
text: "New APIs for transactional systems and ASP.NET, System DPI resizing in Windows Forms controls, Profiling improvements, ETW and stress logging improvements.",
value: "Sub Sub Item 5 Value"
},
]
},
]
}]
});
});

The code above uses the Kendo UI menu to display the output in a horizontal and vertical order. Now see the output in the following. The following output window displays only a horizontal menu.

The following output window displays a horizontal and vertical menu.

This final output window displays all the vertical and horizontal menus and includes a sub menu also. The following output window ASP.NET MVC versions and .NET Framework Versions is a horizontal menu, MVC 1 up to MVC 5 is a vertical menu.

The following window .NET Framework 1.0, 1.1 and up to 4.5.2 is a sub menu of .NET Framework Versions and ASP.NET and ADO.NET updates is a sub menu of .NET Framework 1.1.

Summary

This article described the use of the Kendo UI vertical and horizontal sub menu in web applications of ASP.NET. This article helps you to learn the Kendo UI Menu and the example program helpd to learn ASP.NET MVC versions and to learn the .NET Framework versions and features. Thanks for reading the article.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all