Weird Menu Appearance

[yonadav]

Hi everyone,

We're trying to add a menu that looks like the context menu in one of the docking panels in our application. In order to get an idea of what we're trying to achieve, think of it like this - when you click on a drop down button and get a context menu you essentially get a list of action that you can execute. We want this list of actions to appear on the left side of our application without requiring the clicking of any button or menu. So, we did this:

<telerik:RadPane CanUserClose="False">
<telerik:RadContextMenu ItemsSource="{Binding AllItems}" Height="200">
    <telerik:RadContextMenu.ItemTemplate>
        <DataTemplate>
            <telerik:RadMenuItem
                Header="{Binding Title,Mode=OneWay}"
                Command="{Binding ShowTask}"
                />
        </DataTemplate>
    </telerik:RadContextMenu.ItemTemplate>
</telerik:RadContextMenu>
</telerik:RadPane>

The menu appears and is functional, however the text gets cut off after roughly 100 pixels. 

Anyone familiar with this behavior? Any solution to this or another way to achieve a similar effect?

Thanks,

yonadav

[Kaloyan]

Hi yonadav,
 
The way you are using the context menu is not correct as it is an attached property. Follow the code bellow:

<telerik:RadPane CanUserClose="False">
<telerik:RadContextMenu.ContextMenu>

         <telerik:RadContextMenu>

           <telerik:RadMenuItem Header="Item 1" />

           <telerik:RadMenuItem Header="Item2" />

           <telerik:RadMenuItem Header="Item 3" />

         </telerik:RadContextMenu>

</telerik:RadContextMenu.ContextMenu>

</telerik:RadPane>

There is no need to set the DataTemplate for the RadContextMenu to be a RadMenuItem as it is the default item container for the item placed in the RadContextMenu. My advice is to use a RadMenu instead the RadContextMenu. See the example bellow:

<telerik:RadPane CanUserClose="False">
                        <Grid VerticalAlignment="Top">
                            <telerik:RadMenu Orientation="Vertical">
                                <telerik:RadMenu.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Vertical" />
                                    </ItemsPanelTemplate>
                                </telerik:RadMenu.ItemsPanel>
                                <telerik:RadMenuItem Header="Item 1" Command="ApplicationCommands.Close" />
                                <telerik:RadMenuItem Header="Item 2" Command="ApplicationCommands.Close" />
                                <telerik:RadMenuItem Header="Item 3" Command="ApplicationCommands.Close" />
                                <telerik:RadMenuItem Header="Item 4" Command="ApplicationCommands.Close" />
                                <telerik:RadMenuItem Header="Item 5" Command="ApplicationCommands.Close" />
                                <telerik:RadMenuItem Header="Item 6" Command="ApplicationCommands.Close" />
                            </telerik:RadMenu>
                        </Grid>
                    </telerik:RadPane>

Kind regards,
Kaloyan
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.

[Travis]

I'm having the same problem, but the above code doesn't solve it.  The menu items are still "clipped" after 100 pixels or so as the previous poster describes.  For some reason the menu item width seems to be a percentage of the RadMenu width.  Even though the menu item's width is not set, it is smaller than the RadMenu container.  When you look at it in design view the RadMenu width is "Auto(150)" and the RadMenuItem width is "Auto (86)".  Here's my code:

<Grid VerticalAlignment="Top" Width="150" Margin="0" HorizontalAlignment="Left">
  <telerik:RadMenu telerik:StyleManager.Theme="Summer" Orientation="Vertical">
         <telerik:RadMenu.ItemsPanel>
    <ItemsPanelTemplate>
     <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="0"/>
    </ItemsPanelTemplate>    
   </telerik:RadMenu.ItemsPanel>
            <telerik:RadMenuItem Header="Home Item 1">
                <telerik:RadMenuItem Header="Sub Item 1"/>
                <telerik:RadMenuItem Header="Sub Item 2"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Header="Item 2">
                <telerik:RadMenuItem Header="Sub Item 3"/>
                <telerik:RadMenuItem Header="Sub Item 4"/>
                <telerik:RadMenuItem Header="Sub Item 5"/>
            </telerik:RadMenuItem>
        </telerik:RadMenu>
  </Grid>

[Pana]

Hello,

This appears to be issue in the RadMenuItem's ControlTemplate. We will try to fix it next week and probably it will be released in internal build next week. Also when it is done I will send you menu.xaml that you will be able to use in your project so you can change the style of the RadMenuItems instead of upgrading to internal build.

I am sorry for the inconvenience.

Best wishes,
Panayot
the Telerik team

[Travis]

Was this ever fixed?  I don't recall getting a fix for this.

[Pana]

Hi Travis,

I am sorry for the delay. I have taken care of it and it is now fixed. The next internal build will include the template change. I have also logged it into pits.

Greetings,
Panayot
the Telerik team