Group style template; can't hide row indent

[Nicole]

I have a grid with two (fixed) groups.  For the parent group, want to show the header row and the row indicator (if that's what it's called), but for the child group I want to hide both.  My conditional style selector is working properly, but when the child group is rendered in the application, it shows up anyway.
 
In Expression Blend, I have collapsed the row indicator for the child group and it previews properly, but when I run the project it shows up anyway.  I suspect it is inheriting something.  Can someone tell me what property I've missed?  My style code is below and I've attached a screen shot of what I have, and what I want to get rid of marked in red.

<telerik:Office_BlackTheme x:Key="Theme"/>
            <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <SolidColorBrush x:Key="ControlOuterBorder" Color="#FF06313A" Opacity=".5"></SolidColorBrush>
            <SolidColorBrush x:Key="ControlInnerBorder" Color="White"/>
            <SolidColorBrush x:Key="GridView_GroupRowIndicator" Color="Black"/>
            <ControlTemplate x:Key="GridViewGroupToggleButtonTemplate" TargetType="ToggleButton">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
            <Style x:Key="GridViewGroupToggleButtonStyle" TargetType="ToggleButton">
                <Setter Property="Template" Value="{StaticResource GridViewGroupToggleButtonTemplate}"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="9,0,0,0"/>
            </Style>
            <SolidColorBrush x:Key="GridView_RowIndicatorCellBackground" Color="#FFE4E4E4"/>
            <ControlTemplate x:Key="GridViewGroupRowTemplate" TargetType="telerik:GridViewGroupRow">
                <Grid x:Name="PART_GroupExpanderGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding MinHeight}"/>
                        <RowDefinition x:Name="ContentRow" Height="Auto"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ExpandStateGroup">
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0,0,0,0"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1,1,0,0"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="180"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed">
                        <Grid Visibility="Collapsed">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="25"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="{Binding ShowHeaderAggregates, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" ItemsSource="{TemplateBinding AggregateResults}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <telerik:AggregateResultsList.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"/>
                                        </ItemsPanelTemplate>
                                    </telerik:AggregateResultsList.ItemsPanel>
                                    <telerik:AggregateResultsList.ItemTemplate>
                                        <DataTemplate>
                                            <telerik:GridViewAggregateResultCell AggregateResult="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                        </DataTemplate>
                                    </telerik:AggregateResultsList.ItemTemplate>
                                </telerik:AggregateResultsList>
                            </Border>
                            <Border x:Name="IconOuterBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="Collapsed">
                                <Border x:Name="IconInnerBorder" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1,1,0,1" Visibility="Collapsed">
                                    <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="{StaticResource GridView_GroupRowIndicator}" HorizontalAlignment="Left" Height="5" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7">
                                        <Path.RenderTransform>
                                            <RotateTransform/>
                                        </Path.RenderTransform>
                                    </Path>
                                </Border>
                            </Border>
                            <ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Margin="-13,0,3,0" d:LayoutOverrides="GridBox"/>
                            <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" Style="{StaticResource GridViewGroupToggleButtonStyle}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="Collapsed">
                                <ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center"/>
                            </ToggleButton>
                            <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Grid.ColumnSpan="2" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed">
                                <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0,1,1,1" Visibility="Collapsed"/>
                            </Border>
                        </Grid>
                    </Border>
                    <Border x:Name="PART_IndicatorPresenter" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,1,1" Grid.Column="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="12" HorizontalAlignment="Left">
                        <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{StaticResource GridView_RowIndicatorCellBackground}" HorizontalAlignment="Left" Width="12" Visibility="Collapsed"/>
                    </Border>
                    <telerik:IndentPresenter Background="{TemplateBinding Background}" Grid.Column="1" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                    <Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1" Visibility="Collapsed">
                        <StackPanel>
                            <telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                            <telerik:GridViewGroupFooterRow x:Name="Footer" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        </StackPanel>
                    </Border>
                    <Border x:Name="BottomBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,2" Grid.Column="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
                </Grid>
            </ControlTemplate>
            <DataTemplate x:Key="GroupHeaderTemplate">
                <ContentPresenter Content="{Binding Header}"/>
            </DataTemplate>
            <SolidColorBrush x:Key="GridView_GroupRowBackground" Color="#FFE4E4E4"/>
            <SolidColorBrush x:Key="GridView_GridLinesItemBorder" Color="#FFCBCBCB"/>
            <Style x:Key="GridViewGroupRowStyleID" TargetType="telerik:GridViewGroupRow">
                <Setter Property="Template" Value="{StaticResource GridViewGroupRowTemplate}"/>
                <Setter Property="GroupHeaderTemplate" Value="{StaticResource GroupHeaderTemplate}"/>
                <Setter Property="Background" Value="{StaticResource GridView_GroupRowBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource GridView_GridLinesItemBorder}"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="Padding" Value="10,0,0,0"/>
                <Setter Property="MinHeight" Value="20"/>
            </Style>

[Vanya Pavlova]

Hi Nicole,

 

