Label and tooltip error message not displaying in SfGrid dialog for complex field

Hi,

I have the following two classes.

    public class Container
    {
        [Required(ErrorMessage = "Barcode must be specified.")]
        public string Barcode { get; set; }
        [Required(ErrorMessage = "Container Type must be specified.")]
        public int? ContainerTypeId { get; set; }
        public ContainerType? ContainerType { get; set; }
    }
    public class ContainerType
    {
        public int Id { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
    }

I am showing details of Containers in an SfGrid, with full CRUD facilities, and an SfDropDownList for the ContainerType column.

<SfGrid TValue="Container" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Search" })" AllowSorting="true" AllowResizing ="true">
    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog">
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Container.Barcode) Width="30%" HeaderText="Barcode" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Left"></GridColumn>
        <GridColumn Field="ContainerType.Description" Width="70%" HeaderText="Container Type" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left">
            <EditTemplate>
                <SfDropDownList DataSource="@ContainerTypes" TItem="ContainerType" TValue="int?" @bind-Value="@((context as Container).ContainerTypeId)">
                    <DropDownListFieldSettings Text="Description" Value="Id"></DropDownListFieldSettings>
                </SfDropDownList>
            </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>

All this works fine and I can create, update and delete containers.  The only issue is that the dialog does not show the label for the Container Type, nor does it show the 'Required' error message for the Container Type field (although it does give the combobox a red border).

Screenshot 2025-06-20 094313.png

Can you see why this would be happening?  Can you confirm if I am specifying the DropDownList column correctly?



4 Replies

SK Sanjay Kumar Suresh Syncfusion Team June 24, 2025 04:13 AM UTC

Hi Jeremi Reda,


Query 1: Validation message is not shown when using complex data type.


When using complex data columns with EditTemplate in the Syncfusion Blazor DataGrid, ensure that validation messages appear correctly by linking the editor component to the grid column using the ID property. This allows the validation mechanism to map properly. To perform validation for complex data binding columns we recommend to use the ValidateComplexType attribute of data annotation.


Ensure to include the package Microsoft.AspNetCore.Components.DataAnnotations.Validation for complex type validation using the following reference:


<PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-rc1.20223.4" />



Here's an example of how you can specify the ID for the SfDropDownList and adding ComplexDataType attribute:


Code Snippet:


<GridColumn Field="ContainerType.Description" Width="70%" HeaderText="Container Type" TextAlign="TextAlign.Left">

      <EditTemplate>

          <SfDropDownList DataSource="@ContainerTypes" Placeholder="Description" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" ID="ContainerType___Description"

....

public class Container

{

    [Required(ErrorMessage = "Barcode must be specified.")]

    public string Barcode { get; set; }

    [Required(ErrorMessage = "Container Type must be specified.")]

    public int? ContainerTypeId { get; set; }

 

    [ValidateComplexType]

    public ContainerType ContainerType { get; set; }

}

 

public class ContainerType

{

    public int Id { get; set; }

    public string Code { get; set; }

    [Required(ErrorMessage = "First name should not be empty")]

    public string Description { get; set; }

}



Additional Reference:

https://blazor.syncfusion.com/documentation/datagrid/column-validation?cs-save-lang=1&cs-lang=razor#validate-complex-column-using-data-annotation-attribute



Query 2: Label not shown for the complex field


We request you to set the float label and the placeholder property to the dropdown component to view the label for the complex data type.


Code Snippet:


  <GridColumn Field="ContainerType.Description" Width="70%" HeaderText="Container Type" TextAlign="TextAlign.Left">

      <EditTemplate>

          <SfDropDownList DataSource="@ContainerTypes" Placeholder="Description" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" ID="ContainerType___Description" TItem="ContainerType" TValue="int?" @bind-Value="@((context as Container).ContainerTypeId)">

              <DropDownListFieldSettings Text="Description" Value="Id"></DropDownListFieldSettings>

          </SfDropDownList>

      </EditTemplate>

  </GridColumn>


The sample has been attached please check and let us know if you have any questions.


Regards,

Sanjay Kumar Suresh


Attachment: DataGridSupport_4a285caf.zip


JR Jeremi Reda replied to Sanjay Kumar Suresh June 24, 2025 03:13 PM UTC

Hi,  thanks for this.  It very nearly works as required.

The one outstanding issue is that the actual error message for the complex type is being ignored.

In the sample program that you sent, the error message for the ContainerType.Description field was set to "First name should not be empty".  However, the error message shown by the dialog looks to be a standard generic message - "This field is required".


Screenshot 2025-06-24 160545.png


Is there a way to get the defined error message to show?




SK Sanjay Kumar Suresh Syncfusion Team June 27, 2025 07:08 AM UTC

Hi Jeremi Reda,


Greetings from Syncfusion,


We have confirmed that this is an issue and logged a defect report titled  “Validation Messages is shown incorrect for Complex columns on dialog edit mode” This fix will be included in our weekly patch release, which is expected to be rolled out on July 15th, 2025. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    


https://www.syncfusion.com/feedback/68525/validation-messages-is-shown-incorrect-for-complex-columns-on-dialog-edit-mode


Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”


We will get back to you once the release is rolled out. Until then we appreciate your patience.


Regards,

Sanjay Kumar Suresh



SK Sanjay Kumar Suresh Syncfusion Team July 18, 2025 01:11 PM UTC

Hi Jeremi Reda,


Apologies for the delay in getting back to you.


We’ve created a support ticket for this issue. Please log in using your Syncfusion account to view the ticket.

Tickets | Syncfusion


Regards,

Sanjay Kumar Suresh


Loader.
Up arrow icon