Make content of the GroupHeader stretch to the full grid width

[Charles]

I am trying to get the header row of my group to stretch to the full grid width.

I had a look at the following online documentation: http://www.telerik.com/help/wpf/gridview-styling-group-row.html and as a result I tried the following. Unfortunately it doesn't seem to work correctly, what do I need to do get it to stretch properly?

<telerik:RadGridView.Resources>
    <Style TargetType="telerik:GridViewGroupRow">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
    <Style TargetType="telerik:GridViewHeaderRow">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
    <Style TargetType="telerik:GridViewGroupPanel">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</telerik:RadGridView.Resources>

[Dimitrina]

Hello,

Generally you can edit the template of GridViewGroupRow and remove the elements reserved for the aggregates. Afterwards you can set HorizontalAlignment property of the StackPanel. Does this approach work for you?
 

Regards,
Didie
the Telerik team

[Charles]

Hi I tried this, and the GridViewGroupRow stretches all the way across the width of the grid but the DockPanel in the GroupHeaderTemplate is left aligned and does not stretch (see attached image). I can't use a StackPanel because I need content on the left and the right of the grid.

<telerik:RadGridView.Resources>
    <Style TargetType="telerik:GridViewGroupRow">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Background" Value="Red"/>
    </Style>
</telerik:RadGridView.Resources>

<telerik:RadGridView.GroupHeaderTemplate>
    <DataTemplate>
        <DockPanel HorizontalAlignment="Stretch" Background="Blue">
            <telerik:RadButton Name="RejectAllButton" Margin="10" Content="Reject All" DockPanel.Dock="Right" />
            <telerik:RadButton Name="ApproveAllButton" Margin="10" Content="Approve All" DockPanel.Dock="Right"/>
            <TextBlock Text="{Binding Group.Items[0].RequestGrouping}" FontWeight="Bold" Margin="10,0,0,0"/>
        </DockPanel>
    </DataTemplate>
</telerik:RadGridView.GroupHeaderTemplate>

[Dimitrina]

Hello,

What I meant was to edit the template of GridViewGroupRow. If you have set GroupRenderMode="Flat" for the RadGridView then you should edit the template of the GroupHeaderRow. Have you tried this?

Regards,
Didie
the Telerik team

[Charles]

Didie,

Thanks for getting back to me. I've only just managed to get ExpressionBlend installed, so apologies for the late response.

When I try to click:
Object -> Edit Additional Styles -> GroupRowStyle -> Edit a Copy

I find that "Edit a Copy" is disabled. Is there something I need to do to enable this option?
Apologies if this is obvious but I've not used Expression Blend before.

Charlie

[Yoan]

Hello Charlie,

Following the exact steps from the mentioned documentation I was able to extract the template. Would you please check again the instruction from the documentation to ensure you are doing the same.

However, I have extracted the template for you. Please find it attached.

Kind regards,
Yoan
the Telerik team

[Charles]

Hi Yoan,

Thanks for supplying the template, before making any modifications. I tried the using the style and the first thing I noticed was that suddenly the GridViewGroupRow the group does not expand/collapse anymore (it's just always collapsed).

Is there something else I need to change?

Charlie

[Yoan]

Hello Charlie,

I have applied the style to the RadGridViewGroupRow and everything works as expected. Please keep in mind that I am using our latest official release (Q1 2013). I have attached my test project for a reference. Would it be possible to modify it in order to reproduce the problem and resend it back to me ?

Looking forward to hearing from you!

Kind regards,
Yoan
the Telerik team

[Charles]

Hi Yoan,

I have tried your code but unfortunately it doesn't seem to work with the Telerik controls I am using - 2011.2.920.35, (it's fine with yours though). I tried your code and as switch your project to use the 2011.2.920.35 dlls it stopped working.

Do I need to use a different DataTemplate different for these controls?

Charlie

[Yoan]

Hi Charlie,

If you cannot extract the template of the GridViewGroupRow with Blend, then you can find it locally, where the RadControls are installed, inside the Themes folder. The full path would be:
C:\Program Files (x86)\Telerik\RadControls for WPF Q2 2011\Themes\OfficeBlack\Themes\Office\Black\GridViewGroupRow.xaml.  You can then copy the template for the GridViewGroupRow and change it per your requirements.

However, I have prepared a sample project against your version(Q2 2011) that you can find attached.

I hope this helps.

All the best,
Yoan
the Telerik team

[Charles]

Yoan,

That works, thanks!

I also managed to change the template to make the GroupHeader element stretch to the grid width.

The GroupHeader element is the one directly after the the ToggleButton element called "HeaderButton"
The change to make is to simply set GridColumnSpan="2"

Charlie

[Yoan]

Hi Charlie,

Thank you for the update. I am glad to hear you have resolved the issue. 

Kind regards,
Yoan
the Telerik team