Reloading a razor page containing TelerikTreeList inside a EditForm fails with System.ObjectDisposedException: Cannot access a disposed object.

[Lucian]

Hello everyone,

I have a TelerikTreeList inside a EditForm. When the page is loaded the first time everything works as expected. When reloading the page the TreeList fails with System.ObjectDisposedException: Cannot access a disposed object.

Here is the whole error message:

 

System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.
   at Microsoft.JSInterop.DotNetObjectReference`1.ThrowIfDisposed()
   at Microsoft.JSInterop.JSRuntime.TrackObjectReference[TValue](DotNetObjectReference`1 dotNetObjectReference)
   at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1.Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.DictionaryOfTKeyTValueConverter`3.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.DictionaryDefaultConverter`3.OnTryWrite(Utf8JsonWriter writer, TCollection dictionary, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.ArrayConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[TValue](JsonConverter jsonConverter, Utf8JsonWriter writer, TValue& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[TValue](Utf8JsonWriter writer, TValue& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue value, JsonSerializerOptions options)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, CancellationToken cancellationToken, Object[] args)
   at Telerik.Blazor.Components.TreeList.TreeListHeaderRow`1.InitColumnReorderable()
   at Telerik.Blazor.Components.TreeList.TreeListHeaderRow`1.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
DEBUG Received hub invocation: InvocationMessage { InvocationId: "", Target: "OnRenderCompleted", Arguments: [ 3,  ], StreamIds: [  ] }.
ERROR Unhandled exception in circuit 'FJaH7LK7_TFBNO0Iti401Oi6ChhUWppLVwtrSUgHQ-A'.
System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.
   at Microsoft.JSInterop.DotNetObjectReference`1.ThrowIfDisposed()
   at Microsoft.JSInterop.JSRuntime.TrackObjectReference[TValue](DotNetObjectReference`1 dotNetObjectReference)
   at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1.Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.DictionaryOfTKeyTValueConverter`3.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.DictionaryDefaultConverter`3.OnTryWrite(Utf8JsonWriter writer, TCollection dictionary, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.ArrayConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[TValue](JsonConverter jsonConverter, Utf8JsonWriter writer, TValue& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[TValue](Utf8JsonWriter writer, TValue& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue value, JsonSerializerOptions options)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, CancellationToken cancellationToken, Object[] args)
   at Telerik.Blazor.Components.TreeList.TreeListHeaderRow`1.InitColumnReorderable()
   at Telerik.Blazor.Components.TreeList.TreeListHeaderRow`1.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
DEBUG Received hub invocation: InvocationMessage { InvocationId: "", Target: "OnRenderCompleted", Arguments: [ 4,  ], StreamIds: [  ] }.
DEBUG Received hub invocation: InvocationMessage { InvocationId: "", Target: "EndInvokeJSFromDotNet", Arguments: [ 34, True, [34,true,null] ], StreamIds: [  ] }.

here is the code that has the treelist:

 <EditForm Model="@Disease" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">

        <DataAnnotationsValidator />
        <ValidationSummary />

        <div>
            <TelerikTextBox Title="Disease name" Label="Disease name" PlaceHolder="Enter disease name" @bind-Value="@Disease.name"></TelerikTextBox>
        </div>

        <div>
            <TelerikDropDownList Data="@Locale" TextField="Value" ValueField="Id" @bind-Value="selectedLocaleValue">
            </TelerikDropDownList>
        </div>


        <TelerikTreeList Data="@DataFields"
                         ItemsField="DirectReports"
                         HasChildrenField="HasReports"
                         Pageable="false"
                         Sortable="false"
                         FilterMode="@TreeListFilterMode.FilterMenu"
                         Width="850px" Height="800px"
                         Resizable="true" Reorderable="true"
                         OnUpdate="@UpdateItem"
                         OnDelete="@DeleteItem"
                         OnCreate="@CreateItem"
                         OnEdit="@OnEditHandler"
                         OnCancel="@OnCancelHandler"
                         EditMode="@TreeListEditMode.Inline">

            <TreeListColumns>

                <TreeListColumn Field="Value" Width="400px" Expandable="true" Title="Value"></TreeListColumn>
                <TreeListCommandColumn Width="200px" Context="diseasesParams">
                    @{
                        var item = diseasesParams as ListHierarchical;
                        if (item.HasChildren)
                        {
                            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
                        }
                        if (item.IsEditable)
                        {
                            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
                        }
                        if (item.IsRemovable)
                        {
                            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
                        }
                    }

                    <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
                    <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
                </TreeListCommandColumn>
            </TreeListColumns>
        </TelerikTreeList>


        <div>
            @if (Disease.name != "")
            {
                <a class="btn btn-danger" @onclick="@DeleteDisease">
                    Delete
                </a>
            }
            <button type="submit" class="btn btn-primary edit-btn">Save disease</button>

            <a class="btn btn-outline-primary" @onclick="@NavigateToOverview">Back to overview</a>
        </div>


    </EditForm>

 

 

 

If I move the TreeList outside the EditForm everything works without a problem but I am reluctant to do so because it is a better code-structure to have all the components inside the EditForm.

 

Is there any way to avoid this exception?

 

with regards

Lucian

[Lucian]

After looking at the exception trace I noticed this:

 

Telerik.Blazor.Components.TreeList.TreeListHeaderRow`1.InitColumnReorderable()

 

I removed Reorderable="true" from the TelerikTreeList declaration and now it works for reloading.

I think this is a bug in the TreeList.

[Radko]

Hello Lucian,

I have tried to reproduce the issue you have described by creating a stripped-down version of your layout (please find attached). I have added an EditForm with a TreeList within it, with Reorderable set to true. Some dummy data has been added and no event handlers have been attached for the TreeList. However, I can not seem to be able to reproduce the issue as the page does not throw on refresh.

Could I kindly ask you to provide us with a runnable application where this is observed as we would like to investigate further? Please note this is a public thread and if there is anything you would like not to share you could send us a private message instead. Thank you.

On a side note, could you also please elaborate on what is the purpose of the nested TreeList within this EditForm? The TreeList itself already offers Editing functionalities without the need to wrap it with a Form. Is it supposed to serve as an extension to the form itself or there is something missing I fail to see based on the provided snippet? If you could please provide us with more information in regards to the exact use case we might be able to offer a better solution.

Regards, Radko Stanev Progress Telerik

[Lucian]

Hello Radko,

 

Sorry for the long wait but it took a bit of time to create a page to reproduce the issue. Please find attached the zip file.

Before compiling please open the page DiseaseEdit2.razor and navigate to line 179:

var response = await HttpClient.PostAsJsonAsync($"Put address here", new { name = "yuy", locale = "english" });

 

The address is in the comment to this post so you can replace "Put address here" with that value.

Of course, in the original project I use a class as data repository with injected HttpClient as you should. I just added the HttpClient in this class because this is how you can reproduce the value.

As you can see from the code the "response" is not used anywhere in the page. BUT if i remove this line of code everything works. Also if I remove Reorderable="true"  and keep the HttpClient call it works. Also if I set the TreeList outside the form and keep the HttpClient call it works.

I cannot understand why it should give such an exception only when Reorderable="true" just because there is call through HttpClient?

 

 

> On a side note, could you also please elaborate on what is the purpose of the nested TreeList within this EditForm?

I would like to use the TreeList together with the edit for Name and other fields and also so that the user can edit several fields in TreeList and THEN pressing submit to save all the changes.

 

 

With regards

Lucian Popescu

 

[Lucian]

I could not find the function to send a private message to Radko so you can use the value https://ilxv2t-codingassistant.inoviaai.se/api/v2/assistant/storage/get as the link

[Radko]

Hi Lucian,

Thank you for taking the time to update the application.

I have followed your instructions - updated the string placeholder with the provided URL, compiled the project, and navigated to /diseaseedit2. However, I am not receiving the above error when refreshing the page nor when I do anything else on the page. Am I missing something to reproduce this?

Having said this, I am still wondering if a TreeList is necessary for this scenario instead of the Form component styled to fit your needs.

I look forward to hearing back from you.

Regards,
Radko Stanev
Progress Telerik