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

[Shek Mohammed Asiq Abdul Jabbar]

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,

Shek