Summaries and Caption Summaries

[Michele]

Hello

I spent a lot of time but i can not find a solution on how display Summary Values and Captions when grouping data like in picture below

Requirements are:

Display State Name, left aligned, in State colum if possible

Weight Sum for State (sum of cities (sum of persons weight)), right aligned in Weight column

Display City Name, left aligned, in City colum if possible

Weight Sum for Cities (sum of person weight in city), right aligned in Weight column

I've attached a test project

Thanks in advance

Michele

Attachment: TestDataGridGrouping_7186eac2.zip

[Vijayarasan Sivanandham]

Hi Michele,

Your requirement to display the caption summary in SfDataGrid can be achieved by using the the GridSummaryColumn.Template property. Please refer the below code snippet,

XAML Code Snippet:

<sf:SfDataGrid.CaptionSummaryRow>

                <sf:GridSummaryRow ShowSummaryInRow="False" >

                    <sf:GridSummaryRow.SummaryColumns>

                        <sf:GridSummaryColumn Name="Weight"

                                  Format="'StateSummary : {Sum:c}'"

                                  MappingName="Weight"                                      

                                  SummaryType="Int32Aggregate" >

                            <sf:GridSummaryColumn.Template>

                                <DataTemplate>

                                    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">

                                        <TextBlock Text="{Binding Converter={ StaticResource captionSummaryColumnConverter}, ConverterParameter= {x:Reference Name=grid}}"  Foreground="White" Background="LightBlue"/>

                                        <TextBlock Margin="10 0 0 0"  Text="{Binding Converter={ StaticResource captionSummaryColumnConverter}, ConverterParameter=Weight }" Foreground="White" Background="LightBlue"/>

                                    </StackPanel>

                                </DataTemplate>

                            </sf:GridSummaryColumn.Template>

                        </sf:GridSummaryColumn>                      

                        </sf:GridSummaryRow.SummaryColumns>

                </sf:GridSummaryRow>

</sf:SfDataGrid.CaptionSummaryRow>

C# Code Snippet:

class CaptionSummaryColumnConverter : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        var summaryRecordEntry = value as Group;

        if (parameter is SfDataGrid)

        {

            return string.Format((parameter as SfDataGrid).GroupColumnDescriptions[summaryRecordEntry.Level-1].ColumnName + " summary => ");

        }

        else

        {           

            if (summaryRecordEntry != null)

            {

                var columnName = parameter.ToString();

                var summaryRow = summaryRecordEntry.SummaryDetails.SummaryRow;

                var summaryCol = summaryRow.SummaryColumns.FirstOrDefault(s => s.MappingName == columnName);

                var summaryItems = summaryRecordEntry.SummaryDetails.SummaryValues;

                if (summaryItems != null && summaryCol != null)

                {

                    var item = summaryItems.FirstOrDefault(s => s.Name == summaryCol.Name);

                    if (item != null)

                    {

                        if (columnName == "Weight")

                            return string.Format(" {0:c}", item.AggregateValues.Values.ToArray());                      

 

                    }

                }

            }

        }

 

        return "Value is wrong";

    }

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        return null;

    }

}

UG Link: https://help.syncfusion.com/wpf/datagrid/summaries#using-template-7

Your requirement to display the caption summary with right aligned in SfDataGrid can be achieved by writing style of TargetType GridCaptionSummaryCell. Please refer the below code snippet,

<Style  TargetType="sf:GridCaptionSummaryCell">

            <Setter Property="HorizontalContentAlignment" Value="Right"/>           

</Style>

UG Link: https://help.syncfusion.com/wpf/datagrid/styles-and-templates#styling-captionsummary-cells

KB Link: https://www.syncfusion.com/kb/2485/how-to-set-the-horizontal-alignment-on-summary-columns

Please find the modified sample in the attachment and let us know if you have any concerns in this.

Regards,

Vijayarasan S

Attachment: ModifiedSample_ab9ad643.zip

[Michele]

Hi  Vijayarasan,

I'm sorry, there was a misunderstanding

I need caption summary with values of fields and Totals

Left aligned when value is string

Right aligned when value is number

In your sample  values of fields are missing.

I don't need "... Summary =>". It was only a tooltip to explain my requirements

Thanks again

Michele

[Dhanasekar Mohanraj]

Hi Michele,


We are currently checking the possibilities to achieve your requirement. We will check and update further details on April 4, 2022. We appreciate your patience.

Regards,
Dhanasekar M,

[Vijayarasan Sivanandham]

Hi Michele,

We are still working on this. We will update with further details on April 6, 2022.

We appreciate your patience and understanding.

Regards,

Vijayarasan S

[Vijayarasan Sivanandham]

Hi Michele,

We deeply regret for the delay.

We are still working on this. So, we need two more business days to validate this. We will update with further details on April 11, 2022.

We appreciate your patience and understanding.

Regards,
Vijayarasan S

[Michele]

Hi  Vijayarasan

No problem, i'll wait

Thanks

Michele

[Vijayarasan Sivanandham]

Hi Michele,

