Remove grouping gridlines from WPFRadGridView

[Bartley]

Attached is one of the sample gridviews from the Demos, but I was wondering how you can remove or edit (change the color) of these gridlines that appear after you group items.

Which template do I need to edit if I can edit them.



Thanks

[Yoan]

Hi Bartley,

In order to achieve your goal, you can predefine the templates of GridViewGroupRow and GridViewIndentCell against Windows8 theme. Please check this help article for a reference. Moreover, I can suggest you to check this forum post as well.

I hope this helps.

All the best,
Yoan
the Telerik team

[Bartley]

Thank-you for the reply,

I was able to get rid of the vertical lines with this from the demo, but the horizontal lines are still there,  I will be testing this,

 

<Style

 

TargetType="grid:GridViewIndentCell">

 

<Setter Property="Background" Value="{StaticResource MainBrush}" />

 

<Setter Property="BorderBrush" Value="{StaticResource BasicBrush}"/>

 

<Setter Property="BorderThickness" Value="0"/>

 

<Setter Property="VerticalContentAlignment" Value="Stretch" />

 

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

 

<Setter Property="Padding" Value="0" />

 

<Setter Property="Template">

 

<Setter.Value>

 

<ControlTemplate TargetType="grid:GridViewIndentCell">

 

<Border BorderBrush="{TemplateBinding BorderBrush}"

 

Background="{TemplateBinding Background}"

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

Padding="{TemplateBinding Padding}"

 

BorderThickness="{TemplateBinding BorderThickness}" Width="25" />

 

</ControlTemplate>

 

</Setter.Value>

 

</Setter>

 

</Style>

[Bartley]

For the GridViewGroupRowStyle I changed all the grey colors to transparent and tested and none hid the horizontal grids. 

[Bartley]

Here is the grouprowstyle

<telerik:RadGridView.Resources><BR>

<Style x:Key="GridViewGroupRowStyle1" TargetType="{x:Type
telerik:GridViewGroupRow}"><BR>

<Setter Property="Template"><BR>

<Setter.Value><BR>

<ControlTemplate TargetType="{x:Type telerik:GridViewGroupRow}"><BR>

<Grid x:Name="PART_GroupExpanderGrid"><BR>

<Grid.ColumnDefinitions><BR>

<ColumnDefinition Width="Auto"/><BR>

<ColumnDefinition Width="Auto"/><BR>

<ColumnDefinition Width="*"/><BR>

</Grid.ColumnDefinitions><BR>

<Grid.RowDefinitions><BR>

<RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding
MinHeight}"/><BR>

<RowDefinition x:Name="ContentRow" Height="Auto"/><BR>

</Grid.RowDefinitions><BR>

<VisualStateManager.VisualStateGroups><BR>

<VisualStateGroup x:Name="ExpandStateGroup"><BR>

<VisualState x:Name="Expanded"><BR>

<Storyboard><BR>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Content"><BR>

<DiscreteObjectKeyFrame KeyTime="0"><BR>

<DiscreteObjectKeyFrame.Value><BR>

<Visibility>Visible</Visibility><BR>

</DiscreteObjectKeyFrame.Value><BR>

</DiscreteObjectKeyFrame><BR>

</ObjectAnimationUsingKeyFrames><BR>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="BottomBorder"><BR>

<DiscreteObjectKeyFrame KeyTime="0"><BR>

<DiscreteObjectKeyFrame.Value><BR>

<Visibility>Visible</Visibility><BR>

</DiscreteObjectKeyFrame.Value><BR>

</DiscreteObjectKeyFrame><BR>

</ObjectAnimationUsingKeyFrames><BR>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness"
Storyboard.TargetName="IconOuterBorder"><BR>

<DiscreteObjectKeyFrame KeyTime="0"><BR>

<DiscreteObjectKeyFrame.Value><BR>

<Thickness>0</Thickness><BR>

</DiscreteObjectKeyFrame.Value><BR>

