Receive muliple Validation errors using the <Template> option in EditMode.Dialog

[Larry]

I am using the <Template> in EditMode.Dialog to hide fields(columns)  as suggested  on the syncfusion documenation site here: https://blazor.syncfusion.com/documentation/datagrid/how-to/show-or-hide-columns-in-dialog-editing

Below I used the code from your site and get the same result in my project...    Thanks for your help.

When I use the code at this location and put a Required annotation on the CustomerID field and remove the data, Customer Name text box and click save, two error validation responses are displayed.   How can I get the <Template> custom area behavior to show validation errors properly.  thanks

Thanks

@page "/TestPage"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Calendars
@using System.ComponentModel.DataAnnotations;
 
<SfGrid DataSource="@Orders" AllowPaging="true" @ref="Grid" Toolbar="@(new string[] { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">
        <Template>
            @{
                var Order = (context as Order);
                <div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Order ID</label>
                            <SfNumericTextBox TValue="int?" FloatLabelType="FloatLabelType.Always" @bind-Value="@(Order.OrderID)" Enabled="@Data"></SfNumericTextBox>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Customer Name</label>
                            <SfAutoComplete ID="customerID" FloatLabelType="FloatLabelType.Always" TItem="Order" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData">
                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
                            </SfAutoComplete>
                            <ValidationMessage For="@(() => @Order.CustomerID)"/>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Order Date</label>
                            <SfDatePicker ID="OrderDate" FloatLabelType="FloatLabelType.Always" @bind-Value="@(Order.OrderDate)"></SfDatePicker>
 
                        </div>
                    </div>
                </div>
            }
        </Template>
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Center" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Visible="false" Format="d" TextAlign="TextAlign.Center" Width="130" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>
 
@code {
    SfGrid<Order> Grid;
    public List<Order> Orders { get; set; }
    public bool Enabled = true;
    public bool Data = false;
    public List<Order> GridData = new List<Order>
{
        new Order() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = DateTime.Now.AddDays(-2) },
        new Order() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = DateTime.Now.AddDays(-5) },
        new Order() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, OrderDate = DateTime.Now.AddDays(-12) },
        new Order() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, OrderDate = DateTime.Now.AddDays(-18)},
        new Order() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3,  OrderDate = DateTime.Now.AddDays(-22)},
        new Order() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, OrderDate = DateTime.Now.AddDays(-26) },
 
    };
 
    public void ActionBeginHandler(ActionEventArgs<Order> args)
    {
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)
        {
            Data = true;
        }
    }
 
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
            {
                OrderID = 1000 + x,
                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
                Freight = 2.1 * x,
                OrderDate = DateTime.Now.AddDays(-x),
            }).ToList();
    }
 
    public class Order
    {
        public int? OrderID { get; set; }
        [Required]
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

[Larry]

Also as shown in the image

Details of 1003 .. is there a way to alter or add to the header information...

[Prathap Senthil]

Hi Larry,

Query:” two error validation responses are displayed.   How can I get the <Template> custom area behavior to show validation errors properly.”

After reviewing the information provided, we have determined that the issue is likely due to using both data annotations and the grid's inbuilt validation in the grid edit settings template.To resolve the issue, we recommend using only one validation method. To help you with this, we have provided a modified sample and screenshot for your reference. You can also refer to our documentation on column validation in the data grid, which can be found at the following link: https://blazor.syncfusion.com/documentation/datagrid/column-validation#display-validation-message-in-dialog-template

 

<SfGrid DataSource="@Orders" AllowPaging="true" @ref="Grid" Toolbar="@(new string[] { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">

        <Validator>

            <DataAnnotationsValidator></DataAnnotationsValidator>

        </Validator>

        <Template>

            @{

                var Order = (context as Order);

                <div>

                   

                    <div class="form-row">

                        <div class="form-group col-md-6">

                            <label>Order ID</label>

                            <SfNumericTextBox TValue="int?" FloatLabelType="FloatLabelType.Always" @bind-Value="@(Order.OrderID)" Enabled="@Data"></SfNumericTextBox>

                        </div>

                        <div class="form-group col-md-6">

                            <label>Customer Name</label>

                            <SfAutoComplete ID="customerID" FloatLabelType="FloatLabelType.Always" TItem="Order" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData">

                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>

                            </SfAutoComplete>

                            <ValidationMessage For="@(() => @Order.CustomerID)" />

                        </div>

                        <div class="form-group col-md-6">

                            <label>Order Date</label>

                            <SfDatePicker ID="OrderDate" FloatLabelType="FloatLabelType.Always" @bind-Value="@(Order.OrderDate)"></SfDatePicker>

 

                        </div>

                    </div>

                </div>

            }

        </Template>

    </GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="120"></GridColumn>

        --------------------

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<Order> Grid;

 

    public class Order

    {

        [Required]

        public int? OrderID { get; set; }

        [Required]

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

Regards,
Prathap S

Attachment: Datagrid_b7cc02f.zip

[Prathap Senthil]

Query: “Details of 1003 .. is there a way to alter or add to the header information...”


Based on your requirement, We have reviewed the available documentation and found that there is a way to alter or add to the header information in the dialog template. Please refer to the following link for more details: https://blazor.syncfusion.com/documentation/datagrid/dialog-editing#customize-the-edit-dialog

I hope this information is helpful to you. If you have any further questions or concerns, please do not hesitate to let us know.