Duplicated
Last Updated: 02 Mar 2020 13:27 by ADMIN
Tom
Created on: 18 Aug 2019 22:05
Category: TreeView
Type: Bug Report
0
Treeview with a template returns error: "Microsoft.JSInterop.JSException: 'Cannot read property 'scrollHeight' of null" when randomly clicking around the tree.

Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.

 

=====================================

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button

<style>
    .k-mid:hover .showme {
        display: block;
    }

    .showme {
        display: none;
        margin-left: 10px;
    }

    .showhim:hover .showme {
        display: block;
    }
</style>


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
                <div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
                    <TelerikIcon IconName="@IconName.Plus" />
                </div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void NodeClicked(string node)
    {
        helloString = new MarkupString(node);
    }


    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}

======================================

Microsoft.JSInterop.JSException

  HResult=0x80131500
  Message=Cannot read property 'scrollHeight' of null
TypeError: Cannot read property 'scrollHeight' of null
    at Object.r (https://localhost:44326/_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js:1:1433)
    at https://localhost:44326/_framework/blazor.server.js:8:28347
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:28316)
    at https://localhost:44326/_framework/blazor.server.js:1:19148
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19119)
    at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38027)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.JSInterop.JSRuntimeBase.<InvokeWithDefaultCancellation>d__13`1.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<GetContentHeight>d__57.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<SetMaxHeight>d__56.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_1(Object state)
   at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)
   at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback, TState& state)
   at System.Threading.QueueUserWorkItemCallback.Execute()
   at System.Threading.ThreadPoolWorkQueue.Dispatch()
Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
4 comments
ADMIN
Marin Bratanov
Posted on: 19 Aug 2019 15:16
Hi Tom,

Thanks for noticing the app is down. There has been some hiccup but it is alive again :)

On the treeview - I do believe this to be related and I am adding this as a test case for the bug internally, thank you for sharing this. Even if investigation shows its root cause is different, I expect it to get fixed with the same item. So, I'm going to count it as duplicate of the previous item for simplicity, even though this reveals new information.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
Tom
Posted on: 19 Aug 2019 13:13

Also your main demo site is down  - https://demos.telerik.com/blazor-dashboard-app/

 

HTTP Error 500.30 - ANCM In-Process Start Failure

Common solutions to this issue:

  • The application failed to start
  • The application started but then stopped
  • The application started but threw an exception during startup

Troubleshooting steps:

  • Check the system event log for error messages
  • Enable logging the application process' stdout messages
  • Attach a debugger to the application process and inspect

For more information visit: https://go.microsoft.com/fwlink/?LinkID=2028265

Tom
Posted on: 19 Aug 2019 12:30

Hi Marin, hopefully this really is a duplicate but because there is no data source change, I'll try to provide more information. Attached is a short video.

Since it still happens without the button, I removed it.

The code is from your demo with the template modified to look like this:

            <ItemTemplate>
                <div @onclick="SayHelloHandler" style="cursor: pointer">@((context as TreeItem).Text)</div>
            </ItemTemplate>

(I also removed the Page field from TreeItem).


===============

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="SayHelloHandler" style="cursor: pointer">@((context as TreeItem).Text)</div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}
ADMIN
Marin Bratanov
Posted on: 19 Aug 2019 04:33
Hello Tom,

We have this in our sights, and you can Follow the original report here (I have added your vote): https://feedback.telerik.com/blazor/1425024-changing-the-data-source-with-different-expand-states-results-in-microsoft-jsinterop-jsexception-cannot-read-property-scrollheight-of-null.

I am now closing this one as a duplicate.

That said, I was not able to reproduce a problem with the provided setup and my best guess is that the original case you have alter the data source of the treeview (e.g., on click of the plus icon) in a fashion similar to the report linked above. If this is not the case, could you send me a short video that shows how to reproduce the problem without a data source change?


Regards,
Marin Bratanov
Progress Telerik UI for Blazor