Error when editing Property in RowTemplate

[Alexander Kuhlmann]

Hello, 

if I put some inputs e.g. SfTextBox inside a rowtemplate auf the treegrid, to edit some property of the griditem, I get an error in the browser console everytime I push a key inside the input,  The parameter is updated correctly,

Here is my small example:

<SfTreeGrid DataSource="@GridItems" IdMapping="Id" ParentIdMapping="ParentID" TreeColumnIndex="0" AllowRowDragAndDrop="true" AllowSelection="true">

    <TreeGridColumns>

        <TreeGridColumn Field="@nameof(GridItem.ParentID)" HeaderText="ParentID" Width="20"></TreeGridColumn>

        <TreeGridColumn Field="@nameof(GridItem.Id)" HeaderText="ID" Width="20" IsPrimaryKey="true" Visible="true"></TreeGridColumn>

        <TreeGridColumn Field="@nameof(GridItem.Text)" HeaderText="ID" Width="20">

            <Template>

                <div @onkeydown:stopPropagation="true">

                    @{

                        var item = (context as GridItem);

                        if (item != null)

                        {

                            <SfTextBox @bind-bind-Value="item.Text"></SfTextBox>

                        }

                    }

                </div>

            </Template>

        </TreeGridColumn>

    </TreeGridColumns>

</SfTreeGrid>

<SfButton OnClick="Add">Add</SfButton>

    private void Add()

    {

        GridItem newItem = new();

        newItem.Id = GridItems.Count;

        GridItems.Add(newItem);

    }

    public class GridItem

    {

        public int Id { get; set; }

        public int? ParentID { get; set; }

        public string Text { get; set; } = "";

    }

And here is the error message:

blazor.web.js:1 Uncaught (in promise) Error: System.Text.Json.JsonException: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.

 ---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a boolean.

   at System.Text.Json.ThrowHelper.ThrowInvalidOperationException_ExpectedBoolean(JsonTokenType tokenType)

   at System.Text.Json.Utf8JsonReader.GetBoolean()

   at System.Text.Json.Serialization.JsonConverter`1.TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value, Boolean& isPopulatedValue)

   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)

   --- End of inner exception stack trace ---

   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, Utf8JsonReader& reader, Exception ex)

   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)

   at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1.Deserialize(Utf8JsonReader& reader, ReadStack& state)

   at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1.DeserializeAsObject(Utf8JsonReader& reader, ReadStack& state)

   at System.Text.Json.JsonSerializer.ReadAsObject(Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo)

   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments(JSRuntime jsRuntime, String methodIdentifier, String arguments, Type[] parameterTypes)

   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)

   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)

    at y.endInvokeDotNetFromJS (https://localhost:7078/_framework/blazor.web.js:1:3305)

    at gn._invokeClientMethod (https://localhost:7078/_framework/blazor.web.js:1:62730)

    at gn._processIncomingData (https://localhost:7078/_framework/blazor.web.js:1:60119)

    at connection.onreceive (https://localhost:7078/_framework/blazor.web.js:1:53760)

    at i.onmessage (https://localhost:7078/_framework/blazor.web.js:1:81866)

endInvokeDotNetFromJS @ blazor.web.js:1

_invokeClientMethod @ blazor.web.js:1

_processIncomingData @ blazor.web.js:1

connection.onreceive @ blazor.web.js:1

i.onmessage @ blazor.web.js:1

[Pon Selva Jeganathan]

Hi Alexander,

We have prepared a sample using the code example you provided and were unable to replicate the issue(Exception is not thrown.).

In your shared code example, you are binding the textbox value using the “@bind-bind-Value” property. We recommend binding the value using the correct property, which is “@bind-Value”.

Refer to the below help documentation,

https://blazor.syncfusion.com/documentation/textbox/data-binding#two-way-data-binding

Based on the stack trace you shared, the issue does not appear to be related to our Syncfusion components. Kindly review your sample in line with the stack trace for further insights.

Refer to the below sample,

https://blazorplayground.syncfusion.com/hZBfCZrfrrJNYgpO

If the issue persists in your scenario, we kindly request you to provide us with below details:

1. A video demo or screenshot showing the issue.
2. The package version you are currently using (e.g., 27.1.56 or another version).

This information will help us to better understand, find the exact cause of the issue and provide a more accurate solution.

Kindly get back to us for further assistance.

Regards,

Pon selva

[Alexander Kuhlmann]

Hi Pon, 

the “@bind-bind-Value” was a auto-completion mistake on my side, while building the example, but this did not effect the error.

After some tests I figured out, that only the Opara-Browser is throwing this error.

Chrome, Firefox and Edge are doing this without any error.

I'm using Version 27.1.55

Regards, 

Alex

[Pon Selva Jeganathan]

Hi Alexander,

We have ensured the previously shared code example and mentioned version with opera browser and were unable to replicate the issue(Exception is not thrown.).

Refer to the below video demo,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-657120367

If the issue persists in your scenario, we kindly request you to provide us with below details:

1. A video demo or screenshot showing the issue.
2. The version of Opera browser you are using.

This information will help us to better understand, find the exact cause of the issue and provide a more accurate solution.

Kindly get back to us for further assistance.

Regards,

Pon selva

[Alexander Kuhlmann]

Hi Pon, 

the Opera Version is: 

Opera One(Version: 114.0.5282.115)

Update-Stream:Stable

Betriebssystem:Windows 11 64-bit

Chromium-Version:128.0.6613.186

And find a video attached, showing the error

regards

Alex

Attachment: Input_Error_7059d36a.zip

[Pon Selva Jeganathan]

Hi Alexander,

We have created a new ticket under your account. Please follow that for further updates.