Menu Sub Items

9 posts, 1 answers
  1. Vuyiswa Maseko
    Vuyiswa Maseko avatar
    187 posts
    Member since:
    Jan 2010

    Posted 23 Feb 2011 Link to this post

    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
  2. Answer
    Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 24 Feb 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Vuyiswa Maseko
    Vuyiswa Maseko avatar
    187 posts
    Member since:
    Jan 2010

    Posted 24 Feb 2011 Link to this post

    Thank you , that worked Perfectly :)
  5. JDT
    JDT avatar
    45 posts
    Member since:
    Jul 2007

    Posted 23 Jan 2012 Link to this post

    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!

  6. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 27 Jan 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  7. JDT
    JDT avatar
    45 posts
    Member since:
    Jul 2007

    Posted 27 Jan 2012 Link to this post

    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
  8. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 01 Feb 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  9. JDT
    JDT avatar
    45 posts
    Member since:
    Jul 2007

    Posted 03 Feb 2012 Link to this post

    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.
  10. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 08 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
DevCraft banner