Actually this is a part from GridViewRow and is called GridViewIndentCell, which appears when you have hierarchical structure or you have performed grouping in RadGridView. If you want to remove this element you may define an implicit style targeted at GridViewIndentCell and set its Visibility property to Collapsed:

<Style TargetType="telerik:GridViewIndentCell">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

Will you verify how this works for you? 

All the best,
Vanya Pavlova
the Telerik team

[Nicole]

Thanks, Vanya.  

In order to use this, I created a conditional style for the GridViewRow (using the RowStyleSelector), but for the converter class I can't figure out how to get the group of the row.  I need to hide the indicator row only if it's a subgroup; I need them to show for the top level group.  I need something like (air code):

GridViewRow row = value as GridViewRow;
IGroup group = row.Item.Group as IGroup;

if (group != null)
{
    //if this row group has a parent group, don't apply the style
    return group.HasSubgroups ? false : true;
}

...

Can you assist?

Thanks,
Nicole

[Vanya Pavlova]

Hi Nicole,

 

What you may do is to directly find the GridViewIndentCell using the ChildrenOfType extension method and apply its style or directly set a property as shown below, something like the following:

var row = e.Row as GridViewRow;
           var element = e.DataElement as Item;
           if (row != null&&element.Property2==true)
           {
               var indent = row.ChildrenOfType<GridViewIndentCell>().FirstOrDefault();
               if (indent != null)
               {
                   indent.Visibility = Visibility.Collapsed;
               }
           }

May you verify how this works for you? 

Regards,
Vanya Pavlova
the Telerik team

[Nicole]

What reference do I need for Item?  I'm refering to this row:

var element = e.DataElement as Item;

[Vanya Pavlova]

Hi Nicole,

 


I have simply subscribed to the RowLoaded event of RadGridView to perform the test.  It simply emulates the behavior of the conditional style selectors for GridViewIndentCells. Feel free to change it in the way you need.
The essence of this code is to demonstrate how to find the GridViewIndentCell in a row based on a condition.

Regards,
Vanya Pavlova
the Telerik team

[Nicole]

Okay, got it.  Thanks for your help!

For future reference I used:
 

void grdNMCSDetails_RowLoaded(object sender, RowLoadedEventArgs e)
{
    if (e.Row is GridViewRow && !(e.Row is GridViewNewRow))
    {
        var row = e.Row as GridViewRow;
        if (row != null && row.IndentLevel > 1)
        {
            var indent = row.ChildrenOfType<GridViewIndentCell>().FirstOrDefault();
            if (indent != null)
            {
                indent.Visibility = Visibility.Collapsed;
            }
        }
    }
}

[Nicole]

Sorry, I spoke too soon.  We still have the extra indention in the header row, and it is causing the header items not to line up with the item rows.  Can you tell me the name of the control item for that?  A screen shot is attached.

[Nicole]

As soon as I posted this, I found it.  I'm good to go now.

if (e.Row is GridViewHeaderRow)
{
    var row = e.Row as GridViewHeaderRow;
    if (row != null && row.IndentLevel > 1)
    {
        var indent = row.ChildrenOfType<GridViewHeaderIndentCell>().FirstOrDefault();
        if (indent != null)
        {
            indent.Visibility = Visibility.Collapsed;
        }
    }
}

[John]

Sorry to open an old thread....

I have followed the instructions above changing the GridViewIndentCell visibility, which hides the cell, but leaves a gap on the right hand side of the row instead (see attached).

<Style TargetType="telerik:GridViewIndentCell">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

How do I fix this?

Thanks,
John

[Dimitrina]

Hello John,

GridViewIndicatorCell is an old element, which is no longer used in the very latest version of RadGridView. Therefore, we obsoleted this element and removed its style in Q2 2014. 
As an alternative solution, you can substitute it with a single Border element or any ContentControl. 

Regards,
Didie
Telerik

 

 

[John]

Hello Didie,

Did you mean the GridViewIndicatorCell, I was changing the Indent cell?

I have version 2014.2.617.45 installed, so how should I be hiding the group indent? If I remove the code above that sets the visibility of the GridViewIndentCell, how should I be hiding it? See attached.

Regards,
John

[Dimitrina]

Hello John,

You are right, I apologize for this misunderstanding on my end.
It seems in your case you have one column with Width="*" which is supposed to occupy all the available space. The little space is actually the Background of RadGridView which is left after you hide the GridViewIndentCell. In order to avoid such a gap, you should set the same color (you have for the rows) as RadGridView.Background.

I hope this helps.

Regards,
Didie
Telerik

 

 

[John]

Setting the GridView.Background makes no difference. Setting GridViewRow.Background loses my lines between the grids except for the space at the end. (see attached)
Got any other ideas?
Thanks,
John

[Dimitrina]

Hi John,

I attached my test project. where I cannot reproduce the issue from the attached image.
Would you please modify it to illustrate the issue? You can open a new support thread and attach the modified solution there. 

Regards,
Didie
Telerik

 

 

[John]

Thanks Didi,
I've changed my styling to match yours, but there is now a space at the end of the row which looks odd since I have buttons there.
I will create a new thread with the problem.
Regards,
John