Removing all borders from the grid header

4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 16 Apr 2015 Link to this post

    Hi,

    I'm trying to remove all borders from my GridView, but I'm having issues with the header. Please see the attached image to understand the problem.

    I have set the HeaderInnerBorder and HeaderOuterBorder to White. I also added the following to my RadGridView:

    <telerik:RadGridView.HeaderRowStyle>
        <Style TargetType="telerik:GridViewHeaderRow">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="White" />
        </Style>
    </telerik:RadGridView.HeaderRowStyle>


    I can't figure it out. Any ideas?

    Thanks,
    Jonathan

  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 16 Apr 2015 Link to this post

    Hi Jonathan,


    As a rule of thumb, inner broders of all elements could be modified via predefining the template of GridViewHeaderRow. The black border could come from a non-resolved resource in case you have already predefined the template of this element. 

    Can you verify this one?


    Regards,
    Vanya Pavlova
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. DevCraft banner
  4. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 16 Apr 2015 in reply to Vanya Pavlova Link to this post

    Hi Vanya,

    I'm not really sure what you mean. Would it help if I posted my style markup? Here it is anyway.

    <UserControl.Resources>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Over" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Over" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderBackground_Over" Color="#FF84902f"/>
        <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Selected" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Selected" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderBackground_Selected" Color="#FFb7c555"/>
        <Style x:Key="StretchedContentControl" TargetType="ContentControl">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
        <SolidColorBrush x:Key="GridView_SortIndicatorColor" Color="White"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <Style x:Key="ColumnHeaderGripperStyle" TargetType="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="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>
        <SolidColorBrush x:Key="GridView_HeaderForeground_Selected" Color="White"/>
        <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">
            <Grid x:Name="PART_HeaderCellGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal"/>
                            <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Ascending">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Descending">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <ScaleTransform ScaleY="1" ScaleX="1"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{TemplateBinding Background}"/>
                </Border>
                <Border x:Name="GridViewHeaderCell_Over" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}" BorderThickness="0" Background="{StaticResource GridView_HeaderBackground_Over}"/>
                </Border>
                <Border x:Name="GridViewHeaderCell_Selected" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}" BorderThickness="0" Background="{StaticResource GridView_HeaderBackground_Selected}"/>
                </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}" Style="{StaticResource StretchedContentControl}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Fill="{StaticResource GridView_SortIndicatorColor}" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" 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" Margin="0,0,8,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding FilteringUIVisibility}"/>
                <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
            </Grid>
        </ControlTemplate>
        <SolidColorBrush x:Key="GridView_HeaderBackground" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderOuterBorder" Color="White"/>
        <SolidColorBrush x:Key="GridView_HeaderForeground" Color="#b7c555"/>
        <Style TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>
            <Setter Property="Background" Value="{StaticResource GridView_HeaderBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderOuterBorder}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="5,0,3,0"/>
            <Setter Property="Foreground" Value="{StaticResource GridView_HeaderForeground}"/>
        </Style>
     
        <misc:ReportedTimeButtonStyleSelector x:Key="ReportedTimeButtonStyleSelector">
            <misc:ReportedTimeButtonStyleSelector.PartDayStyle>
                <Style TargetType="calendar:CalendarButton">
                    <Setter Property="Foreground" Value="#484848" />
                    <Setter Property="Background" Value="#E2EAC5" />
                </Style>
            </misc:ReportedTimeButtonStyleSelector.PartDayStyle>
            <misc:ReportedTimeButtonStyleSelector.HalfDayStyle>
                <Style TargetType="calendar:CalendarButton">
                    <Setter Property="Foreground" Value="#484848" />
                    <Setter Property="Background" Value="#E2EAC5" />
                </Style>
            </misc:ReportedTimeButtonStyleSelector.HalfDayStyle>
            <misc:ReportedTimeButtonStyleSelector.FullDayStyle>
                <Style TargetType="calendar:CalendarButton">
                    <Setter Property="Foreground" Value="#484848" />
                    <Setter Property="Background" Value="#E2EAC5" />
                </Style>
            </misc:ReportedTimeButtonStyleSelector.FullDayStyle>
            <misc:ReportedTimeButtonStyleSelector.HolidayStyle>
                <Style TargetType="calendar:CalendarButton">
                    <Setter Property="Foreground" Value="#a8a8a8" />
                    <Setter Property="Background" Value="White" />
                </Style>
            </misc:ReportedTimeButtonStyleSelector.HolidayStyle>
            <misc:ReportedTimeButtonStyleSelector.DefaultStyle>
                <Style TargetType="calendar:CalendarButton">
                    <Setter Property="Foreground" Value="#484848" />
                    <Setter Property="Background" Value="White" />
                </Style>
            </misc:ReportedTimeButtonStyleSelector.DefaultStyle>
        </misc:ReportedTimeButtonStyleSelector>
             
        <Style TargetType="telerik:RadGridView">
            <Setter Property="BorderThickness" Value="0,1,0,0" />
        </Style>
     
        <Style TargetType="telerik:GridViewFooterCell">
            <Setter Property="BorderThickness" Value="0" />
        </Style>
             
        <Style TargetType="telerik:GridViewHeaderRow">
            <Setter Property="BorderThickness" Value="1,2,3,4" />
        </Style>
    </UserControl.Resources>

  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 16 Apr 2015 Link to this post

    Hi Jonathan,


    I've checked your mark-up and the behavior you get is expected. You should predefine the template of GridViewHeaderRow and remove the inner borders from there. 
    Hope this helps. 


    Regards,
    Vanya Pavlova
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top