GroupFooterRowStyle ControlTemplate

[Chris]

Hi,
I'm trying to create a new ControlTemplate for styling the GroupFooterRow.
I've used Reflector to extract the ControlTemplate GridViewGroupFooterRow from the Office Black Theme.
Whilst it looks okay initially, it seems to break down when a user updates a value, or sort a column, and the entire row dissapears underneath the GridViewGroupRow.  (Both intial look and the corrupted look are in the attached images).

Several conditions have to be met for this issue to appear.
A column has be grouped (can't see the footer otherwise).
And all Coumns have to be narrower than the view point.  (ie, no horizontal scroll bar should be visible).

Obviously something is not working right, and I've known that reflector doesn't always get all the template setters.  I was wondering if I could get the original source ControlTemplates for both the GridViewGroupRow and the GridViewGroupFooterRow?

Regards.

[Kalin Milanov]

Hi Chris,

Attached I am sending you the latest versions of the GridView footers. I hope they prove useful. As for the reported faulty behavior - we will have a look at it and provide a fix should there be any need for it.

Kind regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chris]

Thanks for youre reply Kalin.

It's helped me isolate the issue.
It appears that when setting the GroupFooterRowStyle property in the RadGridView directly, that this visual bug appears.

Ie, if I use the Style property in conjuction with a specific keyed Style resoruce, that the visual bug appears..

<

 

telerik:RadGridView  AutoExpandGroups="True" GroupFooterRowStyle="{StaticResource GridViewGroupFooterRowStyle}"  ...>

 

..and...

<

 

Style x:Key="GridViewGroupFooterRowStyle" TargetType="{x:Type telerik:GridViewGroupFooterRow}">

 

If I don't use the GroupFooterRowStyle property, and use the global style for all GridViewGroupFooterRow controls, it works fine and it appear and function correctly.

<

 

Style x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=grid:GridViewGroupFooterRow}" TargetType="grid:GridViewGroupFooterRow">

 

All my test code should should appear below.
To test:
1. Run the application.
2. Create a group from any one of the columns.
3. Group Footer Rows should appear black text on a gray background.
4. Sort any one of the columns.
5. [Fail point] Group Footer Rows will change color.  Color will be the same as the bottom edge of the Group Row header, and text won't be visible.

6. Remove the GroupFooterRowStyle="{StaticResource GridViewGroupFooterRowStyle}"  from the code.
7. test again.

Note, that a key part of testing this issue is that AutoExpandGroups="True" has been set.

Regards,
Chris.

