how to scroll asp.net textbox to bottom

I’m building a website with text box containing log messages. the log is getting updated using AJAX.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server"                                 
            onload="textbox_load"
            Height="110px" 
            TextMode="MultiLine"             
            Width="100%">
        </asp:TextBox>    
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

I need to scroll the text box down every time it gets updated. How?

Contents hide

Answers:

Method 1

Method 2

Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Handle the Sys.WebForms.PageRequestManager.endRequest event and scroll the textbox down:

var tbox = $get('<%= TextBox1.ClientID %>');
tbox.tbox.scrollTop = tbox.scrollHeight;

Method 2

Why dont you try this simple example:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

            Page.ClientScript.RegisterStartupScript(this.GetType(),
            "ScrollTextbox",
            "<script type="text/javascript">document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollTop = document.getElementById('" +
            this.TextBox1.ClientID +
            "').scrollHeight; " +
            " </script>");
        }
    }

Just change TextBox1 parameter with your text box name. You can see that the content in the text box is scrolled to bottom.

You can call this java script after AJAX is refreshing the content of your text box.

Method 3

Try some plain javascript. Here’s a sample I think you can modify to work in your scenario:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>

  <script type="text/javascript">
    function scrollDown() 
    {
      document.getElementById('<%=TextBox1.ClientID%>').scrollTop = document.getElementById('<%=TextBox1.ClientID%>').scrollHeight;
    };
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </form>
</body>
</html>

You just have to figure out how to call the scrollDown method…

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating