Row edit validation message not working first time (first row add)

[Kishor]

I am using data grid and using inline edit with help of toolbar.
I have added validation rules, now when I do try to add first row, validation messages are not getting visible.


but second row it works,

[Kishor]

Versions used,

 

[Kishor]

can anyone help me with this issue

[Prathap Senthil]

Hi Kishor,

We are unable to reproduce the reported issue when attempting to reproduce the issue. we have attached a screenshot and a simple sample.

So, to further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• Could you please share the grid code snippets with the model class?
• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• Kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Sample: https://blazorplayground.syncfusion.com/embed/LjLyZRVUTIQRqkOa?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


Regards,
Prathap Senthil

[Kishor]

 <SfGrid @ref="AttendeeGrid" DataSource="@AttendeeManagementData" AllowSelection="true" AllowSorting="true" AllowPaging="true" Toolbar=@ToolbarItems>

     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

     <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

     <GridEvents OnDataBound="DataBoundHandler" TValue="AttendeeViewModel"

                 OnActionBegin="OnActionBeginAsync"

                 OnActionComplete="OnActionCompleteAsync"

                 OnToolbarClick="OnToolbarClickAsync"></GridEvents>

     <GridSelectionSettings Type="SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row" CheckboxOnly="true"></GridSelectionSettings>

     <GridTemplates>

         <EmptyRecordTemplate>

             <div class="row pt-21 pb-21 text-center">

                 <h1 class="display-6"> <i class="fa fa-file-text-o" aria-hidden="true"></i></h1>

                 <span>No attendees</span>

                 <span>Start a new list, or <a rel='nofollow' href="" @onclick="(e=>IsImportList = true)" @onclick:preventDefault>import an existing list</a></span>

             </div>

         </EmptyRecordTemplate>

     </GridTemplates>

     <GridColumns>

         <GridColumn Field="@nameof(AttendeeViewModel.Selected)" Type="ColumnType.CheckBox" Width="70">

             <EditTemplate Context="context">

                 <Syncfusion.Blazor.Buttons.SfCheckBox @bind-Checked="((AttendeeViewModel)context).Selected"></Syncfusion.Blazor.Buttons.SfCheckBox>

             </EditTemplate>

         </GridColumn>

         <GridColumn Width="0px" Field="@nameof(AttendeeViewModel.Id)" IsPrimaryKey="true" Visible=false></GridColumn>

         <GridColumn Width="0px" Field="@nameof(AttendeeViewModel.EnquiryId)" Visible=false></GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.Name) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Name" Width="90" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true, MinLength=3})"></GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.Email) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Email" Width="120" ValidationRules="@GetEmailValidationRules()"></GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.ContactNumber) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Phone number" Format="C2" Width="90" ValidationRules="@GetContactValidationRules()"></GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.AccommodationArrivalDate) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Arrival date" Format="d" Width="90"></GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.AccommodationDepartureDate) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Departure date" Format="d" Width="90"></GridColumn>

         <GridColumn Field="@nameof(AttendeeViewModel.TypeId)" HeaderText="Type" Width="80">

             <Template Context="context">

                 @{

                     var attendee = (AttendeeViewModel)context;

                     var typeName = AttendeeType.FirstOrDefault(t => t.Id == attendee.TypeId)?.Value ?? "";

                 }

                 @typeName

             </Template>

             <EditTemplate Context="context">

                 <SfDropDownList TValue="int" TItem="SystemParameterModel"

                                 @bind-Value="((AttendeeViewModel)context).TypeId"

                                 DataSource="@AttendeeType"

                                 Placeholder="Select Type"

                                 PopupHeight="100px">

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

                 </SfDropDownList>

             </EditTemplate>

         </GridColumn>

         <GridColumn Field="@nameof(AttendeeViewModel.VIP)" HeaderText="VIP" Width="70">

             <Template Context="context">

                 @{

                     var attendee = (AttendeeViewModel)context;

                 }

                 @(attendee.VIP ? "Yes" : "No")

             </Template>

             <EditTemplate Context="context">

                 <Syncfusion.Blazor.Buttons.SfCheckBox @bind-Checked="((AttendeeViewModel)context).VIP"></Syncfusion.Blazor.Buttons.SfCheckBox>

             </EditTemplate>

         </GridColumn>

         <GridColumn Field=@nameof(AttendeeViewModel.AccommodationRoomNameNumber) ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Room number" Width="90"></GridColumn>

     </GridColumns>

     @if (@ActiveBreakpoint == "xsmall")

     {

         <GridPageSettings PageSize="@PageSize" PageCount="3">

             <Template>

                 @{

                     <div>

                         <div class="float-start">

                             <div>

                                 <SfPager PageChanged="OnPageChanged" ShowPagerMessage="false" PageSize="@PageSize" NumericItemsCount="3" TotalItemsCount=ItemsCount CurrentPage="@currentPage">

                                 </SfPager>

                             </div>

                         </div>

                         <div class="paging-container">

                             <span class="paging-text">@PagingText</span>

                         </div>

                     </div>

                 }

             </Template>

         </GridPageSettings>

     }

     else

     {

         <GridPageSettings PageSize="@PageSize" PageCount="5">

             <Template>

                 @{

                     <div>

                         <div class="float-start">

                             <div>

                                 <SfPager PageChanged="OnPageChanged" ShowPagerMessage="false" PageSize="@PageSize" NumericItemsCount="5" TotalItemsCount=ItemsCount CurrentPage="@currentPage">

                                 </SfPager>

                             </div>

                         </div>

                         <div class="paging-container">

                             <span class="paging-text">@PagingText</span>

                         </div>

                     </div>

                 }

             </Template>

         </GridPageSettings>

     }

 </SfGrid>