<Window x:Class="WpfApplication_DataGrid.Window9"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication_DataGrid"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    Title="Window9" Height="700" Width="900" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <SolidColorBrush x:Key="GridViewRowIndicatorBackground" Color="#FFDBDEE1" />
        <SolidColorBrush x:Key="GridLinesFill" Color="#FFB3B3B3" />
        <telerik:Office_BlackTheme x:Key="Theme" />
        <telerik:BooleanToOpacityConverter x:Key="BooleanToOpacityConverter" />
        <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <DataTemplate x:Key="GridViewGroupFooterIndentCellDataTemplate">
            <grid:GridViewGroupFooterIndentCell telerik:StyleManager.Theme="{StaticResource Theme}"/>
        </DataTemplate>

        <ControlTemplate x:Key="GridViewGroupFooterRowTemplate" TargetType="grid:GridViewGroupFooterRow">
            <Border x:Name="PART_GroupFooterRowBorder"
                MinHeight="{TemplateBinding MinHeight}"
                Margin="{TemplateBinding Margin}"
                Background="{TemplateBinding Background}"
                Padding="{TemplateBinding Padding}">
                <grid:SelectiveScrollingGrid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Border x:Name="PART_IndicatorPresenter"
                        MinHeight="{TemplateBinding MinHeight}" Width="24"
                        Visibility="{TemplateBinding RowIndicatorVisibility}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0,0,1,1"
                        Grid.Column="0"
                        grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
                    <Border x:Name="PART_HierarchyIndent"
                        MinHeight="{TemplateBinding MinHeight}" Width="24"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0,0,1,1" Grid.Column="2"
                        Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
                        grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
                    <Border VerticalAlignment="Bottom"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Grid.Column="3" />
                    <grid:DataCellsPresenter x:Name="PART_DataCellsPresenter" MinHeight="{TemplateBinding MinHeight}"
                                         telerik:StyleManager.Theme="{StaticResource Theme}"
                                         Grid.Column="3" />
                    <grid:IndentPresenter x:Name="PART_IndentPresenter" MinHeight="{TemplateBinding MinHeight}"
                                      telerik:StyleManager.Theme="{StaticResource Theme}"
                                      IndentLevel="{TemplateBinding IndentLevel}"
                                      ItemTemplate="{StaticResource GridViewGroupFooterIndentCellDataTemplate}"
                                      Grid.Column="1"
                                      grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
                </grid:SelectiveScrollingGrid>
            </Border>
        </ControlTemplate>

        <Style x:Key="GridViewGroupFooterRowStyle" TargetType="{x:Type telerik:GridViewGroupFooterRow}">
            <Setter Property="Template" Value="{StaticResource GridViewGroupFooterRowTemplate}" />
            <Setter Property="Background" Value="{StaticResource GridViewRowIndicatorBackground}" />
            <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}" />
            <Setter Property="MinHeight" Value="24" />
            <Setter Property="BorderThickness" Value="0,0,0,1" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>

        <Style x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=grid:GridViewGroupFooterRow}" TargetType="grid:GridViewGroupFooterRow">
            <Setter Property="Template" Value="{StaticResource GridViewGroupFooterRowTemplate}" />
            <Setter Property="Background" Value="{StaticResource GridViewRowIndicatorBackground}" />
            <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}" />
            <Setter Property="MinHeight" Value="24" />
            <Setter Property="BorderThickness" Value="0,0,0,1" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>

        <DataTemplate x:Key="SubTotalGroupFooterTemplate">
            <StackPanel Orientation="Vertical" Margin="0,0">
                <telerik:AggregateResultsList ItemsSource="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Column="4">
                    <telerik:AggregateResultsList.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" ToolTip="Sub Total">
                                <TextBlock VerticalAlignment="Center" Text="{Binding Caption}" />
                                <TextBlock VerticalAlignment="Center" Text="{Binding FormattedValue}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:AggregateResultsList.ItemTemplate>
                    <telerik:AggregateResultsList.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </telerik:AggregateResultsList.ItemsPanel>
                </telerik:AggregateResultsList>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <telerik:RadGridView xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    AutoGenerateColumns="False"
                    ShowColumnFooters="True"
                    ShowGroupFooters="True"
                    AutoExpandGroups="True"
                    GroupFooterRowStyle="{StaticResource GridViewGroupFooterRowStyle}"
                    x:Name="uxRadGridView" telerik:StyleManager.Theme="Office_Black">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn IsFilterable="False" DataMemberBinding="{Binding Source}" />
                <telerik:GridViewDataColumn IsFilterable="False" DataMemberBinding="{Binding Amount}" />
                <telerik:GridViewDataColumn IsFilterable="False" Header="Associated Amount" DataMemberBinding="{Binding AssociatedAmount}"
                    DataFormatString="{}{0:c}" TextAlignment="Right" HeaderTextAlignment="Right" FooterTextAlignment="Right" GroupFooterTemplate="{StaticResource SubTotalGroupFooterTemplate}">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction ResultFormatString="{}{0:c}" SourceField="AssociatedAmount"/>
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn IsFilterable="False" Header="Allocated Amount" DataMemberBinding="{Binding AllocatedAmount}"
                    DataFormatString="{}{0:c}" TextAlignment="Right" HeaderTextAlignment="Right" FooterTextAlignment="Right" GroupFooterTemplate="{StaticResource SubTotalGroupFooterTemplate}">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction ResultFormatString="{}{0:c}" SourceField="AllocatedAmount" />
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn IsFilterable="False" Header="Available Amount" DataMemberBinding="{Binding AvailableAmount}"
            DataFormatString="{}{0:c}" TextAlignment="Right" HeaderTextAlignment="Right" FooterTextAlignment="Right" GroupFooterTemplate="{StaticResource SubTotalGroupFooterTemplate}">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction ResultFormatString="{}{0:c}" SourceField="AvailableAmount" />
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn IsFilterable="False" Header="Receipt Effective Date" DataMemberBinding="{Binding ReceiptEffectiveDate}" />
                <telerik:GridViewComboBoxColumn IsFilterable="False" UniqueName="ReceiptApplication" Header="Receipt Application" DataMemberBinding="{Binding ReceiptApplication}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

