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

Inconsistent radpane flyout and focus behaviour

2 Answers 125 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 12 Dec 2016, 05:08 PM

Hello,

I have put together a small sample application which is a cut down version of my main application, both the sample application and main app are suffering from similar inconsistent flyout pane behaviour.

If I click on the collapsed "Search" pane and then one of the grid's hyperlinks. It collapses immediately - this is a show stopper in my main application for when the search pane is collapsed.

If I mouse hover on the search and don't click - I can click then click on the grid hyperlinks correctly - this is the same behaviour I want when the user clicks the search button.

These are the main issues I'm facing - I can live with the behaviour presented by the toolbar and the datagrid context menu but ideally I want the pane to stay expanded while I interact with the context menu's

Any advice would be appreciated.

 

MainWindow.xaml:

<Window x:Class="DockHidingIssue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dockHidingIssue="clr-namespace:DockHidingIssue"
        WindowStartupLocation="CenterScreen"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024" d:DataContext="{d:DesignInstance dockHidingIssue:MainWindow}">
    <Window.Resources>

        <MenuItem x:Key="one" Header="First" Click="One_OnClick" />
        <MenuItem x:Key="two" Header="Second" Click="Two_OnClick" />
        <MenuItem x:Key="three" Header="Third" Click="Three_OnClick" />

        <ContextMenu x:Key="GridContextMenu">
            <MenuItem>Click me</MenuItem>
        </ContextMenu>
    </Window.Resources>
    <Grid>
        <telerik:RadDocking Background="White" x:Name="MainDock"
                            telerik:RadDocking.SerializationTag="ParentDockContainer">
            <telerik:RadDocking.DocumentHost>

                <telerik:RadSplitContainer telerik:RadDocking.SerializationTag="HomePageContainer">
                    <telerik:RadPaneGroup BorderBrush="{x:Null}" BorderThickness="0"
                                          telerik:RadDocking.SerializationTag="HomePageGroup">
                        <telerik:RadDocumentPane CanFloat="False" Visibility="Collapsed" CanUserClose="False"
                                                 telerik:RadDocking.SerializationTag="MainPane">
                            <WebBrowser x:Name="Browser" />
                        </telerik:RadDocumentPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

            <telerik:RadSplitContainer InitialPosition="DockedBottom"
                                       telerik:RadDocking.SerializationTag="SearchContainer">
                <telerik:RadPaneGroup telerik:RadDocking.SerializationTag="SearchGroup">
                    <telerik:RadPane Header="Search" x:Name="SearchRadPane"
                                     telerik:RadDocking.SerializationTag="SearchPane"
                                     CanUserPin="True" IsPinned="False" MouseEnter="SearchRadPane_OnMouseEnter">


                        <TabControl TabStripPlacement="Bottom">
                            <TabItem Header="Search">
                                <StackPanel>
                                    <ToolBar x:Name="tbSelectorControl" ToolBarTray.IsLocked="True"
                                             KeyboardNavigation.TabNavigation="Continue"
                                             VerticalAlignment="Center" VerticalContentAlignment="Center">
                                        <Menu TabIndex="0" SnapsToDevicePixels="True" Background="Transparent">
                                            <Menu.Resources>
                                                <Style TargetType="MenuItem"
                                                       BasedOn="{StaticResource {x:Type MenuItem}}">
                                                    <Setter Property="Command"
                                                            Value="{Binding Path=Command, FallbackValue={x:Null}}" />
                                                </Style>
                                            </Menu.Resources>
                                            <MenuItem x:Name="mnuSelected" SubmenuOpened="MnuSelected_OnSubmenuOpened">
                                                <MenuItem.Header>
                                                    <StackPanel Orientation="Horizontal" Height="30">
                                                        <Label x:Name="txtSelectedFinder" Content="Selected Finder"
                                                               Height="30" />
                                                        <Image Height="8" Width="8"
                                                               Margin="8,0,0,0" />
                                                    </StackPanel>
                                                </MenuItem.Header>

                                                <MenuItem Header="Test" />
                                            </MenuItem>
                                        </Menu>
                                        <Separator />
                                    </ToolBar>
                                    <DataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False"
                                              ContextMenu="{StaticResource GridContextMenu}"
                                              ContextMenuOpening="FrameworkElement_OnContextMenuOpening">
                                        <DataGrid.Columns>
                                            <DataGridTextColumn Header="Name" />

                                            <DataGridHyperlinkColumn Header="Link" Binding="{Binding}" >

                                                <DataGridHyperlinkColumn.ElementStyle>
                                                    <Style>
                                                        <EventSetter Event="Hyperlink.Click" Handler="Hyperlink_Click" />
                                                    </Style>
                                                </DataGridHyperlinkColumn.ElementStyle>
                                            </DataGridHyperlinkColumn>
                                        </DataGrid.Columns>

                                    </DataGrid>
                                </StackPanel>
                            </TabItem>
                            <TabItem Header="Tasks">
                                <Grid x:Name="MyTasks" />
                            </TabItem>
                        </TabControl>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </Grid>
