Edit this page

Nesting RadElements in Menu Items

The RadMenuContentItem is a container menu item that allows you to build up custom menu items from other elements. You can assign any RadElement to the ContentElement property of a RadMenuContentItem. The example below demonstrates dynamically creating of two main menu items that contain RadTextBoxElement and RadButtonElement. When the button is clicked a message box displays the text.

Figure 1: Hosting RadElements in menu items

menus-menu-working-with-radmenu-items-nesting-controls-in-menu-items 001

Adding content items

void Form1_Load(object sender, EventArgs e)
{
    RadMenuContentItem textBoxContentItem = new RadMenuContentItem();
    RadTextBoxElement textBox = new RadTextBoxElement();
    textBox.Text = "Enter text here";
    textBox.MinSize = new Size(100, 0);
    textBoxContentItem.ContentElement = textBox; 
    radMenu1.Items.Add(textBoxContentItem);
    RadMenuContentItem buttonContentItem = new RadMenuContentItem();
    RadButtonElement button = new RadButtonElement();
    button.Text = "OK";
    button.Click += new EventHandler(button_Click);
    buttonContentItem.ContentElement = button; 
    radMenu1.Items.Add(buttonContentItem);
}
void button_Click(object sender, EventArgs e)
{
    RadTextBoxElement textBox = radMenu1.Items[0] as RadTextBoxElement;
    MessageBox.Show("Text is: " + textBox.Text);
}

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim textBoxContentItem As New RadMenuContentItem()
    Dim textBox As New RadTextBoxElement()
    textBox.Text = "Enter text here"
    textBox.MinSize = New Size(100, 0)
    textBoxContentItem.ContentElement = textBox
    RadMenu1.Items.Add(textBoxContentItem)
    Dim buttonContentItem As New RadMenuContentItem()
    Dim button As New RadButtonElement()
    button.Text = "OK"
    buttonContentItem.ContentElement = button
    RadMenu1.Items.Add(buttonContentItem)
End Sub
Private Sub button_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim textBox As RadTextBoxElement = TryCast(RadMenu1.Items(0), RadTextBoxElement)
    MessageBox.Show("Text is: " & textBox.Text)
End Sub

Nesting RadCotrols in Menu Items

This tutorial demonstrates adding a RadPageView to a RadMenu. Each page will contain a populated drop down list. Clicking the drop down list items displays a message box with the current selection text.

Figure 2: Hosting RadControls in menu items

menus-menu-working-with-radmenu-items-nesting-controls-tutorial 001

1. Add a RadMenu to the form. No other design time work needs to be done.

2. Add the necessary items definitions along with string array for the months and seasons.

private RadDropDownList seasonDropDownList;
private RadDropDownList monthDropDownList;
private RadPageView pageView;
private string[] months = new string[]
{
            "January", "February", "March", "April", "May",
            "June", "July", "August", "September", "October",
            "November", "December", "January"
};
private string[] seasons = new string[] { "Spring", "Summer", "Fall", "Winter" };

Private seasonDropDownList As RadDropDownList
Private monthDropDownList As RadDropDownList
Private pageView As RadPageView
Private months() As String = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", "January"}
Private seasons() As String = {"Spring", "Summer", "Fall", "Winter"}

3. Create a private method that builds and returns a RadDropDownList. In addition, you can display the selected item text by using the SelectedIndexChanged event.

private RadDropDownList CreateRadDropDownListElement(string text, string[] captions)
{
    RadDropDownList ddl = new RadDropDownList();
    ddl.Location = new Point(15, 15);
    ddl.Size = new Size(150, 19);
    ddl.Margin = new Padding(25, 5, 5, 5);
    ddl.Text = text;
    foreach (string caption in captions)
    {
        ddl.Items.Add(new RadListDataItem(caption));
    }
    ddl.SelectedIndexChanged += ddl_SelectedIndexChanged;
    return ddl;
}
void ddl_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
{
    RadListDataItem item =
        (sender as RadDropDownList).SelectedItem;
    MessageBox.Show(item.Text);
}

Private Function CreateRadDropDownListElement(ByVal text As String, ByVal captions() As String) As RadDropDownList
    Dim ddl As New RadDropDownList()
    ddl.Location = New Point(15, 15)
    ddl.Size = New Size(150, 19)
    ddl.Margin = New Padding(25, 5, 5, 5)
    ddl.Text = text
    For Each caption As String In captions
        ddl.Items.Add(New RadListDataItem(caption))
    Next caption
    AddHandler ddl.SelectedIndexChanged, AddressOf ddl_SelectedIndexChanged
    Return ddl
End Function
Private Sub ddl_SelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.Data.PositionChangedEventArgs)
    Dim item As RadListDataItem = (TryCast(sender, RadDropDownList)).SelectedItem
    MessageBox.Show(item.Text)
End Sub

4. Create a form's Load event handler. In addition, you should add the event prevent the drop down from closing when one is working with the page view. The exit item can be used for closing the drop down in this case.

