views:

632

answers:

3

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?

A: 

Handle Sys.WebForms.PageRequestManager.endRequest event and scroll the textbox down: var tbox = $get('<%= TextBox1.ClientID %>'). tbox.scrollTop = tbox.scrollHeight;

Tadas
.scrollDown() seems to be not defined! I'm getting a javascript exception
ala
Sorry - scrollDown was my function. My answer updated.
Tadas
A: 

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"&gt;
<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...

Jakob Gade
this might be good for textarea HTML control, but how to add a javascript function to asp:TextBox server control?
ala
Updated the sample...
Jakob Gade
A: 

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.

ZokiManas