Split GridViewDataColumn.Footer into multiple rows - Strech to fill space?

[Christopher]

Hello,

As a requirement for a project, I need to split the footer row of a RadGridView into multiple rows (with multiple background colors).  I've tried a bunch of different ways to get this to work, but I can never seem to get it to stretch to fill the blank space.

An example of the xaml is as follows:

 <telerik:GridViewDataColumn.Footer>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition MinHeight="25" />
                                <RowDefinition MinHeight="25" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="Grand Total:"  />
                            <Border Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch">
                                <Border.Background>
                                    #92D050
                                </Border.Background>
                                <Border.BorderThickness>0 2 0 0</Border.BorderThickness>
                                <Border.BorderBrush>#CBCBCB</Border.BorderBrush>
                                <TextBlock Text="Total per day:"   />
                            </Border>
                        </Grid>
                    </telerik:GridViewDataColumn.Footer>

This produces a green background solely around the "Total per day:" text, as well as a border only above the text.  The rest of the column width is the default background.

I've tried using FooterCellStyle, I've tried switching to Stack Panel, i've tried setting the HorizontalContentAlignment to Stretch on the FooterRowStyle of the RadGridView and nothing I seem to do causes it to stretch to fill the space?

Thank you for your help!

[Vanya Pavlova]

Hello Christopher,


Thank you for contacting us.


Setting ColumnWidth property of the RadGridView to star ("*") should do the trick. 
Another option would be to set the width of the last column to star. 



Vanya Pavlova
Telerik

 

 

[Christopher]

Hello,

I unfortunately tried that, and it still wouldn't work.

The updated xaml is below.

<telerik:GridViewDataColumn.Footer>
                        <Grid HorizontalAlignment="Stretch">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                             </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition MinHeight="25" />
                                <RowDefinition MinHeight="25" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="Grand Total:"  />
                            <Border Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch">
                                <Border.Background>
                                    #92D050
                                </Border.Background>
                                <Border.BorderThickness>0 2 0 0</Border.BorderThickness>
                                <Border.BorderBrush>#CBCBCB</Border.BorderBrush>
                                <TextBlock Text="Carloads per day:"   />
                            </Border>
                        </Grid>
                    </telerik:GridViewDataColumn.Footer>


I also tried doing it directly on the  <telerik:GridViewDataColumn> definition that this Footer falls under, but that messed up the table entirely.

