[Solved] GroupHeaderTemplate gets out the grid

[Vincent Jezequel]

Hello,
I've customized the GroupHeaderTemplate of my RadGridView, it works fine except I can't seem to get the text inside my textblock to wrap properly.
It works if I set a Width to the Grid, but isn't there a way to make my GroupHeader resize along with my Grid ?

Here's the template :

<DataTemplate x:Key="GroupeHeaderTemplate">
        <Grid VerticalAlignment="Bottom" Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <CheckBox HorizontalAlignment="Center"  VerticalAlignment="Center" Grid.Column="0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" VerticalAlignment="Bottom" />
            </Grid>
    </DataTemplate>

Below the result, the group headers get out of the grid if they're too long, without wrapping...

Thanks !

[Vanya Pavlova]

Hello Vincent,


Can you please send us the complete code (via a support ticket) or even a snippet that respresents the rest of the code and how the TextBlock is bound to or what type of text it displays.


Kind regards,
Vanya Pavlova
the Telerik team

[Vincent Jezequel]

Here's the XAML :

<UserControl.Resources>
        <DataTemplate x:Key="GroupeHeaderTemplate">
                <Grid VerticalAlignment="Bottom" Height="Auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <CheckBox HorizontalAlignment="Center"  VerticalAlignment="Center" Grid.Column="0"
                    IsChecked="{Binding Group.Items[0].TexteIsSelected}" Tag="{Binding Group.Items[0].TexteID}"
                          Click="SelectionTexte"/>
                    <TextBlock Grid.Column="1"
                    TextWrapping="Wrap" VerticalAlignment="Bottom"
                    Text="{Binding Group.Items[0].TexteLibelle}"/>
                    <TextBlock Grid.Row="1" Grid.Column="1"
                           Text="{Binding Group.Items,Converter={StaticResource ListePrescriptionsToNb}}"
                           Foreground="OrangeRed" FontWeight="Bold" FontStyle="Italic"></TextBlock>
                </Grid>

        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadGridView ScrollViewer.HorizontalScrollBarVisibility="Disabled" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed"
                             ShowGroupPanel="False" HorizontalAlignment="Stretch" Name="gvQuestionnaire" VerticalAlignment="Top" AutoGenerateColumns="False"
                             ItemsSource="{Binding QuestionCourante.LesPrescriptions}" SelectionUnit="FullRow" GroupHeaderTemplate="{StaticResource GroupeHeaderTemplate}">

            <telerik:RadGridView.Columns>
               <telerik:GridViewDataColumn IsResizable="False" Width="80" EditTriggers="None" Header="Sélect." DataMemberBinding="{Binding PrescriptionIsSelected}">
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox Click="SelectionPrescription" HorizontalAlignment="Center" IsChecked="{Binding PrescriptionIsSelected, Mode=TwoWay}"
                                      Tag="{Binding TexteID_PrescriptionID}"
                                      Visibility="{Binding PrescriptionID, Converter={StaticResource isNullVisibilityConverter}, ConverterParameter=Invert}"></CheckBox>
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn  Width="150"  EditTriggers="None" Header="Ref de la prescription" DataMemberBinding="{Binding PrescriptionRef}"></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Width="*" EditTriggers="None" Header="Libellé de la prescription" TextWrapping="Wrap" DataMemberBinding="{Binding PrescriptionLibelle}"></telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        <telerik:RadGridView.GroupDescriptors>
            <telerikData:GroupDescriptor Member="TexteID" />
        </telerik:RadGridView.GroupDescriptors>
        </telerik:RadGridView>

    </Grid>

