Grid: CaptionTemplateContext has property 'Key' is null for field in complex object

[Alexey Kazakevich]

@{ var _groupInitial = new[] { "Trip.Route" }; }

@* Group initial *@
<GridGroupSettings Context="gridContext" Columns=@_groupInitial>
      <CaptionTemplate Context="templateContext">
      @{
        var tripItem = (templateContext as CaptionTemplateContext);
        <div>@tripItem.Field - @tripItem.Key</div>
      }
      </CaptionTemplate>
</GridGroupSettings>

@* Route *@
<GridColumn Field="Trip.Route" MinWidth="200" MaxWidth="350" AutoFit="true"
            HeaderText="@(DataAnnotationExtensions.GetDisplayName<Trip, Route>(t => t.Route))"
            SortComparer="new RouteCustomComparer()">
      <Template Context="gridContext">
        <div style="display: flex; flex-direction: column;">
          <span>@(((Trip)gridContext).Route?.DepartureLocality.DisplayTitle) -> @(((Trip)gridContext).Route?.ArrivalLocality.DisplayTitle)</span>
          <span>@string.Join(", ", ((Trip)gridContext).Route.LocalitiesInterRoute.Select(l => l.Locality.DisplayTitle))</span>
         </div>
      </Template>
 </GridColumn>

[Monisha Saravanan]

Hi Alex,

Greetings from Syncfusion support.

We have checked your query at we could not able to reproduce the reported issue at our end when using complex column with GroupCaption template. Kindly check the attached code snippet and sample for your reference.

 

<SfGrid DataSource="@Employees" AllowGrouping="true" Height="315">

    <GridGroupSettings Context="gridContext" Columns=@Units>

        <CaptionTemplate Context="templateContext">

            @{

                var order = (templateContext as CaptionTemplateContext);

                <div>@order.Field - @order.Key</div>

            }

        </CaptionTemplate>

    </GridGroupSettings>

    <GridColumns>

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="EmployeeID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150">

            <Template Context="templateContext">

                @{

                    var data = (templateContext as EmployeeData);

                    @data.Name.FirstName;

                }

 

            </Template>

        </GridColumn>

</SfGrid>

 

@code{

    public List<EmployeeData> Employees { get; set; }

     private string[] Units = (new string[] { "Name.FirstName" });

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-2025126178.zip

If the reported issue still persist then kindly share the following details to validate further at our end.

1. Share us the entire Grid code snippet.
2. Share us the data present in the context inside group caption template.
3. Share us the way you have handled sort comparer in DataGrid.
4. Share us the video demonstration of the issue explaining your query.
5. If possible share us the issue reproduceable sample or try to reproduce the issue on the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha

[Alexey Kazakevich]

In Field="Trip.Route" I use a complex Route object, which is not a string type, but an object. So your example works, yes, but mine doesn't.

Have you seen that I use a template to display formatted data? This is exactly the template I need in the grouping text. I've attached screenshots.

[Monisha Saravanan]

Hi Alex,

Thanks for the update.

 Currently we are validating your query at our end and we will update further details within two business days on or before (02.05.2022). Until then we appreciate your patience.

Regards,

Monisha

[Monisha Saravanan]

Hi Alex,

Thanks for the patience.

We have analyzed your query and suspect that the issue occurs because the complex route object is of type Object. We would like to inform you that grid is a strongly typed component. So it works based on a TValue and here the TValue is the specific model type(class) and the context will contain only the strongly typed value. So when we denote object type then it would not be available in the context of the Grid.

Kindly get back to us if you have further queries.

Regards,

Monisha