Prevent RadzenBody from scrolling to top on navigation that only changes query string

groogiam · May 6, 2022, 9:38pm

It appears the RadzenBody has some hard coded logic to scroll to the top of the page on a navigation.

radzenhq/radzen-blazor/blob/236e2f6d489f832b99a5d1cf565e654627a8867c/Radzen.Blazor/RadzenBody.razor.cs#L114

      
        
            {
                NavigationManager.LocationChanged += OnLocationChanged;
            
            
    return base.OnInitializedAsync();
            }
            
            
private void OnLocationChanged(object sender, LocationChangedEventArgs e)
            {
                if (IsJSRuntimeAvailable && Layout != null)
                {
                    JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{GetId()}').scrollTop = 0");
                }
            }
            
            
/// <inheritdoc />
            public override void Dispose()
            {
                NavigationManager.LocationChanged -= OnLocationChanged;
            
            
    base.Dispose();
            }

This is not always the correct behavior, especially in cases where the navigation does not actually change the location. E.g. Updating the query string. Is there any way to prevent this or could a mechanism potentially be added to the component code in a future release. This creates some pretty major UX issues in the cases where the navigation does not result in the component actually being reloaded.

There is a similar issue with the core Framework that Microsoft is addressing in .NET 7.

github.com/dotnet/aspnetcore

NavigationOption: ScrollAfterNavigation:false => Prevents scroll after navigation

opened 06:24PM - 16 Sep 21 UTC

Bartmax

enhancement area-blazor api-suggestion jcn-p2

When links have href to another page like for UX experience so user can copy url… and share etc. Let's say url: /faq/1 it loads a faq page with collapsible items and dynamic question/content related info. If you click on a link to /faq/2 it may be desired to prevent scrolling to the top. ```razor NavigationManager.NavigateTo(@($"/faq/{id}"),new NavigationOptions () { ScrollAfterNavigation:false }); ``` Pretty sure the functionability it's almost all already implemented on this [PR](https://github.com/dotnet/aspnetcore/pull/12423). There's a comment on that PR that also asks for the same thing.

github.com/dotnet/aspnetcore

Blazor NavigationManager.NavigateTo always scrolls page to the top.

opened 04:50AM - 14 Feb 22 UTC

groogiam

enhancement area-blazor feature-blazor-routing

### Is there an existing issue for this? - [X] I have searched the existing iss…ues ### Describe the bug It appears the navigation manger in .NET 6 always scrolls the page to the top even if NavigateTo call is just updating the query string. ### Expected Behavior Navigations that do not change the page should not reset the viewport position. ### Steps To Reproduce Will post a repro shortly. ### Exceptions (if any) _No response_ ### .NET Version 6.0.102 ### Anything else? _No response_

Implementing a similar mechanism here seems like a good idea in order to keep the Radzen Blazor controls aligned with the framework functionality.

Thanks for your help.

korchev · May 8, 2022, 8:16am

Not currently. This code is required otherwise the scroll position will always stay the same after navigation. Once the ScrollAfterNavigation option ships we will handle it appropriately in RadzenBody. We can also add a ScrollAfterNavigation property to RadzenBody itself. However it would unconditionally disable the scroll reset implementation even when it is needed.

As a workaround you can replace RadzenBody with <div class="rz-body">.

groogiam · May 10, 2022, 8:14pm

Thanks for the info. Is there a github issue where I can keep tabs of progress on the ScrollAfterNavigation functionality?

korchev · May 11, 2022, 6:28am

No, we don't have a github issue for this.