Scroll to end of page after loading gridview

Question

I have the following code at the end of my aspx page. When I click on the button below, the usercontrol loads a grid. The problem is that when that grid is loaded it's out of the viewed range, and the user has to scroll to the botton to view the displayed grid.

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div style="border: thin; border-style: double">
            <asp:Panel ID="PnlRequired" runat="server" DefaultButton="BntOpenGridView_Click">
                <table style="width: 100%">                 
                <tr width="100%">
                    <td>                            
                        <asp:ImageButton ID="BtnOpenGridView" Visible="false" OnClick="BntOpenGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
                    </td>
                </tr>    
                <tr>
                    <td>    
                        <UserControl:RequiredGridView runat="server" ID="RqGrdView"></UserControl:KeywordsGridView>
                    </td>    
                </tr>
                <tr>
                    <asp:Label ID="lblErrorMessage2" runat="server" ForeColor="Red"></asp:Label>                       
                </tr>
            </table>
            </asp:Panel>              
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

What I'm trying to do is to use javascript some way to scroll to the bottom of the page after displaying the grid. Here's what i've tried:

<script type="text/javascript">
function ScrollToGrid()   
    {
         document.getElementById('RqGrdView').scrollIntoView(true);
    }
</script>

In the Button Click event after triggering the usercontrol to load the gridview I added the following code:

ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToKeywordsGridView()", true);

This didn't work

I also tried to add the same code to Page PreRender as follows:

protected void BntOpenGridView_Click(object sender, ImageClickEventArgs e)
{
      isRequiredGridViewClicked = true;
      // code to load gridview in usercontrol                
}

protected override void OnPreRender(EventArgs e)
{
      base.OnPreRender(e);
      if (isRequiredGridViewClicked)
      {
           ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToGridView()", true);
           isRequiredGridViewClicked = false;
      }
}

This also didn't work, the javascript fires OK, but the gridview is not not displayed in full and the user has to scroll manually.

I would *strongly* recommend against doing any JavaScript development using the ASP.NET libraries like ScriptManager etc. — timothyclifford, Dec 03 '15 at 13:28
You may use a js function call on the element's onload a question with its answer is available at http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element — Zeshan Khan, Dec 03 '15 at 13:33
@timothyclifford, can you tell me the reason why or a reference article? — user3340627, Dec 03 '15 at 13:54
It's only my opinion but... Currently you are mixing JavaScript in your server and client code. This code belongs in one place - the client. UpdatePanel, ScriptManager and WebForms in general are outdated and you should be using ASP.NET MVC where possible. I don't know the full details so there may be a reason why you can't. — timothyclifford, Dec 03 '15 at 15:36
@timothyclifford, I appreciate your help and I will take this into consideration in the future. Thanks — user3340627, Dec 03 '15 at 15:37

score 0 · Accepted Answer · edited May 23 '17 at 12:15

I found the solution. This post helped a lot.

I added a hidden field to my aspx page, this hidden field would be set to True using javascript when the button is clicked. And each time the page is loaded the value of the hidden field is checked, and if it's true, the document would scroll to focus on the gridview control.

This is my script:

function SetHiddenField(){
            document.getElementById('MainContent_HiddenShowGrid').value = "True";
        }

  var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function() {
          if(document.getElementById('HiddenShowGrid').value == "True")
            {
                document.getElementById('MainContent_PnlKeyword').scrollIntoView(true);
                document.getElementById('HiddenShowGrid').value = "False";
            }
        });

And this is the code for the hidden field:

<tr width="100%">
    <td>
        <asp:Label ID="lblRequiredSrch" runat="server" Visible="false">Search for Required</asp:Label>

        <asp:TextBox ID="txtRequiredSrch" runat="Server" Visible="false" Width="60%" />
        <asp:ImageButton ID="btnRequiredSrchGridView" Visible="false" OnClientClick="SetHiddenField();" OnClick="btnRequiredSrchGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
    </td>
</tr>

<tr>
    <td>

        <UserControl:RequiredsGridView runat="server" ID="RequiredsGridView2"></Requireds:RequiredsGridView>
        <asp:HiddenField runat="server" ID="HiddenShowGrid" Value ="False" />
    </td>

</tr>

score 0 · Answer 2 · answered Mar 31 '18 at 06:25

Step 1 : I have this problem too. My solution is i try get value of scrollbar and keep that value to sessionStorage: my asp file:

<div overflow: auto; width:1000px; height:400px;" onscroll="myFunction()" id="myscroll" runat="server" name="myscroll">

function Javascript

function myFunction() {
        var elmnt = document.getElementById("myscroll");
        sessionStorage.setItem('focus', elmnt.scrollTop);
    }

step 2 : wait for gridview loaded: (it mean insert this code after code you get gridview) and call new function to set scrollbar gridview.For my code i have to call Javafucntion from c# :

string script = "window.onload = function() { gridview_finish(); };";
        ClientScript.RegisterStartupScript(this.GetType(), "gridview_finish", script, true);

step 3 : set position gridview by value sessionStorage :

function gridview_finish() {
        var elmnt = document.getElementById("myscroll");
        elmnt.scrollTop=sessionStorage.getItem('focus');
    }

Scroll to end of page after loading gridview

2 Answers2