ScrollBar in RadMenu.

8 posts, 0 answers
  1. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 25 May 2011 Link to this post

    Hi,
    How to implement scroll bar in the menuitem.
    let say I need at max of 10 items in the menuitem popout, after that scrollbar should be visible in the popout.

    Thanks.
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 26 May 2011 Link to this post

    Hello Manishkumar,

    You can add a ScrollViewer in the ControlTemplate of the RadMenu to take advantage of the scrolling functionality when needed. Take a look at the attached sample project with a scrollable RadContextMenu. The approach you need to use for the RadMenu is the same - add a ScrollViewer around the ItemsPresenter. Make sure that your ScrollViewer does have a MaxHeight set to have the scrolling working properly.

    I hope this helps.

    Kind regards,
    Dani
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 30 May 2011 Link to this post

    Hi Dani,
    Thanks for the reply, but its not working the same way for Rad Menu as it is working for RadContextMenu.

    Might be as I'm using the HierarchicalDataTemplate, causing the problem.

    The scroll bar appears but not on the popup menu but on the main menu.

    Please provide a sample example for RadMenu having HierarchicalDataTemplate.

    Thanks.

  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 01 Jun 2011 Link to this post

    Hi Manishkumar,

    Using a HierarchicalDataTemplate does not harm the scrolling functionality at all. The issue here is that the ScrollViewer needs to be placed with regards to the  type of menu items that will be scrolled. For example, if you want the top level submenu items to be scrollable, you need to add a ScrollViewer to the TopLevelHeaderTemplate of the RadMenu control.

    I prepared a sample that fits your scenario and illustrates the scrolling of the top level submenu items of RadMenu. I hope this will be helpful.

    Best wishes,
    Dani
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Licensing
    Licensing avatar
    31 posts
    Member since:
    Sep 2011

    Posted 30 May 2012 Link to this post

    I try to do the same functionality
    Does'n work :(. Read this manual
    http://www.telerik.com/help/wpf/radmenu-how-to-create-scrollable-menus.html 
    Do the same. But didn't work. Style not applied on RadMenuItem.


    Version of controls 2011.3.1122.40 

    Control template
    <ControlTemplate x:Key="TopLevelHeaderTemplate1" TargetType="{x:Type telerik:RadMenuItem}">
        <Grid x:Name="RootElement" Margin="2">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" />
            <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3"
                                                           CornerRadius="1"
                                                           RenderMouseOver="{TemplateBinding IsHighlighted}"
                                                           RenderNormal="False"
                                                           RenderPressed="{TemplateBinding IsSubmenuOpen}">
                <telerik:StyleManager.Theme>
                    <telerik:Office_BlackTheme />
                </telerik:StyleManager.Theme>
            </Telerik_Windows_Controls_Chromes:ButtonChrome>
            <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Path x:Name="Tick" Grid.Column="0"
                      Margin="0,0,4,0" VerticalAlignment="Center"
                      Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z"
                      Fill="{TemplateBinding Foreground}"
                      FlowDirection="LeftToRight" Visibility="Collapsed" />
                <ContentPresenter x:Name="Icon" Grid.Column="0"
                                  Margin="0,0,4,0"
                                  Content="{TemplateBinding Icon}"
                                  ContentTemplate="{TemplateBinding IconTemplate}" />
                <ContentPresenter x:Name="Content" Grid.Column="1"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Content="{TemplateBinding Header}"
                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                  RecognizesAccessKey="True" />
            </Grid>
            <Popup x:Name="PART_Popup" AllowsTransparency="True"
                   Focusable="False" HorizontalOffset="-1"
                   IsOpen="{TemplateBinding IsSubmenuOpen}"
                   MaxHeight="130"
                   VerticalOffset="1" >
                <Grid Background="Red"  MaxHeight="130">
     
                    <Grid x:Name="PopupContentElement"  MaxHeight="130">
                        <Border Background="White" BorderBrush="#FF848484"
                                BorderThickness="1">
                            <Grid  MaxHeight="130">
                                <Grid Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left"
                                       MaxHeight="130">
                                    <Rectangle Margin="0,0,2,0" Fill="#FFF0F0F0" />
                                    <Grid Margin="0" HorizontalAlignment="Right">
                                        <Rectangle Width="1" Margin="0,0,1,0"
                                                   HorizontalAlignment="Right" Fill="#FF848484" />
                                        <Rectangle Width="1" Margin="0"
                                                   HorizontalAlignment="Right" Fill="Transparent" />
                                    </Grid>
                                </Grid>
                                <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="130" telerik:StyleManager.Theme="{StaticResource Theme}">
                                    <ItemsPresenter Margin="1" />
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </Grid>
                </Grid>
            </Popup>
        </Grid>

    Menu 

    <Grid>
        <telerik:RadMenu HorizontalAlignment="Left" VerticalAlignment="Top" >
            <telerik:RadMenuItem Header="Item 1"  TopLevelHeaderTemplateKey="{StaticResource TopLevelHeaderTemplate1}"
                               SubmenuHeaderTemplateKey="{StaticResource SubMenuHeaderTemplate1}"
                                 >
                <telerik:RadMenuItem Header="Mul" />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
                <telerik:RadMenuItem Header="Mul"   />
            </telerik:RadMenuItem>
        </telerik:RadMenu>
     
     
    </Grid>

  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 01 Jun 2012 Link to this post

    Hi,

    As suggested in another thread of yours, please use all four templates of RadMenuItem and the ItemContainerStyle property of RadMenu to achieve the desired effect.

    I hope the solution will work fine in your scenario.

    Kind regards,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Licensing
    Licensing avatar
    31 posts
    Member since:
    Sep 2011

    Posted 30 Nov 2012 Link to this post

    Please vote in PITS for this feature (RadMenu: Submenu scrolling)
    http://www.telerik.com/support/pits.aspx#/details/Issue=8750
  9. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 16 Sep 2014 Link to this post

    Hi Dani,
    I'm getting some issue in case of radmenu.If the machine contains 1024*768 screen resolution the problem arising. The menus are get sliding down can u please suggest me how to solve this issue.I'm loading menus from code behind.
    Thanks in advance.I'm eagerly waiting to solution.


    Best Regards,
    G.NareshReddy.

Back to Top
UI for WPF is Visual Studio 2017 Ready