The ViewModel used as Datacontext is quite complex, but the grid is bound to an observable collection of objects of this class. Sorry, it's RIA Services-generated, a bit verbose I guess ;)

    '''<summary>
    '''The 'CTexteLieWithPrescriptionsPlat' class.
    '''</summary>
    <DataContract([Namespace]:="http://schemas.datacontract.org/2004/07/a6tm.Axone.Business")> _
    Partial Public NotInheritable Class CTexteLieWithPrescriptionsPlat
        Inherits ComplexObject

        Private _prescriptionID As Nullable(Of Long)

        Private _prescriptionIsSelected As Boolean

        Private _prescriptionLibelle As String

        Private _prescriptionRef As String

        Private _texteID As Long

        Private _texteIsSelected As Boolean

        Private _texteLibelle As String

        Private _texteRef As String

#Region "Extensibility Method Definitions"

        '''<summary>
        '''This method is invoked from the constructor once initialization is complete and
        '''can be used for further object setup.
        '''</summary>
        Partial Private Sub OnCreated()
        End Sub
        Partial Private Sub OnPrescriptionIDChanging(ByVal value As Nullable(Of Long))
        End Sub
        Partial Private Sub OnPrescriptionIDChanged()
        End Sub
        Partial Private Sub OnPrescriptionIsSelectedChanging(ByVal value As Boolean)
        End Sub
        Partial Private Sub OnPrescriptionIsSelectedChanged()
        End Sub
        Partial Private Sub OnPrescriptionLibelleChanging(ByVal value As String)
        End Sub
        Partial Private Sub OnPrescriptionLibelleChanged()
        End Sub
        Partial Private Sub OnPrescriptionRefChanging(ByVal value As String)
        End Sub
        Partial Private Sub OnPrescriptionRefChanged()
        End Sub
        Partial Private Sub OnTexteIDChanging(ByVal value As Long)
        End Sub
        Partial Private Sub OnTexteIDChanged()
        End Sub
        Partial Private Sub OnTexteIsSelectedChanging(ByVal value As Boolean)
        End Sub
        Partial Private Sub OnTexteIsSelectedChanged()
        End Sub
        Partial Private Sub OnTexteLibelleChanging(ByVal value As String)
        End Sub
        Partial Private Sub OnTexteLibelleChanged()
        End Sub
        Partial Private Sub OnTexteRefChanging(ByVal value As String)
        End Sub
        Partial Private Sub OnTexteRefChanged()
        End Sub

#End Region


        '''<summary>
        '''Initializes a new instance of the <see cref="CTexteLieWithPrescriptionsPlat"/> class.
        '''</summary>
        Public Sub New()
            MyBase.New()
            Me.OnCreated()
        End Sub

        '''<summary>
        '''Gets or sets the 'PrescriptionID' value.
        '''</summary>
        <DataMember()> _
        Public Property PrescriptionID() As Nullable(Of Long)
            Get
                Return Me._prescriptionID
            End Get
            Set(ByVal value As Nullable(Of Long))
                If (Me._prescriptionID.Equals(value) = False) Then
                    Me.OnPrescriptionIDChanging(value)
                    Me.RaiseDataMemberChanging("PrescriptionID")
                    Me.ValidateProperty("PrescriptionID", value)
                    Me._prescriptionID = value
                    Me.RaiseDataMemberChanged("PrescriptionID")
                    Me.OnPrescriptionIDChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'PrescriptionIsSelected' value.
        '''</summary>
        <DataMember()> _
        Public Property PrescriptionIsSelected() As Boolean
            Get
                Return Me._prescriptionIsSelected
            End Get
            Set(ByVal value As Boolean)
                If ((Me._prescriptionIsSelected = value) _
                            = False) Then
                    Me.OnPrescriptionIsSelectedChanging(value)
                    Me.RaiseDataMemberChanging("PrescriptionIsSelected")
                    Me.ValidateProperty("PrescriptionIsSelected", value)
                    Me._prescriptionIsSelected = value
                    Me.RaiseDataMemberChanged("PrescriptionIsSelected")
                    Me.OnPrescriptionIsSelectedChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'PrescriptionLibelle' value.
        '''</summary>
        <DataMember()> _
        Public Property PrescriptionLibelle() As String
            Get
                Return Me._prescriptionLibelle
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._prescriptionLibelle, value) = False) Then
                    Me.OnPrescriptionLibelleChanging(value)
                    Me.RaiseDataMemberChanging("PrescriptionLibelle")
                    Me.ValidateProperty("PrescriptionLibelle", value)
                    Me._prescriptionLibelle = value
                    Me.RaiseDataMemberChanged("PrescriptionLibelle")
                    Me.OnPrescriptionLibelleChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'PrescriptionRef' value.
        '''</summary>
        <DataMember()> _
        Public Property PrescriptionRef() As String
            Get
                Return Me._prescriptionRef
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._prescriptionRef, value) = False) Then
                    Me.OnPrescriptionRefChanging(value)
                    Me.RaiseDataMemberChanging("PrescriptionRef")
                    Me.ValidateProperty("PrescriptionRef", value)
                    Me._prescriptionRef = value
                    Me.RaiseDataMemberChanged("PrescriptionRef")
                    Me.OnPrescriptionRefChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'TexteID' value.
        '''</summary>
        <DataMember()> _
        Public Property TexteID() As Long
            Get
                Return Me._texteID
            End Get
            Set(ByVal value As Long)
                If ((Me._texteID = value) _
                            = False) Then
                    Me.OnTexteIDChanging(value)
                    Me.RaiseDataMemberChanging("TexteID")
                    Me.ValidateProperty("TexteID", value)
                    Me._texteID = value
                    Me.RaiseDataMemberChanged("TexteID")
                    Me.OnTexteIDChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'TexteIsSelected' value.
        '''</summary>
        <DataMember()> _
        Public Property TexteIsSelected() As Boolean
            Get
                Return Me._texteIsSelected
            End Get
            Set(ByVal value As Boolean)
                If ((Me._texteIsSelected = value) _
                            = False) Then
                    Me.OnTexteIsSelectedChanging(value)
                    Me.RaiseDataMemberChanging("TexteIsSelected")
                    Me.ValidateProperty("TexteIsSelected", value)
                    Me._texteIsSelected = value
                    Me.RaiseDataMemberChanged("TexteIsSelected")
                    Me.OnTexteIsSelectedChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'TexteLibelle' value.
        '''</summary>
        <DataMember()> _
        Public Property TexteLibelle() As String
            Get
                Return Me._texteLibelle
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._texteLibelle, value) = False) Then
                    Me.OnTexteLibelleChanging(value)
                    Me.RaiseDataMemberChanging("TexteLibelle")
                    Me.ValidateProperty("TexteLibelle", value)
                    Me._texteLibelle = value
                    Me.RaiseDataMemberChanged("TexteLibelle")
                    Me.OnTexteLibelleChanged()
                End If
            End Set
        End Property

        '''<summary>
        '''Gets or sets the 'TexteRef' value.
        '''</summary>
        <DataMember()> _
        Public Property TexteRef() As String
            Get
                Return Me._texteRef
            End Get
            Set(ByVal value As String)
                If (String.Equals(Me._texteRef, value) = False) Then
                    Me.OnTexteRefChanging(value)
                    Me.RaiseDataMemberChanging("TexteRef")
                    Me.ValidateProperty("TexteRef", value)
                    Me._texteRef = value
                    Me.RaiseDataMemberChanged("TexteRef")
                    Me.OnTexteRefChanged()
                End If
            End Set
        End Property
    End Class

