Validation Message not Shown in Grid Dialog

[Carl Ford]

Grid editmode is dialog.  When adding, if I click Save without entering any information on the form the form flashes and very quickly shows the validation error messages for each field and then the messages disappear.  The fields are left highlighted in red.

If I enter something in the field, remove it, and then leave the field the error is shown as expected. 

                <SfGrid @ref="UsersGrid" Id="UsersGrid" TValue="User" Toolbar="@toolbar">

                    <SfDataManager Url="@url"

                                   Adaptor="Adaptors.ODataV4Adaptor" CrudUrl="odata/users">

                    </SfDataManager>

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

                        <HeaderTemplate Context="htContext">

                            @{

                                var ht = (htContext as User);

                                if (ht.UserId == 0)

                                {

                                    ht.Clients = new List<Client>();

                                    ht.Clients.Add(client);

                                    <div>Add New User for @client.CompanyName</div>

                                }

                                else

                                {

                                    <div>Edit User for @client.CompanyName</div>

                                }

                            }

                        </HeaderTemplate>

                    </GridEditSettings>

                    <GridColumns>

                        <GridColumn Field="UserId" IsPrimaryKey="true" Visible="false"></GridColumn>

                        <GridColumn Field="FirstName" HeaderText="First Name" AllowFiltering="false" AllowSorting="true"></GridColumn>

                        <GridColumn Field="LastName" HeaderText="Last Name"></GridColumn>

                        <GridColumn Field="FullName" HeaderText="Full Name"></GridColumn>

                        <GridColumn Field="Email" HeaderText="Email"></GridColumn>

                        <GridColumn Field="PhoneNumber" HeaderText="Mobile Number" AllowFiltering="false">

                            <Template Context="cont">

                                @{

                                    var c = (cont as User);

                                    if (!string.IsNullOrEmpty(c.PhoneNumber))

                                    {

                                        <span>(@c.PhoneNumber.Substring(0, 3)) @c.PhoneNumber.Substring(3, 3)[email protected](6, 4)</span>

                                    }

                                }

                            </Template>

                            <EditTemplate Context="con">

                                <label>Mobile Number</label>

                                @{

                                    var c = (con as User);

                                    <SfMaskedTextBox @bind-value="@c.PhoneNumber" Mask="(###) ###-####"></SfMaskedTextBox>

                                }

                            </EditTemplate>

                        </GridColumn>

                    </GridColumns>

                </SfGrid>

Thanks for your help.

[Renjith Singh Rajendran]

Hi Carl, 

Greetings from Syncfusion support. 

We suggest you to ensure to set the ID property for the corresponding component in EditTemplate same as that of Field name to overcome the problem you are facing. Please refer and add the ID property to SfMaskedTextBox to overcome the problem. 

 

<GridColumn Field="PhoneNumber" HeaderText="Mobile Number" AllowFiltering="false"> 

    <Template Context="cont"> 

        ... 

    </Template> 

    <EditTemplate Context="con"> 

        <label>Mobile Number</label> 

        @{ 

            var c = (con as User); 

            <SfMaskedTextBox ID="PhoneNumber" @bind-value="@c.PhoneNumber" Mask="(###) ###-####"></SfMaskedTextBox> 

        } 

    </EditTemplate> 

</GridColumn> 

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Mason]

Hi Renjith, when using GridForeignColumn it will do the border highlighting validation but does not show the tooltip.

[Renjith Singh Rajendran]

Hi Mason,

We checked this by creating a sample from our side, but the validation messages shows fine for ForeignKey columns with EditTemplate from our side. We are attaching the sample prepared with latest version for your reference.

 

        <GridForeignColumn Field=@nameof(Order.EmployeeID) ForeignKeyField="Id" HeaderText="Employee Name" ForeignKeyValue="FirstName" ValidationRules="@(new ValidationRules{ Required=true})" ForeignDataSource="@Employees" Width="150">

            <EditTemplate>

                <SfAutoComplete ID="EmployeeID" TItem="EmployeeData" TValue="int?" @bind-Value="@((context as Order).EmployeeID)" DataSource="@Employees">

                    <AutoCompleteFieldSettings Value="Id" Text="FirstName"></AutoCompleteFieldSettings>

                </SfAutoComplete>

            </EditTemplate>

        </GridForeignColumn>

 

Kindly download and refer the attached sample and check this from your side. If you are still facing difficulties, then the following details would be helpful for us to proceed further.

1. Share a simple issue reproducing sample for us to validate further.
2. Or if possible reproduce the problem with the attached sample and share with us for further analysis.
3. Share the exact scenario you are facing the reported problem.
4. Share complete grid rendering codes along with model class codes.

The provided information will help us analyze the problem, and provide you a solution as early as possible.

Regards,

Renjith R

Attachment: ServerApp_2afa45fe.zip