</DiscreteObjectKeyFrame><BR>

</ObjectAnimationUsingKeyFrames><BR>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness"
Storyboard.TargetName="IconInnerBorder"><BR>

<DiscreteObjectKeyFrame KeyTime="0"><BR>

<DiscreteObjectKeyFrame.Value><BR>

<Thickness>1,1,0,0</Thickness><BR>

</DiscreteObjectKeyFrame.Value><BR>

</DiscreteObjectKeyFrame><BR>

</ObjectAnimationUsingKeyFrames><BR>

<DoubleAnimationUsingKeyFrames BeginTime="0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
Storyboard.TargetName="ExpanderButton"><BR>

<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/><BR>

</DoubleAnimationUsingKeyFrames><BR>

</Storyboard><BR>

</VisualState><BR>

<VisualState x:Name="Collapsed"><BR>

<Storyboard><BR>

<DoubleAnimationUsingKeyFrames BeginTime="0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
Storyboard.TargetName="ExpanderButton"><BR>

<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/><BR>

</DoubleAnimationUsingKeyFrames><BR>

</Storyboard><BR>

</VisualState><BR>

</VisualStateGroup><BR>

</VisualStateManager.VisualStateGroups><BR>

<Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}"
Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}"
telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"><BR>

<Grid><BR>

<Grid.ColumnDefinitions><BR>

<ColumnDefinition Width="25"/><BR>

<ColumnDefinition Width="Auto"/><BR>

<ColumnDefinition Width="*"/><BR>

</Grid.ColumnDefinitions><BR>

<Border Grid.Column="2" HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><BR>

<Border.Visibility><BR>

<Binding Path="ShowHeaderAggregates" RelativeSource="{RelativeSource
TemplatedParent}"><BR>

<Binding.Converter><BR>

<telerik:BooleanToVisibilityConverter/><BR>

</Binding.Converter><BR>

</Binding><BR>

</Border.Visibility><BR>

<telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}" IsTabStop="False"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><BR>

<telerik:AggregateResultsList.ItemsPanel><BR>

<ItemsPanelTemplate><BR>

<StackPanel IsItemsHost="True" Orientation="Horizontal"/><BR>

</ItemsPanelTemplate><BR>

</telerik:AggregateResultsList.ItemsPanel><BR>

<telerik:AggregateResultsList.ItemTemplate><BR>

<DataTemplate><BR>

<telerik:GridViewAggregateResultCell AggregateResult="{Binding}"
IsTabStop="False"><BR>

<telerik:StyleManager.Theme><BR>

<telerik:Office_BlackTheme/><BR>

</telerik:StyleManager.Theme><BR>

</telerik:GridViewAggregateResultCell><BR>

</DataTemplate><BR>

</telerik:AggregateResultsList.ItemTemplate><BR>

</telerik:AggregateResultsList><BR>

</Border><BR>

<Border x:Name="IconOuterBorder" BorderBrush="#FF848484"
BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"><BR>

<Border x:Name="IconInnerBorder" BorderBrush="White"
BorderThickness="1,1,0,1"><BR>

<Path x:Name="ExpanderButton" Grid.Column="0" Data="M0,0L1,0 2,0 2,0.99999991
3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991
5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2
1,0.99999991 0,0.99999991z" Fill="Black" HorizontalAlignment="Left" Height="5"
Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7"><BR>

<Path.RenderTransform><BR>

<RotateTransform/><BR>

</Path.RenderTransform><BR>

</Path><BR>

</Border><BR>

</Border><BR>

<ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}"
Grid.ColumnSpan="3" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource
TemplatedParent}}" Opacity="0"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/><BR>

<ToggleButton BorderBrush="{x:Null}" BorderThickness="0"
Background="Transparent" Grid.Column="1" IsTabStop="{TemplateBinding IsTabStop}"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource
TemplatedParent}}" Padding="0,0,10,0"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"><BR>

<ToggleButton.Style><BR>

