Menu

The Menu control represents a customizable web menu.

Server side

Accessing items

Use the Items property to get a reference to the control's collection of root items. Use the MenuItem.Children property to get a reference to the corresponding collection of child items.

Customizing the control

The Menu control supports three different interaction modes, as specified in the NavigationStyle enumeration.

MenuItems can be arranged horizontally or vertically by setting the Orientation property.

Adding items

Use Menu.Items.Add method to add root items to the control's Items collection.

C#

MenuItem item = new MenuItem();
item.Title = "Menu item";
Menu1.Items.Add(item);
Menu1.DataBind();

VB.NET

Dim item As New MenuItem()
item.Title = "Menu item"
Menu1.Items.Add(item)
Menu1.DataBind()

Use MenuItem.Children.Add method to add a child item to the corresponding item's Children collection.

C#

Menu1.Items[0].Children.Add(new MenuItem { Title = "Child item"});
Menu1.DataBind();

VB.NET

Menu1.Items(0).Children.Add(New MenuItem() With { .Title = "Child item" })
Menu1.DataBind()

Removing items

Use Menu.Items.Remove or Menu.Items.RemoveAt methods to remove root items from the control's items collection.

C#

Menu1.Items.RemoveAt(0);
Menu1.DataBind();

VB.NET

Menu1.Items.RemoveAt(0)
Menu1.DataBind()

Use MenuItem.Children.Remove or MenuItem.Children.RemoveAt methods to remove a child item from the corresponding item's Children collection.

C#

Menu1.Items[0].Children.Remove(Menu1.Items[0].Children[0]);
Menu1.DataBind();

VB.NET

Menu1.Items(0).Children.Remove(Menu1.Items(0).Children(0))
Menu1.DataBind()

Events

The following events are exposed by the Menu class.

Event	Event arguments	Description
ItemClicked	MenuItemEventArgs	Raised when a MenuItem is clicked.
ItemCreated	MenuItemEventArgs	Raised when a new MenuItem is created.
ItemDeleted	MenuItemEventArgs	Raised when a MenuItem is deleted.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var menu = $find("Menu1");
var menu = $find("<%= Menu1.ClientID %>");

Accessing items

Use the Menu.getAllItems method to get a reference to the control's items collection. Use the MenuItem.getAllItems method to access the collection of the item's child items.

Expanding and collapsing items

To expand or collapse menu items programmatically use MenuItem's expand and collapse methods.

JavaScript

var items = menu.getAllItems();
for (var i = 0, l = items.length; i < l; i++)
{
    if ($get("Checkbox1").checked)
        items[i].expand();
    else
        items[i].collapse();
}

Adding items

Use the Menu.createItem method to add a new root item to its items array. The createItem method accepts as parameter a JSON object, containing the data for the new item. Use the data object to define values for the properties and events, exposed by the MenuItem class.

JavaScript

menu.createItem({ properties: {title:"root item", imageUrl: "Images/RootItem.jpg"} });

Use the MenuItem.createItem method to add a new child item to its collection of child items.

JavaScript

var item = menu.getAllItems()[0];
item.createItem({ properties: { title: "child item", imageUrl: "Images/ChildItem.jpg"} });

Removing items

Use the MenuItem.deleteItem method to remove a specified item from the collection.

JavaScript

menu.deleteItem(menu.getAllItems()[0]);

Events

The following client-side event are exposed by the Menu class.

Event	Event arguments	Script property	Description
itemClicked	MenuItemEventArgs	ItemClickedScript	Raised when a MenuItem is clicked
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.