OutlookBar minimized icon issue

[Mudasser]

The Click Event of any minimized icon does not render the correct screen if any icon is collapsed between minimized icons.
Kindly find the ​attached sample project.

If you run the project, it will show you 5 icon ​as minimized icon. and when you click any minimized icon it will work fine. But you Collapsed the last RadOutlookBarItem and run the project then it will show you 4 icon ​as minimized icon.and if you click any it will not render/open the correct one. it is always opening the first one.This is issue is occurring on Telrik Version14.

In my project, i am dynamically ,showing and hide the outlookbar according to configuration but Click Event of any minimized icon does not render the correct screen if any icon is collapsed between minimized icons.

Kindly explain, why it is not working properly as it suppose to be. and what is the possible solution.

 

 

following is the code for sample project

 

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
        MaxHeight="400"
Title="Window1">
<Grid>
<!--************* OUTLOOK BAR *************-->
<telerikNavigation:RadOutlookBar x:Name="outlookBar" Width="250" HorizontalAlignment="Left" Margin="0,100,0,0">
<!--****** MAIL ******-->
<telerikNavigation:RadOutlookBarItem Header="Mail" FontWeight="Bold"
Icon="Images/mailBig.png" SmallIcon="Images/mailSmall.png" Tag="Mail">
<telerikNavigation:RadTreeView IsLineEnabled="True" x:Name="foldersTreeView">
<telerikNavigation:RadTreeViewItem Header="Personal Folders"
DefaultImageSrc="Images/1PersonalFolders.png" IsExpanded="True">
<telerikNavigation:RadTreeViewItem Header="Deleted Items"
DefaultImageSrc="Images/2DeletedItems.png" />
<telerikNavigation:RadTreeViewItem Header="Drafts"
DefaultImageSrc="Images/3Drafts.png" />
<telerikNavigation:RadTreeViewItem x:Name="MessagesTreeView"
Header="Inbox(3)" DefaultImageSrc="Images/4Inbox.png"
IsExpanded="True">
<telerikNavigation:RadTreeViewItem.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Images/letter.png" />
<TextBlock Text="{Binding From}" Margin="9 0 0 0" />
</StackPanel>
</DataTemplate>
</telerikNavigation:RadTreeViewItem.ItemTemplate>
</telerikNavigation:RadTreeViewItem>
<telerikNavigation:RadTreeViewItem Header="Junk E-mails"
DefaultImageSrc="Images/junk.png" />
<telerikNavigation:RadTreeViewItem Header="Outbox"
DefaultImageSrc="Images/outbox.png" />
<telerikNavigation:RadTreeViewItem Header="Sent Items"
DefaultImageSrc="Images/sent.png" />
</telerikNavigation:RadTreeViewItem>
</telerikNavigation:RadTreeView>
</telerikNavigation:RadOutlookBarItem>
<!--********** CALENDAR **********-->
<telerikNavigation:RadOutlookBarItem Header="Calendar" FontWeight="Bold"
Icon="Images/calendarBig.png" SmallIcon="Images/calendarSmall.png">
<telerikInput:RadCalendar VerticalAlignment="Top" Margin="3" />
</telerikNavigation:RadOutlookBarItem>
<!--**********  CONTACTS **********-->
<telerikNavigation:RadOutlookBarItem Header="Contacts" FontWeight="Bold"
Icon="Images/contactsBig.png" SmallIcon="Images/contactsSmall.png"
Tag="Contacts">
<ListBox x:Name="ContactsListBox" BorderBrush="{x:Null}" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="14 0 14 0">
<Image Source="Images/contact.png" />
<TextBlock Text="{Binding FirstName}" Margin="10 0 0 0"
VerticalAlignment="Center" />
<TextBlock Text="{Binding LastName}" Margin="2 0 0 0"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</telerikNavigation:RadOutlookBarItem>
<!--******* TASKS *******-->
<telerikNavigation:RadOutlookBarItem Header="Tasks" FontWeight="Bold"
Icon="Images/tasksBig.png" SmallIcon="Images/tasksSmall.png">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
<RadioButton Content="To-Do List" IsChecked="True" Margin="0 5 0 5" />
<RadioButton Content="Simple List" Margin="0 5 0 5" />
<RadioButton Content="Detailed List" Margin="0 5 0 5" />
<RadioButton Content="Active Tasks" Margin="0 5 0 5" />
<RadioButton Content="Next Seven Days" Margin="0 5 0 5" />
<RadioButton Content="Overdue Tasks" Margin="0 5 0 5" />
</StackPanel>
</telerikNavigation:RadOutlookBarItem>
<!--******* NOTES *******-->
<telerikNavigation:RadOutlookBarItem Header="Notes" FontWeight="Bold"
Icon="Images/notesBig.png" SmallIcon="Images/notesSmall.png">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
<RadioButton Content="Icons" IsChecked="True" Margin="0 5 0 5" />
<RadioButton Content="Notes List" Margin="0 5 0 5" />
<RadioButton Content="Last Seven Days" Margin="0 5 0 5" />
<RadioButton Content="By Category" Margin="0 5 0 5" />
<RadioButton Content="Outlook Data Files" Margin="0 5 0 5" />
<RadioButton Content="Overdue Tasks" Margin="0 5 0 5" />
</StackPanel>
</telerikNavigation:RadOutlookBarItem>
<!--************* FOLDER LIST *************-->
<telerikNavigation:RadOutlookBarItem Header="Folder List" FontWeight="Bold"
Icon="Images/foldersBig.png" SmallIcon="Images/foldersSmall.png">
<telerikNavigation:RadTreeView IsLineEnabled="True">
<telerikNavigation:RadTreeViewItem Header="Personal Folders"
DefaultImageSrc="Images/1PersonalFolders.png" IsExpanded="True">
<telerikNavigation:RadTreeViewItem Header="Deleted Items"
DefaultImageSrc="Images/2DeletedItems.png" />
<telerikNavigation:RadTreeViewItem Header="Drafts"
DefaultImageSrc="Images/3Drafts.png" />
<telerikNavigation:RadTreeViewItem Header="Inbox"
DefaultImageSrc="Images/4Inbox.png" />
<telerikNavigation:RadTreeViewItem Header="Junk E-mails"
DefaultImageSrc="Images/junk.png" />
<telerikNavigation:RadTreeViewItem Header="Outbox"
DefaultImageSrc="Images/outbox.png" />
<telerikNavigation:RadTreeViewItem Header="Sent Items"
DefaultImageSrc="Images/sent.png" />
</telerikNavigation:RadTreeViewItem>
</telerikNavigation:RadTreeView>
</telerikNavigation:RadOutlookBarItem>
<!--*********** SHORTCUTS ***********-->
<telerikNavigation:RadOutlookBarItem Header="Shortcuts" FontWeight="Bold"
Icon="Images/shortcutsBig.png" SmallIcon="Images/shortcutsSmall.png">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
<Button Content="Add New Group" />
<Button Content="Add New Shortcut" />
</StackPanel>
</telerikNavigation:RadOutlookBarItem>

            <telerikNavigation:RadOutlookBarItem Header="Events" FontWeight="Bold"