[Vanya Pavlova]

Hello Vincent,


I believe that this is a layout issue within GridViewHeaderTemplate, you defined 3 columns in your Grid which resides in this DataTemplate, but you actually use two columns, and it is better to use Auto measurement instead Star Sizing, please change your DataTemplate in this way and let me know whether the issue still occurs.

<DataTemplate x:Key="GroupeHeaderTemplate">
                <Grid VerticalAlignment="Bottom" Height="Auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <CheckBox HorizontalAlignment="Center"  VerticalAlignment="Center" Grid.Column="0"
                    IsChecked="{Binding Group.Items[0].TexteIsSelected}" Tag="{Binding Group.Items[0].TexteID}"
                          Click="SelectionTexte"/>
                    <TextBlock Grid.Column="1"
                    TextWrapping="Wrap" VerticalAlignment="Bottom"
                    Text="{Binding Group.Items[0].TexteLibelle}"/>
                    <TextBlock Grid.Row="1" Grid.Column="1"
                           Text="{Binding Group.Items,Converter={StaticResource ListePrescriptionsToNb}}"
                           Foreground="OrangeRed" FontWeight="Bold" FontStyle="Italic"></TextBlock>
                </Grid>

        </DataTemplate>

You can submit a support ticket where you can attach your sample application. 


