RadMenuItem DropDownHeight stopped working

3 posts, 0 answers
  1. Anmol
    Anmol avatar
    5 posts
    Member since:
    Jan 2018

    Posted 15 Feb Link to this post

    Hi,

    I had dynamically set DropDownHeight of RadMenuItem, till now it was working. After that I set the template style for telerikNav:RadMenuItem . But now DropDownHeight functionality has stopped working . Attached(style.txt) is the style code for telerikNav:RadMenuItem. Further attached is the top and bottom arrow of menu that are not showing now due to the template implementation. 

    view.xaml

     <radNav:RadMenu x:Name="mnuMain"
                            Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
                            Height="27"
                            Style="{StaticResource MainTopMenu}"  />

     <Rectangle x:Name="rctMenuSeparator" 
                       Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
                       Height="2"
                       Style="{StaticResource MainTopMenuSeparator}" />

     

     

    ///view.xaml.cs code for setting dropdown

    if (menuItem.ParentID == 0 && menuItem.MenuItemType == MenuItemType.ParentNode)
                            {
                                int subMenuChildCount = menuItems.Count(a => a.ParentID == menuItem.MenuItemID);
                                if (subMenuChildCount > 15)
                                    menuControl.DropDownHeight = 405; 
                            }

     

    // Style.xaml

    <Style x:Key="MainTopMenu" TargetType="telerikNav:RadMenu">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="ClickToOpen" Value="False" />
            <Setter Property="Background" Value="{StaticResource MainMenuBackground}" />
            <Setter Property="Foreground" Value="#FFFFFF" />
            <Setter Property="BorderBrush" Value="{StaticResource MainMenuBackground}" />
        </Style>
     <Style x:Key="MainTopMenuSeparator" TargetType="Rectangle">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Fill" Value="#FFC2CFE2" />
        </Style>
     
    <Style x:Key="RadMenuItemStyle" TargetType="telerikNav:RadMenuItem">
            <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource TopLevelHeaderTemplate}" />
        </Style>
        <Style TargetType="telerikNav:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}" />

    <ControlTemplate TargetType="telerikNav:RadMenuItem" x:Key="SeparatorTemplate">
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0" HorizontalAlignment="Left" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}" />
                <Grid Grid.Column="1" Height="2" Margin="{StaticResource MenuItemSeparatorMargin}">
                    <Rectangle Height="1" VerticalAlignment="Top" Fill="{StaticResource MenuItemSeparatorTop}" />
                    <Rectangle Height="1" VerticalAlignment="Bottom" Fill="{StaticResource MenuItemSeparatorBottom}" />
                </Grid>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerikNav:RadMenuItem">
            <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="#FF009FE3"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ColorAnimation From="Black" To="Black" Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.Color)"/>
                            </Storyboard>
                        </VisualState>


                        <VisualState x:Name="Normal" />
                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />


                <Grid x:Name="ContentGrid" Background="Transparent" Margin="{TemplateBinding Padding}" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Path x:Name="Tick" Margin="0 0 4 0" Grid.Column="0" Visibility="Collapsed" FlowDirection="LeftToRight" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />
                    <ContentPresenter x:Name="Icon" Margin="0 0 4 0" Grid.Column="0" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />
                    <TextBlock x:Name="Content" Grid.Column="1" Text="{TemplateBinding Header}"/>
                </Grid>
                <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="1">
                    <Grid >
                        <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                            <telerikChromes:ShadowChrome />
                            <Border BorderThickness="1" BorderBrush="{StaticResource MenuPopupOuterBorder}" Background="{StaticResource MenuPopupBackground}">
                                <Grid>
                                    <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}" HorizontalAlignment="Left">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" Margin="0 0 2 0" />
                                        <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                            <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 1 0" Fill="{StaticResource MenuPopupIconsSeparatorLeft}" />
                                            <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 0 0" Fill="{StaticResource MenuPopupIconsSeparatorRight}" />
                                        </Grid>
                                    </Grid>
                                    <ScrollViewer  MaxHeight="300" BorderThickness="0" Padding="0" VerticalScrollBarVisibility="Hidden">
                                        <ItemsPresenter Margin="1"/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Grid>
                    </Grid>
                </Popup>
            </Grid>
        </ControlTemplate>

     

    Regards,

    Anmol

  2. Anmol
    Anmol avatar
    5 posts
    Member since:
    Jan 2018

    Posted 15 Feb in reply to Anmol Link to this post

    Have pasted the code regarding style.txt within the post.
  3. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    795 posts

    Posted 20 Feb Link to this post

    Hello Anmol,

    Can you please clarify what are the modifications you wish to make to the default control template of the so that I can get a better understanding of your requirement and assist you further?

    For your convenience, I've prepared a small sample project where I've extracted the default template of the RadMenuItem for the Office_Black theme. Please note that you should try to keep all comprising elements in tact to avoid tampering with the existing functionality.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top