[Solved] Hyperlink Column issues

[Michael]

Hello,

I am creating a Hyperlink control inside a column. I have followed your example and I am seeing some stange results.

In my code I am unable change the Row focus by clicking on the column with the hyperlink. (well rather clicking the hyperlink, if I click outside the hyperlink but still inside the cell, it will change focus, and I assume it is because it doesn't pass on the Mouse event args but instead handles them)

I also notice that simply click on the hyperlink will not make it navigate to the Uri if that cell doesn't have focus, instead I must click to select the cell, then click again to navigate. This is not the case in your example, and I am unsure what I am doing differently.

Here is a simplified code chunk with demonstrates these 2 issues:

Here is the XAML:

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Silver.App"
    xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView">
    <Grid>
        <Controls:RadGridView x:Name="RadGridView1" IsReadOnly="True" AutoGenerateColumns="False">
            <Controls:RadGridView.Columns>
                <Controls:GridViewDataColumn HeaderText="T0" />
                <Controls:GridViewDataColumn HeaderText="T1" />
                <Controls:GridViewDataColumn HeaderText="T2" />

                <Controls:GridViewDataColumn Width="550" HeaderText="Product (Template)" DataMemberPath="Name">
                    <Controls:GridViewDataColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                            <HyperlinkButton Content="Google" TargetName="_blank" NavigateUri="http://www.google.com" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        </Style>
                    </Controls:GridViewDataColumn.CellStyle>
                </Controls:GridViewDataColumn>

                <Controls:GridViewDataColumn HeaderText="T3" />
                <Controls:GridViewDataColumn HeaderText="T4" />
                <Controls:GridViewDataColumn HeaderText="T5" />
            </Controls:RadGridView.Columns>
        </Controls:RadGridView>
    </Grid>

Here is the code behind:

        public TestPage()
        {
            InitializeComponent();

            List<string> data = new List<string>() { "TEST0", "TEST1", "TEST2", "TEST3", "TEST4", "TEST5", "TEST6", "TEST7" };

            this.RadGridView1.ItemsSource = data;
        }

I have tried defining the Hyperlink column template several ways, but they all seem to result in these 2 issues.

Could you please advise me what I am doing wrong?

[Vlad]

Hi Michael,

You can move the focuses/selected row programmatically if you handle HyperlinkButton Click event:

XAML
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                            <HyperlinkButton Click="HyperlinkButton_Click" Content="Google" TargetName="_blank" NavigateUri="http://www.google.com" />
                                        </Border>
                                    </ControlTemplate>

C#
        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            GridViewRow parentRow = ((HyperlinkButton) sender).ParentOfType<GridViewRow>();
            parentRow.IsCurrent = parentRow.IsSelected = true;
        }

Greetings,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Michael]

Thank you for the response,

However, this does not fix the entire problem. The issue where clicking on a cell that contains the hyperlink does not fire off the click event in the hyperlink until after the cell containing it is clicked a second time. My code sample should demonstrate this. Simply run the code, and then click a cell with they hyperlink in it. You would think that the HyperLink button would recieve the click evet, but it does not. Then click the same cell again, it is at that point when the new web browser pops up.

So I altered my code to try a few different controls.

                <Controls:GridViewDataColumn HeaderText="T2">
                    <Controls:GridViewDataColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" >
                                            <Button Content="Google (Button)" Click="Button_Click" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        </Style>
                    </Controls:GridViewDataColumn.CellStyle>
                </Controls:GridViewDataColumn>

                <Controls:GridViewDataColumn Width="550" HeaderText="Product (Template)" DataMemberPath="Name">
                    <Controls:GridViewDataColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" >
                                            <HyperlinkButton Click="HyperlinkButton_Click" Content="Google (HyperLink)" TargetName="_blank" NavigateUri="http://www.google.com" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        </Style>
                    </Controls:GridViewDataColumn.CellStyle>
                </Controls:GridViewDataColumn>

                <Controls:GridViewDataColumn HeaderText="T3" >
                    <Controls:GridViewDataColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" >
                                            <TextBlock Text="Google.com (TextBlock)" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" Foreground="Blue" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        </Style>
                    </Controls:GridViewDataColumn.CellStyle>
                </Controls:GridViewDataColumn>

The label's mouse down event is fired the first time I click the cell, however, when I click the button or hyperlink, it does not fire the click event.

~Michael

[Vlad]

Hi Michael,

Do you have our latest SP?

Greetings,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Michael]

After the results from my last tests, I realized that it is obviously something with the Button classes. And the MouseDown events are defiantly being recieved, so finally I tired changing the ClickMode to Press and now the button controls are now properly firing the click event.

I do have one other question about the selection issue. What if the Grid has MultipleSelection set to true? How would I handle the various modifier keys. Here is what I have so far (Note: I made ModifterKeys extensions for each Key)

        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            GridViewRow parentRow = ((HyperlinkButton)sender).ParentOfType<GridViewRow>();

            if (Keyboard.Modifiers.IsControl())
            {
                parentRowparentRow.IsCurrent = parentRow.IsSelected = true;
            }
            else if (Keyboard.Modifiers.IsShift())
            {
                // How to do this one...
            }
            else
            {
                this.radGridView.UnselectAll();
                parentRowparentRow.IsCurrent = parentRow.IsSelected = true;
            }
        }

~Michael

[Vlad]

Hi Michael,

Generally IsSelected will do the work with both single and multiple selection. You can use also SelectedRecords property to add/remove selection.

Regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.