</Window>

 

Code behind:

 

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
 
namespace DockHidingIssue
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private IEnumerable<string> _data;
 
        public MainWindow()
        {
            InitializeComponent();
 
            DataContext = this;
 
            Data = new List<string>
            {
                @"http://www.google.com",
                @"http://www.telerik.com"
            };
        }
 
 
        public IEnumerable<string> Data
        {
            get { return _data; }
            set
            {
                _data = value;
                OnPropertyChanged();
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void FrameworkElement_OnContextMenuOpening(object sender, ContextMenuEventArgs e)
        {
            (sender as FrameworkElement).Focus();
        }
 
        private void One_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.reddit.com",
                @"http://www.yahoo.com"
            };
        }
 
        private void Two_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.cnn.com",
                @"http://www.facebook.com"
            };
        }
 
        private void Three_OnClick(object sender, RoutedEventArgs e)
        {
            Data = new List<string>
            {
                @"http://www.rt.com",
                @"http://www.bbc.com"
            };
        }
 
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
 
        private void MnuSelected_OnSubmenuOpened(object sender, RoutedEventArgs e)
        {
            mnuSelected.Items.Clear();
            mnuSelected.Items.Add(Resources["one"] as MenuItem);
            mnuSelected.Items.Add(Resources["two"] as MenuItem);
            mnuSelected.Items.Add(Resources["three"] as MenuItem);
        }
 
        private void SearchRadPane_OnMouseEnter(object sender, MouseEventArgs e)
        {
            SearchRadPane.Focus();
        }
 
        private void Hyperlink_Click(object sender, RoutedEventArgs e)
        {
            var link = e.OriginalSource as Hyperlink;
 
            if (link != null)
                Browser.Navigate(link.NavigateUri.OriginalString);
        }
    }
}

 

Thanks,

 

Alex

2 Answers, 1 is accepted

Sort by
0
Accepted
Nasko
Telerik team
answered on 15 Dec 2016, 09:17 AM
Hello Alex,

The observed by you behavior is caused by the built-in FlyoutBehavior of RadDocking and it is an expected one with its current implementation. However, you could override that default FlyoutBehavior and prevent the Pane from closing when the hyperlink gets pressed. Please, check the following forum thread where you could find a detailed information how the behavior should be overridden:
http://www.telerik.com/forums/hyperlinks-inside-autohidearea-sometimes-doesn't-work

We have also implemented the described in the forum approach in your project - please, check the attached sample that demonstrates it.

Hope this helps.

Regards,
Nasko
Telerik by Progress
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.
0
Alex
Top achievements
Rank 1
answered on 05 Oct 2018, 08:32 AM
Horrible necro but thanks to your response I was able to resolve my issue. Thanks.
Tags
Docking
Asked by
Alex
Top achievements
Rank 1
Answers by
Nasko
Telerik team
Alex
Top achievements
Rank 1
Share this question
or