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

How to edit Group Header caption?

9 Answers 378 Views
GridView
This is a migrated thread and some comments may be shown as answers.
BOARD LAB
Top achievements
Rank 1
BOARD LAB asked on 28 Apr 2009, 12:54 PM
Hi,

I have a column that I use for grouping. It contains for ex.
xyzArgentina
xyzArgentina
xyzArgentina
xyzArgentina
aaaBrazil
aaaBrazil
...

thus the group headers are

-> xyzArgentina
-> aaaBrazil

Now I need to edit their caption in order to remove the first three characters. How can I do this?

Thanks,
Francesco

9 Answers, 1 is accepted

Sort by
0
Rossen Hristov
Telerik team
answered on 28 Apr 2009, 02:39 PM
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.
0
BOARD LAB
Top achievements
Rank 1
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
0
Rossen Hristov
Telerik team
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.
0
BOARD LAB
Top achievements
Rank 1
answered on 29 Apr 2009, 03:47 PM
This works indeed, however it's very slow. I will try to find a different approach to solve the problem.

Thanks for the tip on Silverlight Spy, neat tool!
0
Ulrich Fiege
Top achievements
Rank 1
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 Property="Template" >

 

 

 

<Setter.Value>

 

 

 

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

 

 

 

<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Background="{TemplateBinding Background}">

 

 

 

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

 

0
Rossen Hristov
Telerik team
answered on 06 Jan 2010, 01:24 PM
Hello Ulrich Fiege,

We have changed a massive amount of things since my last reply from April. The Expander is gone. Actually, everything is different. You should use the latest GridViewGroupRow template and modify it as needed. Let us know if there are problems.

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.
0
Ulrich Fiege
Top achievements
Rank 1
answered on 07 Jan 2010, 07:45 AM

Can you please modify the sample above?
For my understanding this is a template related to GridViewGroupRow.

The problem what we have is that the Headertext is not displayed.

We are using the latest version SP1 1219 and not any old from april !

thanks ...

 

0
Rossen Hristov
Telerik team
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: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"
    <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>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                <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="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <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="HorizontalAlignment" Value="Left" />-->
        <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.
0
Intaik
Top achievements
Rank 1
answered on 14 Nov 2011, 08:00 AM
How am i supposed to use above resourcedictionary?
it would be great if you can show
1. where to paste above? (app resources?)
2. how to refer it for a GridView GroupHeaderRow

thx!
Intaik
Tags
GridView
Asked by
BOARD LAB
Top achievements
Rank 1
Answers by
Rossen Hristov
Telerik team
BOARD LAB
Top achievements
Rank 1
Ulrich Fiege
Top achievements
Rank 1
Intaik
Top achievements
Rank 1
Share this question
or