Is there an example of splitting a GridViewDataColumn.Footer into multiple grids?  In the documentation (http://www.telerik.com/help/silverlight/gridview-columns-column-footers.html) it mentions that is it fine to put a grid in there, but it doesn't give a sample of the output of that xaml.

I've attached a screenshot of what is happening with the * (and pretty much any other option i've tried, besides setting a fixed width to the  footer grid column, which doesn't work when the column gets resized) 

I'd like it to fill the entire bottom part of the footer, when resized or not, but I can't seem to get it to stretch when it's in the footer.

Thank you!

[Christopher]

An extra example, I copy pasted the Grid outside the telerik:GridViewDataColumn.Footer and the stretch works as expected.  Please see attached example (the grid in the footer is the same as outside the footer minus the markings of Grid.Row=1 and Grid.Column=0 (those are just there to get it to appear directly below the telerik RadGridView

<Grid Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition MinHeight="25" />
                <RowDefinition MinHeight="25" />
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch">
                <Border.Background>
                    #25A0DA
                </Border.Background>
                <TextBlock Text="Grand Total:"  />
            </Border>
            <Border Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch">
                <Border.Background>
                    #92D050
                </Border.Background>
                <Border.BorderThickness>0 2 0 0</Border.BorderThickness>
                <Border.BorderBrush>#CBCBCB</Border.BorderBrush>
                <TextBlock Text="Totals per day:"   />
            </Border>
        </Grid>

Thank you!

[Vanya Pavlova]

Hi Christofer,


Setting FooterTextAlignment of the column to Justify should do the trick, as proposed below:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Property1}" FooterTextAlignment="Justify"> ... </telerik:GridViewDataColumn>

Regards,
Vanya Pavlova
Telerik

 

 

[Christopher]

Hello,

Using the Justify on the DataColumn seems to have made it work. I'm not sure why Justify would invoke a stretch though?

One thing I noticed though is that I cannot bind to a member of my view model from within the grid.  I had tried following the post here http://www.telerik.com/forums/custom-footer-with-aggregate-function for it, however i'm stuck with Silverlight 4 (cannot upgrade for this project) and AncestorType doesn't exist.

I had also tried putting it in a resource as the content template, which also didn't give me any luck. (similar to here: http://www.telerik.com/forums/binding-text-in-radgridview-footer).  It would show the aggregate result, but still not the result from my other property on my view model.

 <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition MinHeight="25" />
                                <RowDefinition MinHeight="25" />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource FooterTotalBorderPadding}">
                                <Border.Background>
                                    #25A0DA
                                </Border.Background>
                                <telerik:AggregateResultsList ItemsSource="{Binding}"  />
                            </Border>
                            <Border Grid.Row="1" Grid.Column="0"  Style="{StaticResource FooterTotalBorderPadding}">
                                <Border.Background>
                                    #92D050
                                </Border.Background>
                                <Border.BorderThickness>0 2 0 0</Border.BorderThickness>
                                <Border.BorderBrush>#CBCBCB</Border.BorderBrush>
                                <TextBlock Text="{Binding Path=DataContext.CarloadsPerDay.CustomerDemand}" />
                            </Border>
                        </Grid>

In this post (http://www.telerik.com/forums/gridview-footer-binding-with-the-custom-data#d74jDdnlPUG_uveis46tjw) it mentions binding viewmodel parameters as static resources but doesn't give an example.

Can you possible provide me with an example that works for accessing a member of my view model from my footer? I'd prefer not to have a bunch of ContentTemplate styles, but that would be preferable to it not working at all.

Thank you!

[Christopher]

Alright I believe I now have it working thanks to this thread, and this post.

The problem with the datacontext not showing anything happened when I would define my footer style in the UserControl.Resources section of my page.

<UserControl.Resources>
<Style x:Key="WhateverFooterCell" TargetType="telerik:GridViewFooterCell">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <!-- Stuff specific to that footer cell -->
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</UserControl.Resources>

When I moved it directly into the <telerik:GridViewDataColumn.FooterCellStyle> then it started being able to access the DataContext.

To recap i'll show an example below for anyone else having this same issue.  For reference, I'm stuck with Silverlight 4, so I couldn't use the AncestorType mentioned in the other post.

1) Your GridViewDataColumn needs to have FooterTextAlignment="Justify" on it, this allows the background to stretch and works with the resizing of columns.

<telerik:GridViewDataColumn DataMemberBinding="{Binding <YourColumnName>}" IsReadOnly="True" IsFilterable="False" Width="70" FooterTextAlignment="Justify">

2) You should set your footer's padding to 0 if you have a background/border you want to put in the footer. In 3) you'll see the positioning of it, but here's the line you need

<Setter Property="Padding" Value="0" />

3) You need to set your footer content in the FooterCellStyle tag.  An example which will give you a grid with two background colors (and a border separating them), one value being an aggregate result, and one value coming from a property on the view model.  I've included the positioning of the Aggregate function just for completeness, you can also specify it by adding it in the code behind and it will still work. (You'll also notice the Padding setter from #2)

<telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction></telerik:SumFunction>
                    </telerik:GridViewDataColumn.AggregateFunctions>
                    <telerik:GridViewDataColumn.FooterCellStyle>
                        <Style TargetType="telerik:GridViewFooterCell">
                            <Setter Property="Padding" Value="0" />
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <Grid HorizontalAlignment="Stretch">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition MinHeight="25" />
                                                <RowDefinition MinHeight="25" />
                                            </Grid.RowDefinitions>
                                            <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource FooterTotalBorderPadding}">
                                                <Border.Background>
                                                    #25A0DA
                                                </Border.Background>
                                                <telerik:AggregateResultsList ItemsSource="{Binding}"  />
                                            </Border>
                                            <Border Grid.Row="1" Grid.Column="0"  Style="{StaticResource FooterTotalBorderPadding}">
                                                <Border.Background>
                                                    #92D050
                                                </Border.Background>
                                                <Border.BorderThickness>0 2 0 0</Border.BorderThickness>
                                                <Border.BorderBrush>#CBCBCB</Border.BorderBrush>
                                                <TextBlock Text="{Binding ElementName=<YourGridName>, Path=DataContext.<YourPropertyOnTheViewModel>}" />
                                            </Border>
                                        </Grid>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerik:GridViewDataColumn.FooterCellStyle>

That should be enough to get you up and running, just use the same idea to do your other columns on your grid.  I'm currently using this logic on a grid with 7 columns with no issues.

I really hope this helps someone else who was going through this.

[Christopher]

Hello Vanya,

I guess I found one last thing that doesn't want to work with this and i'm wondering if you have any ideas for me.

The exporting doesn't want to include this second footer row.  The export type is set to HTML with ShowColumnFooters = true, which will successfully show the results of the aggregate functions, but won't show the second row.

If I look at the RadGridView object, and drill down (I don't remember to exactly which property unfortunately) I can see that the footer contains two row definitions.

Do you have a way to export the full footer, rather than just the Aggregate results?

As a side note, I also noticed that having ShowColumnHeaders = true, with 

<telerik:GridViewDataColumn.Header>
    <TextBlock Text="<Column Name>" TextWrapping="Wrap" Width="55" />
</telerik:GridViewDataColumn.Header>

defined on the column results in a column header of "System.Windows.Controls.TextBlock" (as opposed to <Column Name>)

Thank you!

[Dimitrina]

Hi Christofer,


The mark-up below demonstrates how to define the ViewModel within UserControl's Resources collection and use it as a StaticResource to the Binding's Source: 

<UserControl.Resources>
  <my:MyViewModel x:Key="myViewModel"/>
</UserControl.Resources>
      ......
<TextBlock Text="{Binding Path=YourProperty, Source={StaticResource myViewModel}}"/>

As to your questions related то exporting:
1. Do you have a way to export the full footer:
There is not a setting to configure such an export, however, you can add such a row to be exported subscribing for the ElementExported event of RadGridView. As an example, you can check the Exporting RowDetails demo.

2. Exporting Custom Header:
You can check the Export Custom Header troubleshooting article in our online documentation.
It suggests how you can resolve the issue.

You can also check the Export FAQ article on more frequently asked questions.

Regards,
Dimitrina
Telerik

 

 

[Christopher]

Hello Dimitrina,

I'm trying to follow your suggestion with the Exporting Row Details example, and I've fixed the issue with the headers not showing the textblock values thanks to the other link.

What i'm not sure about is where in the GridViewFooterRow object the details would be?  (in the example, they cast the context as an entity, but since this is a custom footer with two rows, i'll need to do it based of the footer row)

The columns each contain a Grid, which has two Borders in it.  Within these borders, one row displays the results of the aggregate function, and the other has a text block.

Can you provide sample code for at least getting to the Grid in each of the FooterCells of the GridViewFooterRow? When I do row.ChildrenOfType<Grid>() it actually brings me back more grids than I have columns, so I suspect there are other things that the control injects for display.

Thank you!

[Dimitrina]

Hi,

Basically, you can find the information shown in column's footers similar to:

var footerCell = this.clubsGrid.ChildrenOfType<GridViewFooterCell>().Where(x=>x.Name == "Name").First();
if (footerCell != null)
{
    var definedFuncs = footerCell.Column.AggregateFunctions;
}

Still, I would suggest you to directly work with the data populated in RadGridView and calculate the values you would like to export.

Regards,
Dimitrina
Telerik