Group style template; can't hide row indent

16 posts, 1 answers
  1. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 27 Jan 2012 Link to this post

    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>


  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    1962 posts
    Member since:
    Dec 2014

    Posted 30 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Download a free trial of UI for WPF
  4. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 30 Jan 2012 Link to this post

    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

  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    1962 posts
    Member since:
    Dec 2014

    Posted 30 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 30 Jan 2012 Link to this post

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

    var element = e.DataElement as Item;

  7. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    1962 posts
    Member since:
    Dec 2014

    Posted 30 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 30 Jan 2012 Link to this post

    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;
                }
            }
        }
    }

  9. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 30 Jan 2012 Link to this post

    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.

  10. Nicole
    Nicole avatar
    30 posts
    Member since:
    Mar 2011

    Posted 30 Jan 2012 Link to this post

    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;
            }
        }
    }

  11. John
    John avatar
    10 posts
    Member since:
    Aug 2010

    Posted 23 Jun Link to this post

    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

  12. Dimitrina
    Admin
    Dimitrina avatar
    3208 posts
    Member since:
    Dec 2014

    Posted 24 Jun Link to this post

    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

     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     

  13. John
    John avatar
    10 posts
    Member since:
    Aug 2010

    Posted 24 Jun in reply to Dimitrina Link to this post

    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

  14. Dimitrina
    Admin
    Dimitrina avatar
    3208 posts
    Member since:
    Dec 2014

    Posted 24 Jun Link to this post

    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

     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     

  15. John
    John avatar
    10 posts
    Member since:
    Aug 2010

    Posted 24 Jun in reply to Dimitrina Link to this post

    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

  16. Dimitrina
    Admin
    Dimitrina avatar
    3208 posts
    Member since:
    Dec 2014

    Posted 24 Jun Link to this post

    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

     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     

  17. John
    John avatar
    10 posts
    Member since:
    Aug 2010

    Posted 24 Jun in reply to Dimitrina Link to this post

    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

Back to Top
Download a free trial of UI for WPF