Remove grouping gridlines from WPFRadGridView

7 posts, 1 answers
  1. Bartley
    Bartley avatar
    16 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    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
  2. Yoan
    Admin
    Yoan avatar
    1188 posts

    Posted 22 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. Bartley
    Bartley avatar
    16 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    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>

  4. Bartley
    Bartley avatar
    16 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

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

  5. Bartley
    Bartley avatar
    16 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2013 Link to this post

    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>
  6. Answer
    Yoan
    Admin
    Yoan avatar
    1188 posts

    Posted 27 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Bartley
    Bartley avatar
    16 posts
    Member since:
    Mar 2013

    Posted 02 Apr 2013 Link to this post

    Thanks that got it!
Back to Top