RadGridView - Would like to see a "FooterTemplate" property available on columns...

9 posts, 1 answers
  1. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 21 Mar 2011 Link to this post

    I would like to see a "FooterTemplate" property exposed for a GridViewDataColumn please.  OR I *could* even settle with applying the GroupFooterTemplate to the Footer...

    In my application, I have a failry basic data grid that shows totals (that are obviously totals) and I do not need to show the caption for the footer column.  i.e "Sum: $13.00"  I just want to show "$13.00".

    In the GroupFooterRow, I can just override the GroupFooterTemplate with a DataTemplate like this:

    <DataTemplate x:Key="dt_GroupFooterTemplate">
         <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" />
    </DataTemplate>

    which will simply omit the caption...

    I have tried to accomplish the same thing via customized ContentTemplate in the GridViewFooterCell style but it doesn't work because of the bug with asynchronously building columns, aggregates and data loading at different times and not refreshing the grid properly (which would also be awesome if you ever got around to fixing it)...

    <Setter Property="ContentTemplate">
       <Setter.Value>
          <DataTemplate>
             <TextBlock Text="{Binding FormattedValue}" FontWeight="Bold" TextAlignment="Right" />
          </DataTemplate>
       </Setter.Value>
    </Setter>




     

     

  2. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Mar 2011 Link to this post

    Hi Rob,

     
    You may use the Footer property of GridViewColumn, which is of type object and you can define everything you need inside it as shown below:

    <grid:GridViewDataColumn.Footer>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Text="Custom footer with aggregates:" Margin="0,0,0,2" />
                                        <gridView:AggregateResultsList ItemsSource="{Binding}" VerticalAlignment="Center">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                                        <TextBlock VerticalAlignment="Center" Text="{Binding Caption}" />
                                                        <TextBlock VerticalAlignment="Center" Text="{Binding FormattedValue}" />
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Vertical" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </gridView:AggregateResultsList>
                                    </StackPanel>
                                </grid:GridViewDataColumn.Footer>


    If you need any further assistance, please let me know.


    Greetings,
    Vanya Pavlova
    the Telerik team
  3. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 22 Mar 2011 Link to this post

    Thanks Vanya.  This seems to have done the trick and I'll go with it in my project.

    I'm not sure why my original method doesn't always work.  I have logged a few issues already with the CalculateAggregates() method and sync arrival of columns / data... but to no avail because it's hard to reproduce.

    Thanks again,
    Rob
  4. Ruan
    Ruan avatar
    10 posts
    Member since:
    Nov 2010

    Posted 22 Sep 2011 Link to this post

    Hi

    I'm just curious, would it be possible to add a footer object to the RadGrid if autogenerate-columns is set to true.

    I'm well aware that this wouldn't seem like a wise choice, as you do not necessarily know which columns are what type or whatever, but in my case, i need the columns to be auto-generated and have a footer (which will contain a custom control).

    If this is possible, please point me in a direction as to how I would be able to get this result.

    What I currently have is editing the footer row style in the radgrid.
    Then inside of this I define a template for this style.
    This is where I get stuck.

    Any help would be very much appreciated.

    Ruan
  5. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 22 Sep 2011 Link to this post

    Hello Ruan,

    There should be no problem setting a footer to an autogenerated column . This can be done inside an event handler for the RadGridView.AutogeneratingColumn event .


    Greetings,
    Pavel Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Ruan
    Ruan avatar
    10 posts
    Member since:
    Nov 2010

    Posted 22 Sep 2011 Link to this post

    Thank you very much for your quick response Pavel.

    This seems to work, although now I have another question.
    How do I get the footer background absolutely transparent, and its contents to overflow into the grid (Attached image will explain)?

    The scenario is basically that I need to apply aggregate functions inside of the custom control (i.e. Avg, min, max, etc.) and only columns with data of type int/decimal/long/etc. can have the style.

    Find attached the plan XD

    Ruan
  7. Ruan
    Ruan avatar
    10 posts
    Member since:
    Nov 2010

    Posted 23 Sep 2011 Link to this post

    Still stuck on this particular issue... O.O

    Ruan
  8. Ruan
    Ruan avatar
    10 posts
    Member since:
    Nov 2010

    Posted 27 Sep 2011 Link to this post

    Okay, so I've added the following code to the autogenerating-column event of the radgrid:

                var s = (RadGridView)sender;
                var headerStyle = (Style)Resources.Where(resource => (string)resource.Key == "GridViewHeaderCellStyle1").First().Value;
                //The generated column.
                var generatedColumn = (GridViewBoundColumnBase)e.Column;
                e.Column.HeaderCellStyle = headerStyle;


                if (s.Columns.Count == 0) return;


                var dataType = generatedColumn.DataType;
                var summaryViewModel = new SummaryViewModel();
                var summaryView = new SummaryView();
                ViewModelBinder.Bind(summaryViewModel, summaryView, null);
                var cd = new ColumnDefinition {Width = new GridLength(generatedColumn.Width.Value, GridUnitType.Pixel)};


                if (dataType == typeof(int) || dataType == typeof(double))
                {
                    summaryView.Width = 125.00;
                    cd.Width = new GridLength(summaryView.Width, GridUnitType.Pixel);
                    generatedColumn.Width = new GridViewLength(summaryView.Width, GridViewLengthUnitType.Pixel);


                    SummaryGrid.ColumnDefinitions.Add(cd);
                    Grid.SetColumn(summaryView, AssetRegister.Columns.Count - 1);
                    SummaryGrid.Children.Add(summaryView);
                }
                else
                    SummaryGrid.ColumnDefinitions.Add(cd);

    This works in terms of I get the control I want in the grid-column I want.
    The following are issues I'm struggling with:
    - changing the width of a gridcolumn to the generated radgrid-column width. (This remains 0, thus all the "unpopulated" columns are 0).
    - secondly, if i were to put the summary-grid into a scrollviewer, how would I go about to have the two scrollers (PART_ItemsScrollViewer and Summary_Scroller [my own scroller] communicate to scroll in sync?

    (Attached is the result I get from the current code, as you can see there is a very small space between the two summaries. This is because the generated-column has a width value of 1.00, so having like 3 columns between the two summaries, creates a small gap of 3.00.)

    Ruan
  9. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 28 Sep 2011 Link to this post

    Hi Ruan,

     

    I believe that it would be much more appropriate to predefine the FooterTemplate of a column and set it within AutoGeneratingColumn's event handler. You may refer to the following snippet:


    MainPage.xaml:


    <Style TargetType="telerik:GridViewFooterCell">
            <Setter Property="BorderThickness" Value="0"/>
            </Style>
        <Style TargetType="telerik:GridViewFooterRow">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            </Style>
        <DataTemplate x:Key="dd">
            <telerik:RadExpander Width="75" Background="Red" Header="Header" ExpandDirection="Up">
                <telerik:RadGridView Width="75" Height="75" Background="Transparent" ...../>
            </telerik:RadExpander>
            </DataTemplate>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
            <telerik:RadGridView GridLinesVisibility="None" CanUserFreezeColumns="False" RowIndicatorVisibility="Collapsed" ShowColumnFooters="True" ItemsSource="{Binding Collection}" AutoGeneratingColumn="RadGridView_AutoGeneratingColumn"/>
        </Grid>


    MainPage.xaml.cs:

    public partial class MainPage : UserControl
        {
            public MainPage()
            {
                // Required to initialize variables
                InitializeComponent();
            }
     
            private void RadGridView_AutoGeneratingColumn(object sender, Telerik.Windows.Controls.GridViewAutoGeneratingColumnEventArgs e)
            {
                if (e.Column is GridViewDataColumn)
                {
                    var column = e.Column as GridViewDataColumn;
                    column.Footer = (this.Resources["dd"] as DataTemplate).LoadContent();
                }
            }
        }

    Then your own custom footer will be aligned correspondingly to its column and you do not have to embed these in a ScrollViewer. Just use the RadGridView's GridViewScrollViewer. As you may see you can define styles for GridViewFooterRow, GridViewFooterCell to achieve nice appearance. This example is simple and you may define your own custom UserControl, whithin the defined DataTemplate. 


    Hope this helps! 



    Greetings,
    Vanya Pavlova
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top