Grid crashes on table validation.

[Christopher]

Hi there.  I've been tearing my hair out trying to figure out what's going on with my dataGrid.  The following grid crashes if the user attemps to add an entry, and then uses the 'down' arrow to force the validation to fail.  Here's what I've tested:

1) User immediately clicks down button, resulting in non-valid entry: table crashes.

2) User types a non-valid amount, for example, "-4".  The validation works as expected, even if the down button is pressed resulting in another non valid entry.  If the user presses the 'up' button until the field is valid again, and THEN down to result in a non-valid entry, the table will crash.

Here is my table, along with the object + validation that I'm using:

@page "/validationtest"
@using System.ComponentModel.DataAnnotations;
@using System.ComponentModel.DataAnnotations.Schema;
@using Microsoft.EntityFrameworkCore;


<h3>SfTableTest</h3>


<SfGrid @ref="Grid" ShowTooltip="true" DataSource="@TableItems" Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" })" AllowPaging="true">
    <GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridEvents TValue="TestObject"></GridEvents>
    <GridTemplates><EmptyRecordTemplate><span>There are no Test Objects currently stored.</span></EmptyRecordTemplate></GridTemplates>
    <GridColumns>
        <GridColumn Field="@nameof(TestObject.Id)" HeaderText="Id" IsPrimaryKey="true" Visible="false"></GridColumn>
        <GridColumn Field="@nameof(TestObject.Amount)" HeaderText="Amount" Format="C2"> </GridColumn>
    </GridColumns>
</SfGrid>


@code {
    SfGrid<TestObject> Grid = default!;
    List<TestObject> TableItems { get; set; } = [];


    public class TestObject
    {
        public Guid Id { get; set; } = Guid.Empty;
        /// <summary>
        /// The dollar amount of the flat rate to be charged per billing period.
        /// </summary>
        [Range(0.01, Double.MaxValue, ErrorMessage = "Please enter a number greater than zero.")]
        [Precision(18, 2)]
        public decimal Amount { get; set; }
    }
}

And here is the console error that results:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'cNq5I0NxH-_33VClH3AtZ53iEzmbABoYWVq5b6E_Lfk'.
      System.InvalidOperationException: Unhandled exception occurred during interop call.
       ---> Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'style')
TypeError: Cannot read properties of undefined (reading 'style')
    at h (https://localhost:7106/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:26:548425)
    at e.createTooltip (https://localhost:7106/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:26:551377)
    at Object.validation (https://localhost:7106/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:26:760175)
    at b.processJSCall (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:4452)
    at b.beginInvokeJSFromDotNet (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:4129)
    at Cn._invokeClientMethod (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:68829)
    at Cn._processIncomingData (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:66188)
    at Cn.connection.onreceive (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:59829)
    at i.onmessage (https://localhost:7106/_framework/blazor.web.wmp8iwak4q.js:1:83922)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)
         --- End of inner exception stack trace ---
         at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)
         at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams)
         at Syncfusion.Blazor.Grids.Internal.Edit`1.InvokeValidation(List`1 results)
         at Syncfusion.Blazor.Grids.Internal.Edit`1.ApplyFormValidation(ValidationResult result)
         at Syncfusion.Blazor.Grids.Internal.NormalEdit`1.<BuildRenderTree>b__0_3(ValidationResult args)
         at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__124_0(Object state)
         at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.PostAsync[TState](Task antecedent, Action`1 callback, TState state)
An unexpected error occurred: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

This is a Blazor Server project, using version 32.1.22 of Syncfusion.

Any thoughts would be appreciated.  Thanks!

Christopher

[Prathap Senthil]

Hi Christopher,
 

Based on reported problem we have confirmed that this is a breaking issue and logged an issue  “Grid throws exception when decrementing numeric field to trigger DataAnnotations validation failure” for the same. Thank you for taking the time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our patch release which is expected to be rolled out on January 20th , 2026.

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.     

Grid throws exception when decrementing numeric field to trigger DataAnnotations validation failure 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.

Regards,
Prathap Senthil

[Sanjay Kumar Suresh]

Hi Christopher ,

Thanks for your patience.

We are glad to announce that; we have included the fix for the “Grid throws exception when decrementing numeric field to trigger DataAnnotations validation failure” in our “32.1.24”
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

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/32.1.24?type=all

Root Cause:

The exception occurs because the code attempts to access the style property of a div element that is null or undefined. In earlier versions, this exception was suppressed ,preventing the crash.

Corrective Actions Taken:

Introduce a null check before accessing the style property to ensure the element exists. If the div element is null or undefined, exit early without performing style operations.

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

Snip:

Regards,

Sanjay Kumar Suresh