This is a migrated thread and some comments may be shown as answers.

How to edit Group Header caption?

9 Answers 462 Views

GridView

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 28 Apr 2009, 02:39 PM

ticket208573-editgroupheadercaption.zip

Hi frenk,

The easiest way to achieve this is to replace the ControlTemplate of the GridViewGroupRow. You can do this by using a Style. Inside the ControlTemplate you can modify the Binding of the Header to whatever you want. In my example, I have preserved the default binding, but added an IValueConverter that takes a parameter and strips the first n characters of the value. But you can do virtually anything inside this converter depending on your requirements.

Here is the XAML showing how to replace the ControlTemplate of the GridViewGroupRow:

    
            <UserControl x:Class="Ticket208573_EditGroupHeaderCaption.Page" 
        
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        
                    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView" 
        
                    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" 
        
                    xmlns:local="clr-namespace:Ticket208573_EditGroupHeaderCaption;assembly=Ticket208573_EditGroupHeaderCaption"> 
        
                <Grid x:Name="LayoutRoot" Background="White"> 
        
                    <Grid.Resources> 
        
                        <local:TrimStartConverter x:Key="trimStartConverter" /> 
        
                        <ControlTemplate x:Key="groupRowTemplate" TargetType="grid:GridViewGroupRow"> 
        
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"> 
        
                                <grid:GridViewExpander x:Name="PART_GroupExpander" 
        
                                        RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}" 
        
                                        Grid.Column="1" ExpandDirection="Down" 
        
                                        Header="{Binding HeaderInfoLabel, Converter={StaticResource trimStartConverter}, ConverterParameter=3}"> 
        
                                    <grid:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/> 
        
                                </grid:GridViewExpander> 
        
                            </Grid> 
        
                        </ControlTemplate> 
        
                        <Style x:Key="groupRowStyle" TargetType="grid:GridViewGroupRow"> 
        
                            <Setter Property="Template"  
        
                                    Value="{StaticResource groupRowTemplate}" /> 
        
                        </Style> 
        
                    </Grid.Resources> 
        
                    <telerikGrid:RadGridView  
        
                        Name="RadGridView1"  
        
                        GroupRowStyle="{StaticResource groupRowStyle}"> 
        
                    </telerikGrid:RadGridView> 
        
                </Grid> 
        
            </UserControl>

And here is the converter itself. Feel free to extend it in any way:

    
            namespace Ticket208573_EditGroupHeaderCaption 
        
            { 
        
                using System; 
        
                using System.Globalization; 
        
                using System.Windows.Data; 
        
                /// <summary> 
        
                /// StatusToFillConverter 
        
                /// </summary> 
        
                public class TrimStartConverter : IValueConverter 
        
                { 
        
                    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        
                    { 
        
                        if (!(value is string)) 
        
                            throw new InvalidOperationException("The value must be a string!"); 
        
                        int startIndex = Int32.Parse((string)parameter); 
        
                        string val = (string)value; 
        
                        return val.Substring(startIndex, val.Length - startIndex); 
        
                    } 
        
                    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        
                    { 
        
                        throw new NotImplementedException(); 
        
                    } 
        
                } 
        
            }

I have prepared and attached a small sample project that demonstrates all of the above. Please, examine it carefully and do not hesitate to contact us again if you have any further questions.

Regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 28 Apr 2009, 03:22 PM

Awesome, thanks!
Now sometimes I want to hide the group header (the whole header panel -the rows inside the panel must still show up). I assume it's something like:

    
            <ControlTemplate x:Key="groupHeaderTemplate" TargetType="??"> 
        
              <TextBlock Text="{Binding ??}" 
        
                         Visibility="{Binding Converter={StaticResource StringEmptyCollapsedConverter}}"/> 
        
            </ControlTemplate> 
        
            <ControlTemplate x:Key="groupRowTemplate" TargetType="grid:GridViewGroupRow"> 
        
                <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"> 
        
                      <grid:GridViewExpander x:Name="PART_GroupExpander" 
        
                                            RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}"  
        
                                            Grid.Column="1" ExpandDirection="Down"  
        
                                            Header="{Binding HeaderInfoLabel}" 
        
                                            HeaderTemplate="{StaticResource groupHeaderTemplate}"> 
        
                          <grid:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/> 
        
                      </grid:GridViewExpander> 
        
                </Grid> 
        
            </ControlTemplate>

if this is correct, what is the TargetType for the headerTemplate and what is the property I have to bind inside the headerTemplate?

Btw, how can I find such things in silverlight (in WPF I do it with Snoop)?

