This is a migrated thread and some comments may be shown as answers.

ScrollBar in RadMenu.

7 Answers 242 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Manishkumar
Top achievements
Rank 1
Manishkumar asked on 25 May 2011, 06:12 AM
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.

7 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 26 May 2011, 10:36 AM
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
0
Manishkumar
Top achievements
Rank 1
answered on 30 May 2011, 10:10 AM
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.

0
Dani
Telerik team
answered on 01 Jun 2011, 10:54 AM
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
0
Licensing
Top achievements
Rank 1
answered on 30 May 2012, 01:17 PM
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>

0
Dani
Telerik team
answered on 01 Jun 2012, 02:01 PM
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 >>
0
Licensing
Top achievements
Rank 1
answered on 30 Nov 2012, 01:48 PM
Please vote in PITS for this feature (RadMenu: Submenu scrolling)
http://www.telerik.com/support/pits.aspx#/details/Issue=8750
0
Naree
Top achievements
Rank 1
answered on 16 Sep 2014, 12:20 PM
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.

Tags
Menu
Asked by
Manishkumar
Top achievements
Rank 1
Answers by
Dani
Telerik team
Manishkumar
Top achievements
Rank 1
Licensing
Top achievements
Rank 1
Naree
Top achievements
Rank 1
Share this question
or