How To Combine Group Caption Details With Custom Summary Results In One Line

I have a SfDataGrid that is grouping columns by a specific mapping name. My implementation uses a GridSummaryColumn to compute a custom aggregate value and places it inside a GridSummaryRow so that the summary calculates the result for each group. I do not want this Grid Summary value however to be on the bottom of the grouped rows, but instead at the top of the row in the same place as the Group Caption Summary. I want this Grid Summary value to be aligned on the same column the custom aggregate value is being calculated on. The grid summary aggregate value needs to be aligned at the same column it aggregated on, in the caption text summary. I also need this caption text to have the text of the dynamic column name the rows are grouped by, and the number of rows. So it should look like the following:

{DynamicGroupedColumnName} ({RowCount} Rows) |       Custom Aggregate: 23                 Custom Aggregate: 56

The Custom Aggregate summary values in the caption summary should be aligned at the columns it's summarizing.


3 Replies

SB Sweatha Bharathi Syncfusion Team December 11, 2025 12:54 PM UTC

Hi Eric Nguyen,

We have reviewed your query. We understand that you need to combine the group caption details with custom aggregate values in a single line. To achieve this, you can set the CaptionSummaryRow and the summary column, define a custom aggregate for the summary column, and set ShowSummaryInRow to false to align the custom aggregate values in the same column. Additionally, set TitleColumnCount to display the title.

Code snippet to align the custom aggregate and caption details in CaptionSummaryRow:

<syncfusion:SfDataGrid.CaptionSummaryRow>
    <syncfusion:GridSummaryRow Title="[{ColumnName}: {Key} – {ItemsCount} Rows |  Custom Aggregate:"
                                                          ShowSummaryInRow="False"
                                                          TitleColumnCount="3">
        <syncfusion:GridSummaryRow.SummaryColumns >
            <syncfusion:GridSummaryColumn Name="TotalQuantity"                                          
                                          SummaryType="Custom"
                                          CustomAggregate="{StaticResource customAggregate}"
                                          Format="'{TotalQuantity}'"
                                          MappingName="Quantity"/>
        </syncfusion:GridSummaryRow.SummaryColumns>
    </syncfusion:GridSummaryRow>
</syncfusion:SfDataGrid.CaptionSummaryRow>

Image Reference:


UG Link: Summaries

Find the sample demo in the attachment and let us know if you have any concerns on this.

Regards,
Sweatha B

Attachment: Sample_8c9c2aac.zip


EN Eric Nguyen December 11, 2025 09:51 PM UTC

Thank you, is it possible to create a column span greater than one for a column in the CaptionSummaryRow?

I looked at other syncfusion solutions per previous solution. I am currently using a custom GridCaptionSummaryCellRenderer class to assign the content of each column cell for the CaptionSummaryRow, but the first column text would get cut off. If I use the default GridCaptionSummaryCellRenderer, then the first column text not get cut off. 



SB Sweatha Bharathi Syncfusion Team December 12, 2025 01:44 PM UTC

Eric Nguyen ,

We have reviewed your query and understand that you are using the custom GridCaptionSummaryCellRenderer to assign the content for each column cell, and the first column text gets cut off. This issue occurs when the caption content for a column cell is larger than the column width, the text will be clipped. To avoid this, you can measure the content width using custom MeasureTextWidth method and, based on the result, set the appropriate width for the corresponding column. 

Code snippet to resolve the text cut off for caption summary cell:

public class CaptionSummaryRenderer : GridCaptionSummaryCellRenderer
{
    public override void OnUpdateEditBinding(DataColumnBase dataColumn, GridCaptionSummaryCell element, object dataContext)
    {
        base.OnUpdateEditBinding(dataColumn, element, dataContext);
        var groupRecord = element.DataContext as Group;
        if (groupRecord == null)
            return;
        var groupedColumn = this.GetGroupedColumn(groupRecord);
        if (groupedColumn == null)
            return;

        var summaryValue = groupRecord.GetSummaryValue(dataColumn.GridColumn.MappingName);
 
        element.Content = groupedColumn.HeaderText + ":"  + groupRecord.Key +" " + groupRecord.ItemsCount + " " + "rows" + " "+"CustomAggregate" + ":" + summaryValue;

        double textWidth = MeasureTextWidth(element.Content.ToString(), element);

        dataColumn.GridColumn.Width = textWidth + 10;
    }
 
    private static double MeasureTextWidth(string text, GridCaptionSummaryCell element)
    {

        var tb = new TextBlock
        {
            Text = text,
            FontFamily = element.FontFamily,
            FontSize = element.FontSize,
            FontWeight = element.FontWeight
        };
        tb.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

        return tb.DesiredSize.Width;

    }
}

As mentioned earlier, if you are using a single title for the entire CaptionSummaryRow without individual content for each cell, you can utilize the TitleColumnCount property to avoid text clipping.

Find the sample demo in the attachment and let us know if you have any concerns on this

If we have misunderstood your requirement, please modify the provided sample to replicate your scenario. If possible, include an image or video reference for better clarity.

This information will help us proceed further and provide an accurate solution.

Attachment: Sample_afc36d88.zip

Loader.
Up arrow icon