how to scroll asp.net textbox to bottom

Question

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?

Tim Schmelter · Accepted Answer · 2012-02-08 19:22:49Z

3

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

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

edited Feb 8, 2012 at 19:22

Tim Schmelter

462k79 gold badges719 silver badges980 bronze badges

answered Sep 7, 2009 at 8:20

Tadas Šukys

4,2404 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ala Over a year ago

.scrollDown() seems to be not defined! I'm getting a javascript exception

Fearghal Over a year ago

Im trying this but to now effect, where should the above script go exactly? I have it outside my html tags, inside beside my textbox and neither works, scroll bar remains at the top of the textbox after every refresh!

midoriha_senpai Over a year ago

Worked for me. For testing, I didn't create the variable, but I'm using this code to scroll the TextBox control in a Content Page from a Master Page. Here is my working, rough implementation:

var prm = Sys.WebForms.PageRequestManager.getInstance(); function EndRequestHandler() {if ($get('<%= (TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>') != null) {$get('<%= ((TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>').scrollTop = $get('<%= ((TextBox)StatusWindow.FindControl("StatusTxtBox")).ClientID %>').scrollHeight;}} prm.add_endRequest(EndRequestHandler);

ZokiManas · Accepted Answer · 2009-09-07 09:21:04Z

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.

Jakob Gade · Accepted Answer · 2009-09-07 09:10:34Z

0

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...

edited Sep 7, 2009 at 9:10

answered Sep 7, 2009 at 8:22

Jakob Gade

12.5k16 gold badges73 silver badges119 bronze badges

1 Comment

ala Over a year ago

this might be good for textarea HTML control, but how to add a javascript function to asp:TextBox server control?

Collectives™ on Stack Overflow

how to scroll asp.net textbox to bottom

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related