namespace WpfApplication_DataGrid
{
    using System;
    using System.Collections.ObjectModel;
    using System.Windows;
    using System.Windows.Data;
    using Telerik.Windows.Controls;

    /// <summary>
    /// Interaction logic for Window9.xaml
    /// </summary>
    public partial class Window9 : Window
    {
        public Window9()
        {
            InitializeComponent();

            Binding binding;

            ObservableCollection<Receipt> list2 = new ObservableCollection<Receipt>();
            list2.Add(new Receipt("HELLO", 1123, 456, 1, 8, DateTime.Today, "B"));
            list2.Add(new Receipt("HELLO", 2123, 456, 2, 7, DateTime.Today, "B"));
            list2.Add(new Receipt("HELLO", 3123, 456, 3, 6, DateTime.Today, "C"));
            list2.Add(new Receipt("HELLO", 4123, 456, 4, 5, DateTime.Today, "C"));
            list2.Add(new Receipt("WORLD", 1123, 456, 5, 4, DateTime.Today, "A"));
            list2.Add(new Receipt("WORLD", 2123, 456, 6, 3, DateTime.Today, "B"));
            list2.Add(new Receipt("WORLD", 3123, 456, 7, 2, null, "C"));
            list2.Add(new Receipt("WORLD", 4123, 456, 8, 1, DateTime.Today, "D"));
            list2.Add(new Receipt("WORLD", 4123, 456, 8, 1, DateTime.MinValue, "D"));

            binding = new Binding();
            binding.Source = list2;
            uxRadGridView.SetBinding(RadGridView.ItemsSourceProperty, binding);
        }
    }
}

namespace WpfApplication_DataGrid
{
    using System;
    using System.ComponentModel;

    public class Receipt : INotifyPropertyChanged
    {
        #region fields
        string _source;
        double _amount;
        double _associatedAmount;
        double _allocatedAmount;
        double _availableAmount;
        DateTime? _receiptEffectiveDate;
        string _receiptApplication;
        #endregion

        #region ctor
        public Receipt()
        {
        }

        public Receipt(string source, double amount, double associatedAmount, double allocatedAmount, double availableAmount, DateTime? receiptEffectiveDate, string receiptApplication)
        {
            Source = source;
            Amount = amount;
            AssociatedAmount = associatedAmount;
            AllocatedAmount = allocatedAmount;
            AvailableAmount = AvailableAmount;
            ReceiptEffectiveDate = receiptEffectiveDate;
            ReceiptApplication = receiptApplication;
        }
        #endregion

        #region properties
        public string Source
        {
            get { return _source; }
            set
            {
                _source = value;
                NotifyPropertyChanged("Source");
            }
        }
        public double Amount
        {
            get { return _amount; }
            set
            {
                _amount = value;
                NotifyPropertyChanged("Amount");
            }
        }
        public double AssociatedAmount
        {
            get { return _associatedAmount; }
            set
            {
                _associatedAmount = value;
                NotifyPropertyChanged("AssociatedAmount");
            }
        }
        public double AllocatedAmount
        {
            get { return _allocatedAmount; }
            set
            {
                _allocatedAmount = value;
                NotifyPropertyChanged("AllocatedAmount");
            }
        }
        public double AvailableAmount
        {
            get { return _availableAmount; }
            set
            {
                _availableAmount = value;
                NotifyPropertyChanged("AvailableAmount");
            }
        }
        public DateTime? ReceiptEffectiveDate
        {
            get { return _receiptEffectiveDate; }
            set
            {
                _receiptEffectiveDate = value;
                NotifyPropertyChanged("ReceiptEffectiveDate");
            }
        }

        public string ReceiptApplication
        {
            get { return _receiptApplication; }
            set
            {
                _receiptApplication = value;
                NotifyPropertyChanged("ReceiptApplication");
            }
        }
        #endregion

        #region Interface INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

[Kalin Milanov]

Hi Chris,

After some testing I can confirm that this is indeed a bug and we will be working on a fix. We are most hopeful we can fix this issue for our Q1 release.

I would like to thank you for this feedback and the effort you put in explaining the issue to us.
I also apologize for any inconvenience this might be causing you.

Sincerely yours,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.