RadRibbonDropDownButton dropdown list not closing

[Raaj]

Our application uses SL 5 and Telerik 2012.1.215.2050.

Couple of the screens uses the RadRibbonDropDownButton with a Listbox control(data bound) as the dropdown list.
When we click on an item in the dropdown list it fires the click event but does not close dropdown list. The only way to close it is to click on the RadRibbonDropDownButton. Even if I click on other controls does not close the dropdown list. We dint see this is the older Telerik version and this issue started only when we upgraded to 2012.1.215.2050.
When I created a test app with the RadRibbonDropDownButton the dropdown list does not close when an item is clicked. But it closes when I click on another control.
I tried to use the property KeepOpen="False" but my understanding is this no longer applies to RadRibbonDropDownButton.
I could and a on click event to close the dropdown but it would to be a hack.
Please let me know if there is any particular setting that I am missing. 

Below is the code snippet from my test app.

Thank you,
Raaj.

'Format Code Block'  

    <Grid x:Name="LayoutRoot"  Height="644" Width="884">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>


        <telerik:RadRibbonView Grid.Row="0" ApplicationName="Events" AllTabsEqualHeight="True" HelpButtonVisibility="Collapsed" ApplicationButtonVisibility="Collapsed" TitleBarVisibility="Collapsed" telerik:StyleManager.Theme="Windows7" >
            <telerik:RadRibbonTab Header="Home" telerik:KeyTipService.AccessText="H">
                    <telerik:RadRibbonGroup Header="Categories">
                        <StackPanel Orientation="Vertical">
                            <telerik:RadRibbonDropDownButton Content="Clipboard" Height="22" MinWidth="150"  KeepOpen="False"  >
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <telerik:RadContextMenu BorderThickness="0">
                                        <telerik:RadMenuItem Header="Paste">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Header="Paste Special...">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Header="Paste as Hyperlink" IsEnabled="False">
                                        </telerik:RadMenuItem>
                                    </telerik:RadContextMenu>
                                </telerik:RadRibbonDropDownButton.DropDownContent>
                            </telerik:RadRibbonDropDownButton>
                            <telerik:RadRibbonButton Content="Clear Category Filters" MinWidth="150"/>
                        </StackPanel>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="File" telerik:KeyTipService.AccessText="F">
                    <telerik:RadRibbonGroup Header="File">
                        <StackPanel Orientation="Vertical">
                            <telerik:RadRibbonDropDownButton Content="Clipboard" Height="22" MinWidth="150"  KeepOpen="False"  >
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <ListBox ItemsSource="{Binding Path=Categories}">
                                    <ListBoxItem>
                                        <telerik:RadToggleButton  telerik:StyleManager.Theme="Windows7">
                                            <Grid  MinWidth="150">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="17"/>
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <Rectangle Grid.Column="0" Fill="Green" HorizontalAlignment="Left"  RadiusX="2" RadiusY="2" Height="17" Width="17"/>
                                                <TextBlock Grid.Column="1" Text="Paste" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                            </Grid>
                                        </telerik:RadToggleButton>
                                    </ListBoxItem>
                                    <ListBoxItem>
                                        <telerik:RadToggleButton  telerik:StyleManager.Theme="Windows7">
                                            <Grid  MinWidth="150">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="17"/>
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <Rectangle Grid.Column="0" Fill="Red" HorizontalAlignment="Left"  RadiusX="2" RadiusY="2" Height="17" Width="17"/>
                                                <TextBlock Grid.Column="1" Text="Paste Special..." HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                            </Grid>
                                        </telerik:RadToggleButton>
                                    </ListBoxItem>
                                    <ListBoxItem>
                                        <telerik:RadToggleButton  telerik:StyleManager.Theme="Windows7">
                                            <Grid  MinWidth="150">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="17"/>
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <Rectangle Grid.Column="0" Fill="Blue" HorizontalAlignment="Left"  RadiusX="2" RadiusY="2" Height="17" Width="17"/>
                                                <TextBlock Grid.Column="1" Text="Paste as Hyperlink" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                            </Grid>
                                        </telerik:RadToggleButton>
                                    </ListBoxItem>
                                    </ListBox>
                                </telerik:RadRibbonDropDownButton.DropDownContent>
                            </telerik:RadRibbonDropDownButton>
                            <telerik:RadRibbonButton Content="Clear Category Filters" MinWidth="150"/>
                        </StackPanel>
                    </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRibbonView>
        <StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical"  >
            <Button Content="Display HTML" Height="23" HorizontalAlignment="Left" Margin="230,0,0,0" Name="btnDispayHTML" VerticalAlignment="Top" Width="86" Click="btnDispayHTML_Click" Grid.Column="1" />
            <Button Content="PrintEvents" Height="23" HorizontalAlignment="Left" Margin="230,0,0,0" Name="btnPrintEvents" VerticalAlignment="Top" Width="86" Click="btnPrintEvents_Click" Grid.Column="1" />
            <Button Content="PrintPreview" Height="23" HorizontalAlignment="Left" Margin="230,0,0,0" Name="btnPrintPreview" VerticalAlignment="Top" Width="86" Click="btnPrintPreview_Click" Grid.Column="1" />
            <Button Name="btnMarkComplete" ToolTipService.ToolTip="Mark Complete Selected task" Content="Mark Complete" BorderThickness="0" />
        </StackPanel>

  'Format Code Block'   



 
 