[Kishor]

Just a observation, when we added

AllowPaging="true" it doesn not work

what we can do about this. please guide here

[Kishor]

Hi Prathap,

Hope you are doing well!

Can you please check again with your code by adding allow paging to true. you will get the issue regenerated.

I have tried by toggling paging visibility while adding and after add, but tooltip validation  message position is getting misplaced.

Can you please suggest any work around.

Thank you,
Kishor.

[Prathap Senthil]

Based on the code snippet you provided, we attempted to replicate the issue on our end but were unable to do so. Before we proceed with addressing the problem you've reported, we would appreciate some additional clarification. Could you please share the details requested below so that we can assist you further?

• To better understand and analyze the issue, we kindly ask if you could provide a simple and reproducible sample that includes duplicate data showcasing the problem. This will help us identify the issue more efficiently and work towards providing a resolution.
• Could you share your attempts to replicate the issue using the attached sample?

Sample: https://blazorplayground.syncfusion.com/embed/BtretHLpSWSpUufm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

The details you provide will greatly aid us in validating the query and delivering a solution as promptly as possible. Thank you for your understanding and cooperation.

Additionally, it seems that your grid code uses both the DataSource property and DataManager simultaneously.This is not the correct approach for data binding in the grid. We recommend using only one of these options to bind data

<SfGrid @ref="AttendeeGrid" DataSource="@AttendeeManagementData" AllowSelection="true" AllowSorting="true" AllowPaging="true" Toolbar="@ToolbarItems">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    @* <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

*@ 

[Kishor]

Hi Prathap,

Thank you for your efforts!

I have created separate component and tested with your recent code sample. below is the observation,

I am not using update tool on toolbar, we have requirement of using enter or tab key.
Error messages are visible when we click update button, but when I try by hitting enter/tab its not working because it required this line of code,

await AttendeeGrid.EndEditAsync();

So for now I've used EditTemplate and key press event to catch enter/tab key press. now its working.
(Tab keypress not working from last cell control)
[Edit : This solution causing issue of duplicate save, because of manually called endEditAsync()]

Let me know if you are able to produce this at your end and if you have any work around.

Thank you,
Kishor.

[Kishor]

Hi Team,

Based on my previous reply, are you able to reproduce the issue at your end.
Let me know for any details or updates.

Thank you,
Kishor

[Kishor]

Hi Prathap,

Can you please check on this issue, as I am stuck in middle.
waiting for your update.

Thank you,
Kishor

[Prathap Senthil]