Icon="Images/shortcutsBig.png" SmallIcon="Images/notesSmall.png">
                <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
                    <Button Content="Add New Events" />
                    
                </StackPanel>
            </telerikNavigation:RadOutlookBarItem>


            <telerikNavigation:RadOutlookBarItem Header="Reminder" FontWeight="Bold"
Icon="Images/shortcutsBig.png" SmallIcon="Images/shortcutsSmall.png" Visibility="Collapsed">
                <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
                    <Button Content="Add New Reminder" />
                    
                </StackPanel>
            </telerikNavigation:RadOutlookBarItem>
            
        </telerikNavigation:RadOutlookBar>
</Grid>
</Window>

 

 

 

Thanks

Regards

Mudasser

 

 

 

 

 

[Dinko | Tech Support Engineer]

Hello Mudasser,

This is an issue in RadOutlookBar and therefore I logged it in our Feedback portal, where you can track its status. At the moment we can't give you a workaround but if you follow the item you will get a notification when the issue's status is updated. It is basically caused due to the fact that when setting the Visibility to Collapsed and you select a minimized item the control doesn't get the correct item index. I also updated your Telerik points for bringing this issue to our attention.

Please excuse us for any inconvenience caused.

Regards,
Dinko
Telerik

[Mudasser]

Hello,

       Is there any way that in outlookbar instead of showing minimized icon ,it show the scrollbar if no of outlookbaritems increase.By showing the scrollbar i can avoid the above mention issue.

Kindly update me.

 

 

Thanks

Regards

Mudasser

 

[Dinko | Tech Support Engineer]

Hi Mudasser,

You can achieve this by editing the default Style or Template of the control. This approach is further described in the Editing Control Templates tutorial. Basically you can replace the ItemsPresentar tag to StackPanel and set its IsItemsHost property to true and wrap it in ScrollViewer element. You can see this approach in the code snipped below:

<ScrollViewer  DockPanel.Dock="Bottom" 
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
              Height="100">

        <StackPanel  IsItemsHost="true" Margin="1"/>
</ScrollViewer>

Also we have created sample project which demonstrates this behavior using your code.

If this is not the solution you are looking for, please don't hesitate to contact us again.

Regards,
Dinko
Telerik