Please find answer for your queries below

Queries	Solutions
Left aligned when value is string   Right aligned when value is number	Your requirement to change the caption summary alignment in SfDataGrid can be achieved by using CaptionSummaryCellStyleSelector like below mentioned code snippet, XAML Code Snippet: <Window.Resources>         <local:ContentAlignmentSelectorClass x:Key="contentAlignmentSelectorClass" />                <Style  TargetType="sf:GridCaptionSummaryCell"  x:Key="captionSummaryRightAligned" >             <Setter Property="HorizontalContentAlignment" Value="Right" />         </Style>         <Style TargetType="sf:GridCaptionSummaryCell" x:Key="captionSummaryLeftAligned" >             <Setter Property="HorizontalContentAlignment" Value="Left"/>         </Style> </Window.Resources>   <sf:SfDataGrid x:Name="grid"                        ItemsSource="{Binding Persons}"                        AutoGenerateColumns="False"                        AllowGrouping="True"                        ShowGroupDropArea="True"                        AllowResizingColumns="True"                        AllowSorting="True"                        AllowDraggingColumns="True"                        CaptionSummaryCellStyleSelector="{StaticResource contentAlignmentSelectorClass}"                        GroupDropAreaText="Group by Columns"                        LiveDataUpdateMode="AllowDataShaping"                        ShowColumnWhenGrouped="True"                                              HeaderRowHeight="40"/>   C# Code Snippet: public class ContentAlignmentSelectorClass : StyleSelector {     public override Style SelectStyle(object item, DependencyObject container)     {         var getCaptionSummaryCell = container as GridCaptionSummaryCell;           //here customize based on your scenario         if(getCaptionSummaryCell != null && getCaptionSummaryCell.ColumnBase != null && getCaptionSummaryCell.ColumnBase.GridColumn != null)         {             //here set style to left aligned State column caption summary cell             if(getCaptionSummaryCell.ColumnBase.GridColumn.MappingName == "State")                 return App.Current.MainWindow.Resources["captionSummaryLeftAligned"] as Style;             //here set style to right aligned for others column caption summary cell             return App.Current.MainWindow.Resources["captionSummaryRightAligned"] as Style;         }         return base.SelectStyle(item, container);     } } UG Link: https://help.syncfusion.com/wpf/datagrid/conditional-styling?cs-save-lang=1&cs-lang=xaml#conditional-styling-of-caption-summary-cells-using-style-selector KB Link: https://www.syncfusion.com/kb/2485/how-to-set-the-horizontal-alignment-on-summary-columns
Caption summary with values of fields grouping while expanded	Your requirement to caption summary with values of fields and Totals in SfDataGrid can be achieved by using defining the GridSummaryRow.Title and GridSummaryRow.TitleColumnCount property. Please refer the below code snippet,   XAML Code Snippet: <Window.Resources>                 <local:TitleSummaryConverter x:Key="titleSummaryConverter"/> </Window.Resources>   <sf:SfDataGrid.CaptionSummaryRow>                 <sf:GridSummaryRow ShowSummaryInRow="False" TitleColumnCount="1" Title="'{Key}'" >                     <sf:GridSummaryRow.SummaryColumns>                                                <sf:GridSummaryColumn Name="City"                                                 Format="'{Count}'"                                                                                              MappingName="City"                                                 SummaryType="CountAggregate" />                           <sf:GridSummaryColumn Name="Name"                                                 Format="'{Count}'"                                                 MappingName="Name"                                                 SummaryType="CountAggregate" />                                        <sf:GridSummaryColumn Name="Weight"                                   Format="'{Sum}'"                                   MappingName="Weight"                                                                         SummaryType="Int32Aggregate" >                                                   </sf:GridSummaryColumn>                                               </sf:GridSummaryRow.SummaryColumns>                     <sf:GridSummaryRow.TitleTemplate>                         <DataTemplate>                             <TextBlock Text="{Binding Converter={StaticResource titleSummaryConverter}, ConverterParameter= {x:Reference Name= grid}}"  />                         </DataTemplate>                     </sf:GridSummaryRow.TitleTemplate>                 </sf:GridSummaryRow> </sf:SfDataGrid.CaptionSummaryRow>   C# Code Snippet: class TitleSummaryConverter : IValueConverter {     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)     {           var data = value != null ? value as Group : null;         if (data != null && data.Records != null)         {             var getRecord = (data.Records[0].Data as Person);             return getRecord.State;         }                 return data.Key;     }       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)     {         return null;     } }     UG Link: https://help.syncfusion.com/wpf/datagrid/summaries#displaying-column-summary-with-title-2 https://help.syncfusion.com/wpf/datagrid/summaries#using-template-8

Please find the modified sample in the attachment and let us know if you have any concerns in this.

Regards,
Vijayarasan S

Attachment: ModifiedSample_8b66682a.zip

[Michele]

Hello  Vijayarasan 

It seems to work as espected.

Great

Thanks a lot

Michele

[Vijayarasan Sivanandham]

Hi Michele,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you😊.

Regards,

Vijayarasan S