Thanks for the patience.

We have confirmed that this an issue and logged a defect report titled  “Row edit validation message not displayed on first row addition with paging enabled” This fix will be included in our weekly patch release, which is expected to be rolled out on July 22nd , 2025. You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
 
https://www.syncfusion.com/feedback/68646/row-edit-validation-message-not-displayed-on-first-row-addition-with-paging

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. Thanks for your understanding.

[Kishor]

Thank you for addressing this issue and responding back. we will wait till the fix is available.

[Prathap Senthil]

Thanks for your patience,

We are glad to announce that, we have included the fix for the issue  “Row edit validation message not displayed on first row addition with paging enabled” in our 30.1.41 release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for the latest fixes and features below.

NuGet : https://www.nuget.org/packages/Syncfusion.Blazor.Grid


Root cause : When using keyboard navigation (Enter/Tab) in the Empty Grid when adding a new record, the validation message is not displayed due to the early return statement because of this tooltip is not rendered in DOM when needed so validation div is undefined.

Action Taken: Modified else if statement to prevent the return statement execution when empty grid is there when adding a record using keyboard navigations like enter and tab keys.

[Kishor]

Hello Prathap,

I have update sync fusion to latest version, and this issue is resolved now except one scenario,
- On Numpad Enter click its not working, although on main enter (13) or tab press first row validation messages are visible.

- e-input-focus class is not getting removed from the control even if the focus is out.

Can you please check at your and and let me know if anything missing from my side.

Thank you,
Kishor G.

[Prathap Senthil]

Thanks for the update .

We are unable to reproduce the reported issue when attempting to reproduce the issue. We have attached screenshot and sample for your reference. So, to further proceed with reporting the problem, we require some additional clarification from your end. Please share the following details with us to proceed.

• Could you please clear the browser cache and delete the bin and obj folders to recheck the issue?
• How do you reference scripts and themes in your project? If you are using the CDN version, please ensure that the NuGet package, script, and theme references are all of the same version.
• Could you please share us the video demonstrating of the issue replication steps?

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Sample: https://blazorplayground.syncfusion.com/embed/VNBoDPDcTgubDING?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Kishor]

Hi Prathap,

I can not share a video but a screenshots, as typing in this text area has limited size I have shared a file.

Thank you!

Attachment: SyncfusionTicket_3e109bd2.docx

[Prathap Senthil]

Thanks for the update ,

Issue: · Numpad enter button press does not show the error messages.


We have confirmed that this an issue and logged a defect report titled  “ Validation messages not displayed on first row addition with paging enabled –numpad enter key fails to trigger error display" This fix will be included in our weekly patch release, which is expected to be rolled out on September 2nd , 2025. You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
 
Validation messages not displayed on first row addition with paging enabled –numpad enter key fails to trigger in Blazor | Feedback Portal

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. Thanks for your understanding.

Issue: “On tab press, as the focus shifts through each control, the previous focus class (e-input-focus) is not being removed, resulting in a persistent blue border.”

We attempted to replicate the issue on our end, but it did not occur. For your reference, we have attached a gif file and sample. To help us investigate further, could you please provide some additional clarification? Specifically, please share the following details:

• It appears that the latest script may not have been referenced. How do you reference scripts and themes in your project? If you are using the CDN version, please ensure that the NuGet package, scripts, and theme references are all the same versions.
• To better understand and analyze the issue, we kindly ask that you provide a simple, reproducible sample—including duplicate data—that demonstrates the problem. This will help us identify the issue more efficiently and work toward providing a resolution.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

[Guhanathan Ramanathan]

Hi Kishor ,

 

Thanks for your patience.

 

We are glad to announce that, we have included the fix for the “ Validation messages not displayed on first row addition with paging enabled –numpad enter key fails to trigger error display” in our “30.2.7” release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.

 

NuGet: https://www.nuget.org/packages/Syncfusion.Blazor.Grid

 

Root Cause:

While giving num pad enter key the key code is different so that it's not working.

Corrective Actions Taken:

Handled for num pad key key code to show the validation message when there is no rows in grid.

 

Regards,

Guhanathan R