Best wishes,
Vanya Pavlova
the Telerik team

[Attila]

Hi!

I have the same problem when setting up a radgrid with wrapping group headers. I would like to have the group heading to be wrapped at the edge of the scrolling area, or at the right side of the last column (whichever is wider)

My group header template is as simple as this:

<DataTemplate x:Key="TopicTemplate">
        <TextBlock TextWrapping="Wrap"
        Text="Dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type "/>
</DataTemplate>

And the gridview is defined as follows:

<telerik:RadGridView x:Name="SurveyGrid" ItemsSource="{Binding SurveyRows}" AutoExpandGroups="True"
                 telerik:RadDragAndDropManager.AllowDrop="True" Grid.Row="1" Grid.Column="0"
                 AutoGenerateColumns="False" ShowGroupPanel="False"
                  RowIndicatorVisibility="Collapsed"
                 GroupHeaderTemplate="{StaticResource TopicTemplate}"
                 Margin="0,0,5,0">
  <telerik:RadGridView.FilterDescriptors>
    <telerik:FilterDescriptor Member="Topic" Operator="Contains" Value="{Binding Text, ElementName=TopicTextBox2}"/>
    <telerik:FilterDescriptor Member="Question" Operator="Contains" Value="{Binding Text, ElementName=QuestionTextBox2}"/>
  </telerik:RadGridView.FilterDescriptors>
  <telerik:RadGridView.GroupDescriptors>
    <telerik:GroupDescriptor Member="Topic">
      <telerik:GroupDescriptor.AggregateFunctions>
        <telerik:CountFunction Caption=""
          ResultFormatString=" (összesen {0} db)" />
      </telerik:GroupDescriptor.AggregateFunctions>
    </telerik:GroupDescriptor>
    <telerik:GroupDescriptor Member="Question">
      <telerik:GroupDescriptor.AggregateFunctions>
        <telerik:CountFunction Caption=""
          ResultFormatString=" (összesen {0} db)" />
      </telerik:GroupDescriptor.AggregateFunctions>
    </telerik:GroupDescriptor>
  </telerik:RadGridView.GroupDescriptors>
  <telerik:RadGridView.Columns>
    <telerik:GridViewDataColumn IsReadOnly="True"
      Header="Topic" DataMemberBinding="{Binding Topic}">
    </telerik:GridViewDataColumn>
    <telerik:GridViewDataColumn IsReadOnly="True"
                          Header="Question" DataMemberBinding="{Binding Question}">
    </telerik:GridViewDataColumn>
  </telerik:RadGridView.Columns>
</telerik:RadGridView>

As you can see in the attached screenshot, the group header does not wrap where the scrolling area ends, even though the total width of the columns fit into it.

Could you please tell me what am I doing wrong?

Thanks

[Vanya Pavlova]

Hi Mika,

 
You need to set a fixed width for the TextBlock and the wrapping will work as its is shown at the attached picture:

<DataTemplate x:Key="TopicTemplate">
                <TextBlock TextWrapping="Wrap" Width="300" Text="Dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type "/>  </DataTemplate>

All the best,
Vanya Pavlova
the Telerik team