locked
How to Scroll an Table After Rendering in Blazor Wasm RRS feed

  • Question

  • User-343630552 posted

    My app has tables whose scroll bar appearance is controlled by CSS overflow: auto.  I have been trying to find a way to scroll to a particular row just after a table is rendered, but without luck.  I’ve tried invoking a JavaScript function (that invokes scrollToTop on the target <tr>) from within both the OnAfterRender and OnAfterRenderAsync methods of the component that renders the table, as well as in its parent component.

    Any idea how to make this work?

    Thanks. Steve

    P.S.  Since posting this, I came across [this] post in SO that seems to be about the same problem.  It doesn't provide the answer.

    Friday, August 7, 2020 11:47 PM

Answers

All replies

  • User475983607 posted

    I think you need bookmark routing.  See the following blog.  

    https://chrissainty.com/fragment-routing-with-blazor/

    In the future share you code so we can see what you're doing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 8, 2020 12:33 PM
  • User-343630552 posted

    Sorry I didn't share my code initially.   I posted the question while away from my computer.

    I discovered my problem...I had the id of the <tr> that was supposed to scroll to the top on the wrong <tr>.   Embarrassing.  One of the challenges I have found with debugging Blazor markup is that I haven't found a way to see the html Blazor generates from the markup.  If you know how I can see that, I'd appreciate hearing how.  That would make things crystal clear right away.

    I failed to mention in my initial post that my app is single page.  Nevertheless, the code to implement the scrolling I need parallels what was suggested in the link you provided.  So, here's the code.

    Thanks for the help.  Steve

    // Blazor Code
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
            {
            await JSRuntime.InvokeAsync<Forecast>("Nav_ScrollIntoView", MEState.SelectedNavId);
            }
    
    // JavaScript
    
    function Nav_ScrollIntoView(navId: string)
    {
        var elem = document.getElementById(navId);
        if (elem === null) return;
        elem.scrollIntoView( { behavior: 'smooth' } );
    }

    Sunday, August 9, 2020 3:59 PM