Display Hyperlink within GridViewHeaderCell

3 posts, 1 answers
  1. Jack
    Jack avatar
    4 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    I would like to display a hyperlink in a GridViewHeaderCell. I have found this thread. I would like to do this in XAML. I have extracted the markup for a GridViewHeaderCell and modified a derived style with no luck (below). I have two questions:

    1. How can modify the derived style to display a hyperlink as well as the filter control (ie. only override the TextBlock displaying the column name)?
    2. How can I bind both the display text and navigation URI to this hyperlink control?

    <Style x:Key="GridViewHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                        <Grid x:Name="PART_OuterGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="Normal"/>
                                        <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="MouseOver"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="Black"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Ascending">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="Black"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Descending">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="Black"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="PART_HeaderCellGrid" MinHeight="26">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                                    <Border BorderBrush="#FF4B4B4B" BorderThickness="1" Background="{TemplateBinding Background}"/>
                                </Border>
                                <Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                                    <Border BorderBrush="White" BorderThickness="1">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                                <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                                <GradientStop Color="#FFFFD25A" Offset="0.43"/>
                                                <GradientStop Color="#FFFEEBAE" Offset="0.42"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF616161" Offset="0"/>
                                            <GradientStop Color="#FF989898" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>
                                    <Border BorderThickness="1">
                                        <Border.BorderBrush>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFB69A78"/>
                                                <GradientStop Color="#FFFFE17A" Offset="0.126"/>
                                            </LinearGradientBrush>
                                        </Border.BorderBrush>
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFD74E" Offset="0.996"/>
                                                <GradientStop Color="#FFFFDCAB" Offset="0.17"/>
                                                <GradientStop Color="#FFFFB062" Offset="0.57"/>
                                                <GradientStop Color="#FFFFD18F" Offset="0.56"/>
                                                <GradientStop Color="#FFFFBA74"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentControl.Style>
                                        <Style TargetType="{x:Type ContentControl}">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                        </Style>
                                    </ContentControl.Style>
                                </ContentControl>
                                <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M256,328L248,336 264,336" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" SnapsToDevicePixels="True" VerticalAlignment="Top" Width="5">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleY="1" ScaleX="1"/>
                                            <SkewTransform AngleY="0" AngleX="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                                <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,4,0" Visibility="{TemplateBinding FilteringUIVisibility}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </telerik:FilteringDropDown>
                                <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}">
                                    <Thumb.Style>
                                        <Style TargetType="{x:Type Thumb}">
                                            <Setter Property="Width" Value="8"/>
                                            <Setter Property="Background" Value="Transparent"/>
                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                            <Setter Property="BorderThickness" Value="0"/>
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="Cursor" Value="SizeWE"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                                <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}">
                                    <Thumb.Style>
                                        <Style TargetType="{x:Type Thumb}">
                                            <Setter Property="Width" Value="8"/>
                                            <Setter Property="Background" Value="Transparent"/>
                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                            <Setter Property="BorderThickness" Value="0"/>
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="Cursor" Value="SizeWE"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Grid>
                            <telerik:FieldFilterControl x:Name="PART_FieldFilterControl" Column="{x:Null}" IsTabStop="False" Grid.Row="1" Visibility="{TemplateBinding FieldFilterControlVisibility}">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:FieldFilterControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF5B5B5B" Offset="1"/>
                        <GradientStop Color="#FF868686"/>
                        <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
                        <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="5,0,3,0"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="DropMarkPen">
                <Setter.Value>
                    <Pen Brush="White" Thickness="2"/>
                </Setter.Value>
            </Setter>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>
         
        <!-- Hyperlink GridViewHeaderCell -->
        <Style x:Key="HyperlinkHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}"
               BasedOn="{StaticResource GridViewHeaderCellStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                        <Grid x:Name="PART_OuterGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid x:Name="PART_HeaderCellGrid" MinHeight="26">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentControl.Style>
                                        <Style TargetType="{x:Type ContentControl}">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                        </Style>
                                    </ContentControl.Style>
                                </ContentControl>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  2. Answer
    Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 29 Mar 2013 Link to this post

    Hello,

    Actually the GridView's Header is an object and you could directly assign any object for it.
    For example:

    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
        <telerik:GridViewDataColumn.Header>
            <Your Hyperlink here/>
        </telerik:GridViewDataColumn.Header>
    </telerik:GridViewDataColumn>
      Regards,
    Didie
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. Jack
    Jack avatar
    4 posts
    Member since:
    Mar 2013

    Posted 29 Mar 2013 Link to this post

    Thanks, that did the trick.
Back to Top