Thanks,
Francesco

answered on 29 Apr 2009, 08:56 AM

Hello frenk,

This one is a bit tougher. But it can be done in the code behind. Attach to the LayoutUpdate event of the grid and in the event handler do the following:

    
                    private void RadGridView_LayoutUpdated(object sender, System.EventArgs e) 
        
                    { 
        
                        // Find all expanders in the grid. 
        
                        IList<GridViewExpander> expanders = this.RadGridView1.ChildrenOfType<GridViewExpander>(); 
        
                        foreach (GridViewExpander expander in expanders) 
        
                        { 
        
                            // Find all grids in the expander 
        
                            IList<Grid> grids = expander.ChildrenOfType<Grid>(); 
        
                            foreach (Grid grid in grids) 
        
                            { 
        
                                // This is the grid representing the row you want to hide. 
        
                                if (grid.Name.Contains("PART_HeaderGrid")) 
        
                                { 
        
                                    //Perform your logic here and hide it if needed. 
        
                                    grid.Visibility = Visibility.Collapsed; 
        
                                } 
        
                            } 
        
                        } 
        
                    }

This should do it.

You can "spy" on your Silverlight applications with Silverlight Spy.

Please, do not hesitate to contact us if you have any other questions.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 06 Jan 2010, 12:07 PM

hello im using this template but i have no header text in group row -> (Header={Binding Header})
Are there any changes to current version?
thanks ...

Style x:Key="MyGroupStyle" TargetType="my:GridViewGroupRow" >

<Setter.Value>

<my:GridViewExpander x:Name="PART_GroupExpander" RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="1" ExpandDirection="Down" Header="{Binding Header}">

<my:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" />

</my:GridViewExpander>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

answered on 07 Jan 2010, 09:51 AM

Hello Ulrich Fiege,

I am a little bit perplexed. The main goal of the sample project I have done for Francesco is to hide the row where the group header text would normally show. You are saying that you do not see the text. That is because the sample project I have created for Francesco is doing just that -- hiding the group header text.

Since I am not sure what are you trying to achieve I will explain both scenarios.

If your goal is the same as Francesco's you should update to the latest GridViewGroupRow ControlTemplate and add a margin to the Border I have highlighted below. No code behind will be needed with the latest version:

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"

xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="0" Color="#FF000000"/>

<GradientStop Offset="1" Color="#FF000000"/>

</LinearGradientBrush>

<telerik:Office_BlackTheme x:Key="Theme"/>

<SolidColorBrush x:Key="GridViewRowIndicatorBackground" Color="#FFDBDEE1"/>

<SolidColorBrush x:Key="GridViewBackground" Color="#FF535353"/>

<LinearGradientBrush x:Key="GridViewExpanderBackground" StartPoint="0.5,0" EndPoint="0.5,1">

<GradientStop Offset="1" Color="#FFFDDFAA"/>

<GradientStop Offset="0" Color="#FFFDF6E9"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="GridLinesFill" Color="#FFB3B3B3"/>

<SolidColorBrush x:Key="GridViewHeaderCellForeground" Color="#FF000000"/>

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

<DataTemplate x:Key="GroupHeaderTemplate">

<TextBlock Text="{Binding Header}"/>

</DataTemplate>

<ControlTemplate x:Key="GridViewExpanderToggleButtonTemplate" TargetType="ToggleButton">

<Border

x:Name="ToggleButtonBorder"

MinHeight="24"

MinWidth="24"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0">

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="CheckStates">

<vsm:VisualState x:Name="Checked">

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

<SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Unchecked">

<Storyboard>

<SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="180"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ToggleButtonBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ToggleButtonBorder" Storyboard.TargetProperty="Padding">

<DiscreteObjectKeyFrame KeyTime="0" Value="0,1,0,0"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Path

x:Name="ExpanderButton"

Width="7"

Height="5"

HorizontalAlignment="Left"

Margin="9,0,0,0"

Data="M3,0 L4,0 4,0.999 5,0.999 5,1.999 6,1.999 6,2.999 7,2.999 7,3.999 7,4.999 6,4.999 5,4.999 5,3.999 4,3.999 4,2.999 3,2.999 3,3.999 2,3.999 2,4.999 1,4.999 0,4.999 0,3.999 0,2.999 1,2.999

1,1.999 2,1.999 2,0.999 3,0.999 z"

Fill="{StaticResource GridViewIndicatorsPartsFill}"

RenderTransformOrigin="0.5,0.5">

<Path.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform Angle="180"/>

