Editing Group Header

[Christopher Bell]

I have a Synfusion DataGrid that displays data as shown in the attached screenshot. Notice that I am Grouping the data. The underlying data has a ‘Transaction Type’, such as ‘Receipt’, ‘Direct Debit’. Etc. These transaction types come from a lookup table which also has a ‘sort order’ column. In the data for the grid, I am concatenating the sort order with the transaction type description and calling it ‘GroupKey’. It is this column that I am using for grouping. 

Ideally, I would like to suppress the column name from the Group description together with the colon and the prefix of the sort order in the concatenated SortOrder and transaction type description.

As for the column name part I have succeeded by setting the ‘HeaderText’ to an empty string (“”). See the screenshot of the grid code.

Is there a way to achieve what I want?

[Guhanathan Ramanathan]

Hi  ,

 

Based on your requirement, we have implemented a CaptionTemplate in the Syncfusion DataGrid to customize the group header text. Instead of displaying the default column name, colon, and concatenated sort order prefix, the template extracts only the transaction type from the GroupKey by removing the numeric sort order. It then renders the transaction type in bold along with the item count, ensuring the group caption displays clean text such as “Receipt (Items: 2)” or “Direct Debit (Items: 2)”, while the GroupKey column itself remains hidden. Please refer to the code snippet and attached sample for your reference.

<SfGrid DataSource="@Transactions" AllowGrouping="true" AllowPaging="true" Height="315px">

    <GridGroupSettings  >

        <CaptionTemplate>

            @{

                var ctx = context as CaptionTemplateContext;

                // ctx.Key contains "1 Receipt", "2 Direct Debit", etc.

                var rawKey = ctx.Key?.ToString() ?? "";

                // Strip off the sort order prefix (everything before first space)

                var cleanKey = rawKey.Contains(" ") ? rawKey.Substring(rawKey.IndexOf(" ") + 1) : rawKey;

            }

            <span style="font-weight:bold">@cleanKey</span>

            <span style="color:gray"> (Items: @ctx.Count)</span>

        </CaptionTemplate>

       

    </GridGroupSettings>

    <GridColumns>

        <!-- GroupKey column used for grouping -->

        <GridColumn Field="GroupKey" HeaderText="" AllowGrouping="true" Visible="false" />

        <GridColumn Field="TransactionType" HeaderText="Transaction Type" Width="150" />

        <GridColumn Field="Amount" HeaderText="Amount" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120" />

        <GridColumn Field="Date" HeaderText="Date" Format="d" Width="150" />

    </GridColumns>

   

</SfGrid>

}

 

Documentation:Caption template in Blazor DataGrid | Syncfusion

 Sample:https://blazorplayground.syncfusion.com/embed/rNLysBsHhdVRAejp?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Guhanathan   

[Christopher Bell]

Hi  Guhanathan

Brilliant. Thank you so much. That answered my question completely. That's what I really like about Syncfusion, superb support.  (Make sure you tell your boss! - I'll tell everyone else.)

Kind regards

Chris

[Guhanathan Ramanathan]

Hi Chris,

 

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

 

Regards,

Guhanathan R