<Style TargetType="{x:Type ToggleButton}"><BR>

<Setter Property="Template"><BR>

<Setter.Value><BR>

<ControlTemplate TargetType="{x:Type ToggleButton}"><BR>

<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding
Background}"><BR>

<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding
ContentStringFormat}"/><BR>

</Border><BR>

</ControlTemplate><BR>

</Setter.Value><BR>

</Setter><BR>

<Setter Property="HorizontalContentAlignment" Value="Left"/><BR>

<Setter Property="VerticalContentAlignment" Value="Center"/><BR>

<Setter Property="Padding" Value="9,0,0,0"/><BR>

</Style><BR>

</ToggleButton.Style><BR>

<ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}"
Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0"
VerticalAlignment="Center"/><BR>

</ToggleButton><BR>

<Border BorderBrush="#FF848484" BorderThickness="0,0,0,1" Grid.ColumnSpan="2"
Grid.Column="1"
telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"><BR>

<Border BorderBrush="White" BorderThickness="0,1,1,1"/><BR>

</Border><BR>

</Grid><BR>

</Border><BR>

<Border x:Name="PART_IndicatorPresenter" BorderBrush="#FF848484"
BorderThickness="0,0,1,1" Grid.Column="0"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{TemplateBinding RowIndicatorVisibility}"
VerticalAlignment="Stretch" Width="25"><BR>

<Border BorderBrush="White" BorderThickness="1"
Background="#FFE4E4E4"/><BR>

</Border><BR>

<telerik:IndentPresenter Background="{TemplateBinding Background}"
Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding Level}"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"><BR>

<telerik:StyleManager.Theme><BR>

<telerik:Office_BlackTheme/><BR>

</telerik:StyleManager.Theme><BR>

</telerik:IndentPresenter><BR>

<Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1"
Visibility="Collapsed"><BR>

<StackPanel><BR>

<telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"
CanHorizontallyScroll="False" CanVerticallyScroll="False"/><BR>

<telerik:GridViewGroupFooterRow x:Name="Footer" IsTabStop="False"><BR>

<telerik:StyleManager.Theme><BR>

<telerik:Office_BlackTheme/><BR>

</telerik:StyleManager.Theme><BR>

</telerik:GridViewGroupFooterRow><BR>

</StackPanel><BR>

</Border><BR>

<Border x:Name="BottomBorder" BorderBrush="#FF848484"
BorderThickness="0,0,0,1" Grid.Column="2" Grid.Row="1"
telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"
Visibility="Collapsed" VerticalAlignment="Bottom"/><BR>

</Grid><BR>

</ControlTemplate><BR>

</Setter.Value><BR>

</Setter><BR>

<Setter Property="GroupHeaderTemplate"><BR>

<Setter.Value><BR>

<DataTemplate><BR>

<ContentPresenter Content="{Binding Header}"/><BR>

</DataTemplate><BR>

</Setter.Value><BR>

</Setter><BR>

<Setter Property="Background" Value="#FFE4E4E4"/><BR>

<Setter Property="BorderBrush" Value="#FFCBCBCB"/><BR>

<Setter Property="BorderThickness" Value="0"/><BR>

<Setter Property="VerticalContentAlignment" Value="Center"/><BR>

<Setter Property="HorizontalContentAlignment" Value="Left"/><BR>

<Setter Property="Padding" Value="10,0,0,0"/><BR>

<Setter Property="MinHeight" Value="25"/><BR>

<Setter Property="AllowDrop" Value="True"/><BR>

<Setter Property="SnapsToDevicePixels" Value="True"/><BR>

</Style><BR>

</telerik:RadGridView.Resources>

[Yoan]

Hello Bartley,

I have extracted the mentioned templates and I have set the BorderThickness property of some elements to "0". Please, find attached a sample project showing you the approach.

I hope this helps.

 

All the best,
Yoan
the Telerik team

[Bartley]

Thanks that got it!