Make content of the GroupHeader stretch to the full grid width

12 posts, 1 answers
  1. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    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>
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 18 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 18 Mar 2013 Link to this post

    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>
  4. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 19 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    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
  6. Yoan
    Admin
    Yoan avatar
    1182 posts

    Posted 21 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    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

  8. Yoan
    Admin
    Yoan avatar
    1182 posts

    Posted 25 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2013 Link to this post

    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
  10. Answer
    Yoan
    Admin
    Yoan avatar
    1182 posts

    Posted 26 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Charles
    Charles avatar
    11 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    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
  12. Yoan
    Admin
    Yoan avatar
    1182 posts

    Posted 28 Mar 2013 Link to this post

    Hi Charlie,

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

    Kind regards,
    Yoan
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top