private void Form1_Load(object sender, EventArgs e)
{
    monthDropDownList = CreateRadDropDownListElement("Select Month", months);
    seasonDropDownList = CreateRadDropDownListElement("Select Season", seasons);
    RadMenuItem rmiSettings = new RadMenuItem("Calendar");
    rmiSettings.DropDownClosing += rmiSettings_DropDownClosing;
    radMenu1.Items.Add(rmiSettings);
    rmiSettings.Items.Add(new RadMenuItem("Options"));
    RadMenuItem closeItem = new RadMenuItem("Exit");
    closeItem.Click += closeItem_Click;
    rmiSettings.Items.Add(closeItem);
    this.pageView = new RadPageView();
    this.pageView.Size = new System.Drawing.Size(300, 100);
    RadPageViewStripElement stripElement = this.pageView.ViewElement as RadPageViewStripElement;
    stripElement.ItemFitMode = StripViewItemFitMode.None;
    stripElement.StripButtons = StripViewButtons.None;
    RadPageViewPage montsPage = new RadPageViewPage("Month");
    RadPageViewPage seasonsPage = new RadPageViewPage("Season");
    montsPage.Controls.Add(monthDropDownList);
    seasonsPage.Controls.Add(seasonDropDownList);
    pageView.Pages.Add(montsPage);
    pageView.Pages.Add(seasonsPage);
    RadMenuHostItem hostItem = new RadMenuHostItem(pageView);
    hostItem.MinSize = new System.Drawing.Size(210, 50);
    rmiSettings.Items.Insert(1, hostItem);
}
void closeItem_Click(object sender, EventArgs e)
{
    RadMenuItem item = (RadMenuItem)sender;
    RadMenuItem parent = item.HierarchyParent as RadMenuItem;
    parent.DropDown.ClosePopup(new PopupCloseInfo(RadPopupCloseReason.CloseCalled, this));
}
void rmiSettings_DropDownClosing(object sender, RadPopupClosingEventArgs args)
{
    args.Cancel = args.CloseReason == RadPopupCloseReason.Mouse;
}

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
    monthDropDownList = CreateRadDropDownListElement("Select Month", months)
    seasonDropDownList = CreateRadDropDownListElement("Select Season", seasons)
    Dim rmiSettings As New RadMenuItem("Calendar")
    AddHandler rmiSettings.DropDownClosing, AddressOf rmiSettings_DropDownClosing
    radMenu1.Items.Add(rmiSettings)
    rmiSettings.Items.Add(New RadMenuItem("Options"))
    Dim closeItem As New RadMenuItem("Exit")
    AddHandler closeItem.Click, AddressOf closeItem_Click
    rmiSettings.Items.Add(closeItem)
    Me.pageView = New RadPageView()
    Me.pageView.Size = New System.Drawing.Size(300, 100)
    Dim stripElement As RadPageViewStripElement = TryCast(Me.pageView.ViewElement, RadPageViewStripElement)
    stripElement.ItemFitMode = StripViewItemFitMode.None
    stripElement.StripButtons = StripViewButtons.None
    Dim montsPage As New RadPageViewPage("Month")
    Dim seasonsPage As New RadPageViewPage("Season")
    montsPage.Controls.Add(monthDropDownList)
    seasonsPage.Controls.Add(seasonDropDownList)
    pageView.Pages.Add(montsPage)
    pageView.Pages.Add(seasonsPage)
    Dim hostItem As New RadMenuHostItem(pageView)
    hostItem.MinSize = New System.Drawing.Size(210, 50)
    rmiSettings.Items.Insert(1, hostItem)
End Sub
Private Sub closeItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim item As RadMenuItem = DirectCast(sender, RadMenuItem)
    Dim parent As RadMenuItem = TryCast(item.HierarchyParent, RadMenuItem)
    parent.DropDown.ClosePopup(New PopupCloseInfo(RadPopupCloseReason.CloseCalled, Me))
End Sub
Private Sub rmiSettings_DropDownClosing(ByVal sender As Object, ByVal args As RadPopupClosingEventArgs)
    args.Cancel = args.CloseReason = RadPopupCloseReason.Mouse
End Sub

This Load event handler performs the main work of the application.

  • A RadDropDpwnList is created and populated with the months of the year.

  • A second RadDropDpwnList is created and populated with the names of the seasons.

  • A main RadMenuItem Calendar is created with two token menu items Options and Exit.

  • A RadMenuHostItem is created to contain the page view.

  • A RadPageView is created. Two pages are added to the page view. Each one contains the corresponding drop down list. Then, the page view is added to the RadMenuHostItem. In this example the drop down lists are providing choices while the pages allows the tabs to be switched.

  • The RadMenuHostItem is inserted into the second position in the menu.

Press F5 to run the application. Notice the behavior when clicking the tabs and when clicking the items in the combo boxes.

See Also