Menu Sub Items

[Vuyiswa]

i have a Menu that is defined like this

<telerikNavigation:RadMenu  telerik:StyleManager.Theme="Office_Blue"  Height="236" Name="radMenu1" Width="135"  Orientation="Vertical">
                <telerikNavigation:RadMenuItem Tag="Canteen Solutions"  Header="Canteen Solutions">
                   <HyperlinkButton NavigateUri="/CanteenSolutions" TargetName="MainFrame"  Content="CanteenSolutions"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="Link me to my Kids" Header="Link me to my Kids">
                    <HyperlinkButton NavigateUri="/LinkmyKids" TargetName="MainFrame" Content="LinkmyKids"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="Upload Money" Header="Upload Money">
                    <HyperlinkButton NavigateUri="/UploadMoney" TargetName="MainFrame" Content="UploadMoney"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="Meal Plan" Header="Meal Plan">
                    <HyperlinkButton NavigateUri="/MealPlan" TargetName="MainFrame" Content="MealPlan"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="Order online" Header="Order online">
                    <HyperlinkButton NavigateUri="/Orderonline" TargetName="MainFrame" Content="Orderonline"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="Contact us" Header="Contact us">
                    <HyperlinkButton NavigateUri="/Contactus" TargetName="MainFrame" Content="Contactus"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Tag="About us" Header="About us">
                    <HyperlinkButton NavigateUri="/About" TargetName="MainFrame" Content="Aboutus"></HyperlinkButton>
                </telerikNavigation:RadMenuItem>
            </telerikNavigation:RadMenu>

now the problem here is that it is making sub menus. i want to the menu to change my pages on the main menus not the sub. i used the Hyperlink button based on one of the Examples. i just want the main item only not the sub

thanks

[Hristo]

Hello Vuyiswa,

The ContentProperty of RadMenuItem is Items which means that everything that is inside RadMenuItem will go as its child (in this case sub menuitem).
If you want to add the HyperlinkButton as a header you should add it to RadMenuItem Header property like this:

<telerikNavigation:RadMenuItem Tag="Canteen Solutions">
   <telerikNavigation:RadMenuItem.Header>
      <HyperlinkButton NavigateUri="/CanteenSolutions" TargetName="MainFrame"  Content="Canteen Solutions"/>
   </telerikNavigation:RadMenuItem.Header>
</telerikNavigation:RadMenuItem>

Let us know if you need more information.

All the best,
Hristo
the Telerik team

[Vuyiswa]

Thank you , that worked Perfectly :)

[JDT]

Hi Telerik,

I used the above method and the problem now is that there is a small region where the context menu item is selected, can be clicked, but nothing happens. How can the hyperlinkbutton be stretched to fill the entire rad menu item? If you put a background color on the hyperlink button you can see the region that is clickable but doesn't click the hyperlinkbutton.

It is also very apparent with the icon part of the menu item. Clicking the icon part does nothing. For now we got rid of the icon by setting the icon column to 0.

We can not use the radMenuItem click handler to open a page because hyperlinkbutton is the only one that wont be blocked by popups.

Thanks in advance!

[Konstantina]

Hello Jerry,

Could you please give us some more details about the issue, so that we can reproduce it? Ideally, if you could send us a sample project illustrating the problem it will be very helpful for tracking down its source. Also, could you please share with us with which version of the control you are experiencing the issue?

Regards,
Konstantina
the Telerik team

[JDT]

I have attached the project. You will notice there are regions where the menu item "export" is selected but the hyperlinkButton inside is not clickable. I need the hyperlinkbutton to fill the entire area so that clicking the selected menu item is the same as clicking the hyperlink. It has to be user initiated because otherwise some browsers block the popup even if in the same domain.

Thanks for your help!

Here's a link to the project file. Latest version of silverlight controls q3 2011, check assemblies included. https://www.fusefile.com/share.aspx?id=676-lbwpfprxnzvmfoed.s

[Konstantina]

Hi Jerry,

There are some paddings in the template of the MenuItem, which are causing these blank spaces. In order to avoid them, without restyling the menu I can suggest you to set a negative Margin to the HyperlinkButton, for example:

<telerikNavigation:RadMenuItem x:Name="contextMenuGrid_Download" HorizontalAlignment="Stretch" >
                            <telerikNavigation:RadMenuItem.Header>
                                <HyperlinkButton Margin="-8 0 -8 0" Background="Green" x:Name="exportHyperLink" Content="Export"
                                            TargetName="_blank" NavigateUri="export.html" />
                            </telerikNavigation:RadMenuItem.Header>
                        </telerikNavigation:RadMenuItem>

Hope this helps.

Regards,
Konstantina
the Telerik team

[JDT]

Negative margin did nothing. Did you run the code at all? Where you set the background to green you can see when the menu item is selected there is lots of space where the hyperlink button is not clickable.

[Konstantina]

Hello Jerry,

I did try the code, but it fits for this particular arrangement of the items. If some of the items in the menu are longer the Margin is not doing a good job. That is why I can suggest you to set an ItemContainerStyle to the menu with Padding=0, for example:

   <UserControl.Resources>
       <Style TargetType="telerikNavigation:RadMenuItem" x:Key="ItemContainerStyle">
           <Setter Property="Padding" Value="0" />
       </Style>
   </UserControl.Resources>
<telerikNavigation:RadContextMenu.ContextMenu>
               <telerikNavigation:RadContextMenu ItemContainerStyle="{StaticResource ItemContainerStyle}" x:Name="contextMenuGrid" IconColumnWidth="0">
                   <telerikNavigation:RadContextMenu.Items>
                       <telerikNavigation:RadMenuItem x:Name="contextMenuGrid_Download" HorizontalAlignment="Stretch" >
                           <telerikNavigation:RadMenuItem.Header>                              <HyperlinkButton Background="Green" x:Name="exportHyperLink" Content="Export" TargetName="_blank" NavigateUri="export.html" />
                                                               </telerikNavigation:RadMenuItem.Header>
                       </telerikNavigation:RadMenuItem>

Regards,
Konstantina
the Telerik team