[Viktor Tsvetkov]

Hi Raaj,

Actually the RadRibbonDropDownButton closes its popup when some particular events are raised as

Selector.SelectionChangedEvent, RadButton.ActivateEvent, RadSplitButton.ActivateEvent, RadMenuItem.ClickEvent so if you simply replace the RadToggleButtons with RadButtons you will see that the popup will close when you click the buttons.

All the best,

Viktor Tsvetkov
the Telerik team

[Raaj]

Hi Viktor,

We dont use events but use commands. I changed the RadToggleButton to RadButton and it still does not work.

                            <telerik:RadRibbonDropDownButton Content="{Binding Path=CategoryText, FallbackValue='Categories'}" Height="22" MinWidth="150">
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <ListBox ItemsSource="{Binding Path=Categories}">
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <telerik:RadToggleButton  telerik:StyleManager.Theme="Windows7"
                                                    Command="{Binding Path=DataContext.CategoryChangedCommand, ElementName=ControlRoot}" 
                                                    CommandParameter="{Binding}" 
                                                    IsChecked="{Binding IsSelected, Mode=TwoWay}" MinWidth="150" Margin="0,0,0,2">
                                                    <Grid  MinWidth="150">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="17"/>
                                                            <ColumnDefinition Width="*" />
                                                        </Grid.ColumnDefinitions>
                                                        <Rectangle Grid.Column="0" Fill="{Binding Category.CategoryColor, Converter={StaticResource HexConverter}}" HorizontalAlignment="Left"  
                                                            RadiusX="2" RadiusY="2" Height="17" Width="17"/>
                                                        <TextBlock Grid.Column="1" Text="{Binding Category.CategoryName.Value}" 
                                                            HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                                    </Grid>
                                                </telerik:RadToggleButton>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                </telerik:RadRibbonDropDownButton.DropDownContent>
                            </telerik:RadRibbonDropDownButton>


Also I have a similar problem with the RadRibbonDropDownButton used with the RadRichTextBox. Sample code below.

 <telerik:RadOrderedWrapPanel>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBulletsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleNumberedCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />
                            <telerik:RadRibbonDropDownButton Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/MultilevelList.png">
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <StackPanel>
                                        <telerik:RadGroupHeader Content="List Library" />
                                        <telerik:RadGallery ItemHeight="88" ItemWidth="88" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeListStyleCommand}" ViewportHeight="176" ViewportWidth="266">
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNone.png" Tag="None" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListBulleted.png" Tag="Bulleted" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumbered.png" Tag="Numbered" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedParenthesis.png" Tag="NumberedParenthesis" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedHierarchical.png" Tag="NumberedHierarchical" />
                                        </telerik:RadGallery>
                                    </StackPanel>
                                </telerik:RadRibbonDropDownButton.DropDownContent>
                            </telerik:RadRibbonDropDownButton>
                        </telerik:RadButtonGroup>

Thank you,
Raaj.

[Viktor Tsvetkov]

Hello Raaj,

In the code snippet that you send in your last post you are still using a RadToggleButton in the DataTemplate and not a RadButton.

Kind regards,
Viktor Tsvetkov
the Telerik team

[Raaj]

Hi Viktor,

This code sample does not have RadToggleButtons within the RadRibbonDropDownButton.

Thank you,
Rajesh.
  


 <telerik:RadOrderedWrapPanel>
                        <telerik:RadButtonGroup>
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBulletsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />
                            <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleNumberedCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />
                            <telerik:RadRibbonDropDownButton Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/MultilevelList.png">
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <StackPanel>
                                        <telerik:RadGroupHeader Content="List Library" />
                                        <telerik:RadGallery ItemHeight="88" ItemWidth="88" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeListStyleCommand}" ViewportHeight="176" ViewportWidth="266">
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNone.png" Tag="None" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListBulleted.png" Tag="Bulleted" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumbered.png" Tag="Numbered" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedParenthesis.png" Tag="NumberedParenthesis" />
                                            <telerik:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedHierarchical.png" Tag="NumberedHierarchical" />
                                        </telerik:RadGallery>
                                    </StackPanel>
                                </telerik:RadRibbonDropDownButton.DropDownContent>
                            </telerik:RadRibbonDropDownButton>
                        </telerik:RadButtonGroup> 

[Zarko]

Hello Rajesh,
I'm glad to inform you that this but is fixed in the Q1 2011 SP (2012.1.316), as for your version (2012.1.215) - I a possible workaround is to handle the SelectionChanged event of the RadGallery and manually close the DropDownButton.
I've attached a sample project which shows this so could you please examine it and if you have further questions feel free to ask.

Greetings,
Zarko
the Telerik team