Grouping Caption Template when using GridColumn Template

[Geraud Bertrand]

I want to create a datagrid which grouping enabled and if user do grouping on IdxNiveau the template should be `Niveau : NameOfNiveau` but by default it is `Niveau : IdxNiveau`.
How to do it with Template in GridGroupSettings

<SfGrid @ref="Tab"
                        DataSource="Locaux"
                        AllowGrouping="true"
                        Width="80%"
                         >
                    <GridColumns>
                        <GridColumn Field="@nameof(Local.IdxNiveau)" HeaderText="Niveau">
                            <Template>
                                <p>@((context as Local).Niveau.Nom)</p>
                            </Template>
                        </GridColumn>
                        <GridColumn Field="@nameof(Local.Nom)" HeaderText="Local"></GridColumn>
                        <GridColumn Field="@nameof(Local.CategorieName)" HeaderText="Catégorie">                  </GridColumn>
                    </GridColumns>
                    <GridGroupSettings Columns="@ColumnsTemplate">
                        <CaptionTemplate>
                            @{
                                var niveau = (context as CaptionTemplateContext);
                                <div>@niveau.HeaderText : @niveau.Key</div>
                            }
                        </CaptionTemplate>
                    </GridGroupSettings>
                </SfGrid>

                    
                

[Monisha Saravanan]

Hi Geraud, 

 

Thanks for contacting Syncfusion support. 

 

We analyzed your query and we suspect that you want to display the custom value in the Group CaptionTemplate similar to the value displayed in column using Column Template feature. We have achieved your requirement by calling a custom function from CaptionTemplate to find the corresponding record detail in Code section and return the template value.  

 

Kindly refer the below code snippet and attached sample for your reference. 

 

@{ 

    var Template = (new string[] { "OrderID" }); 

} 

<SfGrid  DataSource="@Orders" @ref="Grid" AllowGrouping="true" Height="400"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"> 

             <Template> 

              <p>@((context as Order).Name.FirstName)</p> 

             </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

    <GridGroupSettings Columns=@Template> 

        <CaptionTemplate> 

            @{ 

                var order = (context as CaptionTemplateContext); 

                <div> @order.HeaderText : @GetData(order)</div> 

            } 

        </CaptionTemplate> 

    </GridGroupSettings> 

</SfGrid> 

 

@code{ 

    public SfGrid<Order> Grid; 

    public List<Order> Orders { get; set; } 

 

    public string GetData(CaptionTemplateContext args) 

    { 

        if (args.Field == "OrderID") 

        { 

            var data = Grid.DataSource.Where(x => x.OrderID.ToString() == args.Key).ToList(); 

            return $"{data.First().Name.FirstName}"; 

            

        } 

        else 

        { 

            return $"{args.Key}"; 

        } 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-94586192.zip 

 

Kindly revert us if you have any queries. 

 

Regards, 

Monisha S.