<TranslateTransform/>

</TransformGroup>

</Path.RenderTransform>

</Path>

</Border>

</ControlTemplate>

<ControlTemplate x:Key="GridViewGroupRowTemplate" TargetType="grid:GridViewGroupRow">

<Grid x:Name="PART_GroupExpanderGrid" Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition x:Name="PART_HeaderRow"/>

<RowDefinition x:Name="ContentRow"/>

</Grid.RowDefinitions>

<vsm:VisualStateManager.VisualStateGroups>

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

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

<Storyboard>

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

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

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

<Storyboard>

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

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupExpanderGrid" Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0.5"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Border

Grid.Column="4"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0,0,0,1"

Padding="10,0,0,0">

<grid:AggregateResultsList HorizontalAlignment="Left" VerticalAlignment="Center" ItemsSource="{TemplateBinding AggregateResults}">

<grid:AggregateResultsList.ItemTemplate>

<DataTemplate>

<grid:GridViewAggregateResultCell AggregateResult="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</DataTemplate>

</grid:AggregateResultsList.ItemTemplate>

<grid:AggregateResultsList.ItemsPanel>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal"/>

</ItemsPanelTemplate>

</grid:AggregateResultsList.ItemsPanel>

</grid:AggregateResultsList>

</Border>

<Border

Width="18"

Grid.Column="4"

HorizontalAlignment="Left"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0,0,0,1"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">

<Border.OpacityMask>

<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

<GradientStop Offset="0.3" Color="Black"/>

<GradientStop Offset="1" Color="Transparent"/>

</LinearGradientBrush>

</Border.OpacityMask>

</Border>

<Border

x:Name="PART_IndicatorPresenter"

Width="24"

Grid.Column="0"

VerticalAlignment="Stretch"

Background="{StaticResource GridViewRowIndicatorBackground}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0,0,1,1"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"

Visibility="{TemplateBinding RowIndicatorVisibility}"/>

<Border

Width="24"

Grid.Column="2"

Background="{TemplateBinding Background}"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>

<ToggleButton

x:Name="HeaderButton"

Grid.Column="2"

Grid.ColumnSpan="3"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="Transparent"

BorderBrush="{TemplateBinding BorderBrush}"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"

HorizontalContentAlignment="Left"

IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"

IsTabStop="False"

Template="{StaticResource GridViewExpanderToggleButtonTemplate}"

VerticalContentAlignment="Center"/>

<Border

Grid.Column="3"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0,0,0,1"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">

<ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding GroupViewModel}" ContentTemplate="{TemplateBinding GroupHeaderTemplate}"/>

</Border>

<Border

x:Name="Content"

Grid.Column="0"

Grid.ColumnSpan="5"

Grid.Row="1"

Margin="0,-24,0,0"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}">

<StackPanel Visibility="{Binding ElementName=HeaderButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">

<grid:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>

<grid:GridViewGroupFooterRow x:Name="Footer" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</StackPanel>

</Border>

<grid:IndentPresenter

Grid.Column="1"

Background="{StaticResource GridViewBackground}"

grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"

IndentLevel="{TemplateBinding Level}"

telerik:StyleManager.Theme="{StaticResource Theme}"/>

<Border

x:Name="IndentBottomBorder"

Grid.Column="2"

Grid.ColumnSpan="3"

Grid.Row="0"

Grid.RowSpan="2"

VerticalAlignment="Bottom"

Background="Transparent"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0,0,0,1"/>

</Grid>

</ControlTemplate>

<Style TargetType="grid:GridViewGroupRow">

<Setter Property="Template" Value="{StaticResource GridViewGroupRowTemplate}"/>

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

<Setter Property="MinHeight" Value="24"/>

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

<Setter Property="FontWeight" Value="Bold"/>

<Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}"/>

<Setter Property="IndentBackground" Value="{StaticResource GridViewExpanderBackground}"/>

<Setter Property="GroupHeaderTemplate" Value="{StaticResource GroupHeaderTemplate}"/>

</Style>

</ResourceDictionary>

The XAML I have pasted above is the latest XAML. You can edit the template for the GridViewGroupRow by using Expression Blend and customize it any way that you need to. To learn how to do this, please read the help topic Styling and Appearance.

To make the GridViewRow just like the default, do not add this margin. This margin will cause the row with the header text to disappear.

In both cases you should use the latest control template, and not the one you have pasted in the ticket since it is ancient and nothing will ever work with it anymore.

I hope this helps.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How to edit Group Header caption?

9 Answers, 1 is accepted