ScrollBar in RadMenu.

[Manishkumar]

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.

[Dani]

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

[Manishkumar]

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.

[Dani]

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

[Licensing]

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>



[Dani]

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

[Licensing]

Please vote in PITS for this feature (RadMenu: Submenu scrolling)
http://www.telerik.com/support/pits.aspx#/details/Issue=8750

[Naree]

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.