Binding text in RadGridview footer

[haagel]

I want to put some text in the footer of a column in my gridview. However I can't get the binding to work.

 

I'm using MVVM. I have one viewmodel for the whole form including the gridview (let's call this MainViewModel) and also one viewmodel per row in the gridview (RowViewModel).

 

The text I want to show in the footer is in MainViewModel (let's call the property FooterText). How can I bind the text of the footer to this property?

 

My footer looks like this:

<telerikGridView:GridViewDataColumn.Footer>
    <TextBlock Text="Testing" />
</telerikGridView:GridViewDataColumn.Footer>

This example works and displays the text "Testing" in the footer. But my problems starts when I try to set the text using binding instead.

 

This doesn't work:

<telerikGridView:GridViewDataColumn.Footer>
    <TextBlock Text="{Binding Path=FooterText}" />
</telerikGridView:GridViewDataColumn.Footer>

I didn't expect this to work since all other properties of the column gets bound to the RowViewModel and not the MainViewModel. I'm guessing the same goes for the footer.

 

I've tried this:

<telerikGridView:GridViewDataColumn.Footer>
    <TextBlock Text="{Binding ElementName=LayoutRoot, Path=DataContext.FooterText}" />
</telerikGridView:GridViewDataColumn.Footer>

LayoutRoot is the Grid that is the root element of the form that the gridview resides in. This does not work. What confuses me is that I can bind the Header of the column in the exact way and it works:

<telerikGridView:GridViewDataColumn Header="{Binding ElementName=LayoutRoot, Path=DataContext.FooterText}" ... >

 

I've also tried this:

<telerikGridView:GridViewDataColumn.Footer>
    <TextBlock Text="{Binding Path=DataContext.FooterText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerikGridView:RadGridView}}" />
</telerikGridView:GridViewDataColumn.Footer>

This didn't work neither.

 

Any more ideas?

[Vanya Pavlova]

Hello Haagel,

 

You may create a style targeted at GridViewFooterCell for a column and define its ContentTemplate as follows:

<Grid.Resources>
 <Style x:Key="GridViewFooterTotalCellStyle" TargetType="telerik:GridViewFooterCell">
         <Setter Property="ContentTemplate">
                <Setter.Value>
                     <DataTemplate>
                   <TextBlock Text="{Binding Path=Something,
                                       RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}"/>
                      </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

Then reference this style using the FooterCellStyle property of  GridViewDataColumn.

Greetings,
Vanya Pavlova
the Telerik team

[haagel]

Thanks for your reply Vanya.

However, your code did not work for me directly but if after changing the binding a bit it works:

<Style x:Key="GridViewFooterTotalCellStyle" TargetType="telerik:GridViewFooterCell">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding Path=Something, ElementName=LayoutRoot}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see, all I changed was using "ElementName=LayoutRoot" instead of "RelativeSource={RelativeSource AncestorType=telerik:RadGridView}".

Also, I could write this code right into my column instead of using a style in Grid.Resources. I like to keep all stuff related to a column in the column itself, especially since I have quite a lot of columns in my gridview.

So the solution was:

<telerikGridView:GridViewDataColumn Header="MyColumn" ... >
    ...other stuff related to the column...
    <telerikGridView:GridViewDataColumn.FooterCellStyle>
        <Style TargetType="telerik:GridViewFooterCell">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding ElementName=LayoutRoot, Path=DataContext.FooterText}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerikGridView:GridViewDataColumn.FooterCellStyle>
</telerikGridView:GridViewDataColumn>

I still don't understand why I couldn't bind directly from the footer though. If anyone could shine some light on that I'd appreciate it! :)

[Vanya Pavlova]

Hello Haagel,

 
I will try to explain what is the difference between these snippets:

Imagine that you need to bind to the SelectedItems.Count of RadGridView within GridViewColumnFooter.
Then you may use the following:

<TextBlockText="{Binding Path=SelectedItems.Count,
                                       RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}"/>

Within the footer you will get the number of the SelectedItems in RadGridView. It was just a demonstration how to achieve such binding. Your snippet works directly in your case because you are bound to a property of the LayoutRoot's DataContext. Indeed if you have set the DataContext on a GridView level you will refer the name of the GridView rather than the LayoutRoot. Generally the DataContext of a row, cell etc. in RadGridView is the same - the data items.

I hope that it is much more clear now!

Kind regards,
Vanya Pavlova
the Telerik team

[haagel]

Thanks Vanya! I appreciate your quick answers! :)

There's still one thing I don't understand though...

Why doesn't this work...

<telerikGridView:GridViewDataColumn Header="MyColumn" ... >
    ...other stuff related to the column...
    <telerikGridView:GridViewDataColumn.Footer>
        <TextBlock Text="{Binding ElementName=LayoutRoot, Path=DataContext.FooterText}" />
    </telerikGridView:GridViewDataColumn.Footer>
</telerikGridView:GridViewDataColumn>

...when this works:

<telerikGridView:GridViewDataColumn Header="MyColumn" ... >
    ...other stuff related to the column...
    <telerikGridView:GridViewDataColumn.FooterCellStyle>
        <Style TargetType="telerik:GridViewFooterCell">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding ElementName=LayoutRoot, Path=DataContext.FooterText}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerikGridView:GridViewDataColumn.FooterCellStyle>
</telerikGridView:GridViewDataColumn>

[Vanya Pavlova]

Hello Haagel,

 
The Footer property is of type object and in fact you may place there whatever you need. The second approach through predefining the Footer's ContentTemplate uses a DataTemplate with a TextBlock element contained in it, which allows you to perform directly such binding to the DataContext of the LayoutRoot. You will get a better idea from our online Totals demo, which demonstrates how to create your own custom footer.



Hope this helps!

Kind regards,
Vanya Pavlova
the Telerik team

[Subramaniam]

Hi Haagel's ,
I have tried all in my project but header and footer bindings are not working at all..
Can you provide me sample project for this which will be having datagrid and footer and headers will be binding from the property.

Regards,
Subramaniam

[Vanya Pavlova]

Hello Subramaniam,


Thank you for contacting us. 

In case there is something unclear, please note that the FooterText is a property of the LayoutRoot's DataContext. Absolutely the same is valid for the header.

Can you post sample source code, that we can use for testing purposes?


Regards,
Vanya Pavlova
Telerik