RadzenLayout Calling NavigateTo Throws Error

Radzen.Blazor Components
1

I have created a simple application to test why navigating away from a page using the RadzenLayout is throwing the error: TypeError: Cannot set properties of null (setting 'scrollTop').

I have created a new Blazor WebAssembly project in Visual Studio, added Radzen per the Getting Started Steps and then created a new layout component called MaterialDashboardLayout, here is the code:

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager

<RadzenLayout>
    <RadzenHeader class="material-layout-header">
        Header text
    </RadzenHeader>
    <RadzenSidebar>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Sign Out" Icon="@("<i class=\"fa fa-solid fa-right-from-bracket\"></i>")" Click="SignOut" />
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        @Body
    </RadzenBody>
    <RadzenFooter class="material-layout-footer">
        Footer Text
    </RadzenFooter>
</RadzenLayout>

@code {
    protected override async Task OnInitializedAsync()
    {

    }

    public async void SignOut()
    {
        NavigationManager.NavigateTo("/");
    }
}

Here is the page that implements the RadzenLayout:

@page "/dashboard"
@layout MaterialDashboardLayout

<h3>Dashboard</h3>

@code {

}

When I manually navigate to /dashboard the new page loads and the RadzenLayout loads, but when I click on the SignOut option in the RadzenPanelMenuItem it calls NavigationManager.NavigateTo("/") to go back to the root page and then throws an error in the debugger and kicks out the following error:

TypeError: Cannot set properties of null (setting 'scrollTop')
Stack trace:
 >  at eval (eval at <anonymous> (https://localhost:7075/_framework/blazor.webassembly.js:1:2878), <anonymous>:1:49)
 >    at eval (<anonymous>)
 >    at https://localhost:7075/_framework/blazor.webassembly.js:1:2878
 >    at new Promise (<anonymous>)
 >    at b.beginInvokeJSFromDotNet (https://localhost:7075/_framework/blazor.webassembly.js:1:2835)
 >    at Object.vn [as invokeJSJson] (https://localhost:7075/_framework/blazor.webassembly.js:1:58849)
 >    at https://localhost:7075/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
 >    at Ll (https://localhost:7075/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)
 >    at wasm://wasm/00b21c96:wasm-function[349]:0x1f99d
 >    at wasm://wasm/00b21c96:wasm-function[245]:0x1be41

Is there something specific or more that needs to be set or configured to use the RadzenLayout as a top level layout for a page/component? I used the example provided on the component page and it loads components just fine when the components all use the RadzenLayout, but once I attempt to navigate away then I get that error. I have spent a solid 6+ hours debugging and commenting out code to try and figure out why it fails. One thing to note is that if I step through the error and then navigate back to the original page and then click SignOut it doesn't throw the error on the second time.

After a bit more research and debugging it would appear that if you try to navigate away from a component/page that implements the RadzenLayout and go to another page/component that uses the standard layout that comes with the Blazor WebAssembly project in Visual Studio then you receive the error above. Navigating between pages that all implement the RadzenLayout component does not trigger the error.

1 Like
2

RadzenLayot doesn’t use any javascript: radzen-blazor/Radzen.Blazor/RadzenLayout.cs at master · radzenhq/radzen-blazor · GitHub

3

Which is where my concern comes in with this issue. In my sample project to test whether it was my code or an issue caused by the RadzenLayout I created a new Blazor WebAssembly project, added a new page and the RadzenLayout, Navigated to the new page with the RadzenLayout and then clicked the RadzenMenuPanelItem, which is tied to a function that just calls NavigationManager.NavigateTo("/") and that error is thrown. There is no additional JS beyond what is already present in the default project or beyond including Radzen. It is 100% reproducible with RadzenLayout to default project layout and now I tried from component to component both using RadzenLayouts and it is throwing the same error. I am using the latest Radzen library 5.1.3. I can zip and upload my sample project if that would help.

1 Like
4

This isn't a known issue is all that I can say. RadzenBody is the only thing that sets scrollTop.

5

I've been having the same issue for several weeks. All fine until either a Radzen update and/or a Visual Studio update.

Did you find a solution or cause?

image
image1269×204 16.4 KB

6

The only thing I'm 100% sure on is it's RadzenLayout and RadzenBody related. Remove one or both and problem goes away.

This is almost certainly the issue, exception handling on this or figuring it out why it's null.

image
image857×198 6.11 KB

7

I did in fact find a solution and the cause. In the RadzenBody.razor.cs file there is a function:

private void OnLocationChanged(object sender, LocationChangedEventArgs e)
        {
            if (IsJSRuntimeAvailable && Layout != null)
            {
                JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{GetId()}').scrollTop = 0");
            }
        }

The call to GetId() is returning a null value. When attempting to debug the issue it would appear that the GetId() function attempts to return the generated unique ID for the body element, which in recent cases is returning null as it does not find the ID.

I attempted to call the GetId() function and then wrap the logic in an IF statement to check if the value returned is not null, but I could not get it to work. Ultimately I just ripped out the entire function and have had no degradation in my website functionality or behavior and the error has disappeared. The only downside now is that when the Radzen library is updated I have to pull down the latest code manually, remove that function again and then compile it. Not a massive amount of overhead, but unnecessary if the folks at Radzen would add a working NULL check on that function. Hope this helps.

1 Like
8

I am also facing the same issue when navigate to standard layout from radzon layout. when i sign out the same error appears on the screen .
Any proper solution of that ?

9

If you look at my previous post I note the function that is broken and what I attempted to do to fix it, but I didn't have any luck. My solution "Ultimately I just ripped out the entire function and have had no degradation in my website functionality or behavior and the error has disappeared. The only downside now is that when the Radzen library is updated I have to pull down the latest code manually, remove that function again and then compile it." The function that I listed in my previous post is the one that I removed from the Radzen library class and then compiled the library and manually linked it in my application.

10

@korchev I assume there is a valid reason for this code in OnLocationChanged but GetID does return null in these instances so it will always throw an unhandled exception.

11

GetID never returns null.

We need a reproduction of this problem in order to react accordingly.

12

What is the best way to upload the example project? I was able to reproduce the issue with a simple 2 page Blazor WebAssembly project using the Radzen Layout component and every time I tried to navigate between pages the GetID function would return null.

13

Github works - you can create a public repository and share the link.

14

I've managed to reproduce the problem and pushed a fix.

RadzenBody resets the scroll position after navigation. However sometimes you navigate to a page which doesn't have RadzenBody - then the error happens.

1 Like
15

Splendid, I appreciate you focusing on and resolving this so quickly. It makes it easier to pull from nuget than GitHub and then make the change and use the library.