Can't remove borders from GridView header cells

1 Answer 542 Views
GridView Styling
loic
Top achievements
Rank 1
Iron
loic asked on 08 Sep 2021, 10:45 AM

Hello, I can't find how to remove the border around the header cells in my radgridview as shown in the screen shot

Here's the code for the radgridview with a column and the code for my styles :


<Grid Grid.Row="2" Grid.Column="1" Background="White" >
                <!-- Calibrators TAB -->
                <Grid x:Name="TabCalibrators" Visibility="Visible">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="775px"></RowDefinition>
                    </Grid.RowDefinitions>
                    <!--<Rectangle Width="500px" Height="2" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Top"/>-->
                    <Border x:Name="BDRoundedCalibrators" Background="{StaticResource Zentech_DarkGray}" BorderThickness="0" BorderBrush="{x:Null}" CornerRadius="0,0,12,0"/>
                    <Line X1="0" Y1="0" Stroke="White" StrokeThickness="2" X2="1735" Y2="0" Grid.Row="0"/>
                    <telerik:RadGridView x:Name="GridCalibrators"
                            BorderBrush="Transparent"
                            BorderThickness="0"
                            AutoGenerateColumns="False"
                            IsReadOnly="True" 
                            CanUserSelect="False"
                            GridLinesVisibility="None" 
                            CanUserReorderColumns="False" 
                            CanUserSortColumns="False" 
                            Background="White"  
                            CanUserSelectColumns="False"
                            ShowGroupPanel="False"        
                            CanUserDeleteRows="False"  
                            CanUserResizeColumns="False" 
                            CanUserResizeRows="False"  
                            RowIndicatorVisibility="Collapsed" 
                            CanUserFreezeColumns="False" 
                            ShowSearchPanel="False"
                            ShowColumnSortIndexes="False"
                            MergedCellsDirection="Vertical"
                            GroupRenderMode="Flat"
                            CanUserSearch="False"
                            CanUserSortGroups="False"
                            IsFilteringAllowed="False"
                            ReorderColumnsMode="None"                                         
                            HeaderRowStyle="{StaticResource RadGridViewColumnHeaderStyle}"
                            RowStyle="{StaticResource RadGridViewRow_Standard}"
                            Grid.Row="0"
                            >
                        <!--RowStyle="{StaticResource RadGridViewRow_Standard}"-->
                        <telerik:RadGridView.OpacityMask>
                            <VisualBrush Visual="{Binding ElementName=BDRoundedCalibrators}"/>
                        </telerik:RadGridView.OpacityMask>
                        <telerik:RadGridView.Resources>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFFF"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="#5D6467"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFFFFF"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="#5D6467"/>
                        </telerik:RadGridView.Resources>
                        <telerik:RadGridView.Columns>
                            
                            <!-- Status -->
                            <telerik:GridViewDataColumn Header="Status" Width="175" 
                                                        HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}" 
                                                        DataMemberBinding="{Binding WellStatus}"
                                                        IsCellMergingEnabled="False"
                                                        HeaderTextAlignment="Center">
                                <telerik:GridViewDataColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center" >
                                            <Image x:Name="IconStatus" Height="37" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,0,0">
                                                <Image.Style>
                                                    <Style TargetType="{x:Type Image}">
                                                        <Style.Triggers>
                                                            <DataTrigger Value="Completed" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconCompleted}"/>
                                                            </DataTrigger>
                                                            <DataTrigger Value="Processing" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconProcessing}"/>
                                                            </DataTrigger>
                                                            <DataTrigger Value="Aborted" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconAborted}"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                            <TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding WellStatus}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                            </telerik:GridViewDataColumn>

                            <telerik:GridViewPinRowColumn MinWidth="0" Width="1" HeaderCellStyle="{StaticResource RadGridViewColumnSeparatorSmallStyle}" />

                            <!--PlateSerialNumber-->
                            <telerik:GridViewDataColumn  Header="Plate serial number" Width="180" 
                                                         HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}" 
                                                         DataMemberBinding="{Binding PlateBarcode}"
                                                         IsCellMergingEnabled="False"
                                                         TextAlignment="Center"/>

 


    <Style  x:Key="RadGridViewHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Setter Property="Background" Value="Transparent" />
        <!--<Setter Property="HorizontalAlignment" Value="Left"></Setter>-->
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
    </Style>

    <Style x:Key="RadGridViewColumnHeaderStyle" TargetType="{x:Type telerik:GridViewHeaderRow}">
        <Setter Property="Background" Value="{StaticResource Zentech_DarkGray}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="TextElement.FontFamily" Value="{StaticResource PrimaryFont}"/>
        <Setter Property="TextElement.FontSize" Value="16pt"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Height" Value="55"/>
        <Setter Property="BorderThickness" Value="0 0 0 0"/>
        <Setter Property="Padding" Value="0"/>
    </Style>


1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 10 Sep 2021, 12:15 PM

Hello Ioic,

Using the provided snippets, I was unable to match the look present in the screenshot-borders.png image. That said, could you edit the attached project to match, as close as possible, the one from the image?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
GridView Styling
Asked by
loic
Top achievements
Rank 1
Iron
Answers by
Stenly
Telerik team
Share this question
or