Setting control focus inside an UpdatePanel

• Download source files - 411 KB

Introduction

The Atlas UpdatePanel control is one of the most useful features of the Atlas framework, which provides partial page rendering and lets the page post back data to the server and render a specific area of the page instead of refreshing the whole page.

According to Microsoft, the UpdatePanel provides the following benefits:

• It reduces the amount of page flicker that commonly occurs when data pages perform updates.
• It reduces the amount of data sent over the wire for page updates (because the entire page does not have to be re-rendered on every postback).
• It improves the user experience by making the user interface (UI) seem more immediate and responsive.

Besides its great functionality, it has a seemingly trivial downside as well. After postback and partial rendering, the page loses the focus status and it resets to the beginning of the page. This means, it is not possible for the page to maintain the control focus or set the focus to another control by using the Focus method in the UpdatePanel post back event.

The example of this issue is that the following code does not work appropriately:

'NOTE: Textbox1 is nested in an Updatepanel and its AutoPostBack property set to true.
Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        TextBox2.Text = TextBox1.Text
        TextBox2.Focus()
End Sub

Solution

To fix this issue, I found the best way is using the Focus method in JavaScript, and the following function works instead of the Focus method of a TextBox:

Public Sub MySetFocus (ByRef TBox As TextBox)
    Dim focusJS As String = _
       "setTimeout(""$('" & TBox.ClientID & "').focus(); "", 100);"
    ClientScript.RegisterStartupScript(Me.GetType, "focusJS", focusJS, True)
End Sub

Why ClientID?

May be you will ask why I used ClientID in the MySetFocus function. The reason to use this property of the control is that the control IDs will be unpredictable when using Master Pages. By using the Master Page in ASP.NET 2, the controls at run time will have different names from the design time. The new name will include the name of the ContentHolder and some other prefixes, which makes it very difficult or impossible to predict. Fortunately, the .NET Framework returns this rather unreadable ID as the value of the ClientID property of each control.

Example

The following code includes three TextBoxes in which the third TextBox always includes the content of TextBox1 plus the content of TextBox2. After typing in TextBox1 the cursor will go to TextBox2 and then to TextBox3. All the three TextBoxes are nested in an UpdatePanel with enabled partial rendering; also, the AutoPostBack property of TextBox1 and TextBox2 have been set to true.

<script runat="server">

Public Sub MySetFocus(ByRef TBox As TextBox)
    Dim focusJS As String = "setTimeout(""$('" & TBox.ClientID & "').focus(); "", 100);"
    ClientScript.RegisterStartupScript(Me.GetType, "focusJS", focusJS, True)
End Sub

Protected Sub TextBox1_TextChanged(ByVal sender As Object, _
              ByVal e As System.EventArgs)
    TextBox3.Text = TextBox1.Text & TextBox2.Text
    MySetFocus(TextBox2)
    TextBox3.Focus()
End Sub

Protected Sub TextBox2_TextChanged(ByVal sender As Object, _
              ByVal e As System.EventArgs)
    TextBox3.Text = TextBox1.Text & TextBox2.Text
    MySetFocus(TextBox3)
End Sub
</script>

<asp:Content ID="Content1" 
            ContentPlaceHolderID="ContentPlaceHolder1" 
            Runat="Server">
    <cc1:ScriptManager ID="ScriptManager1" 
            runat="server" EnablePartialRendering="True">
    </cc1:ScriptManager>
    <cc1:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" 
               AutoPostBack="True" Width="56px" 
               OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
            &
            <asp:TextBox ID="TextBox2" runat="server" 
              AutoPostBack="True" Width="48px" 
              OnTextChanged="TextBox2_TextChanged"></asp:TextBox>
            =
            <asp:TextBox ID="TextBox3" runat="server" 
              BackColor="#FFE0C0" Width="72px"></asp:TextBox>
        </ContentTemplate>
    </cc1:UpdatePanel>
</asp:Content>

References

This article is a solution which my friend Peter Vats and I found as a fix for the problem of losing focus in the Atlas UpdatePanel postback event, and I should mention the following ASP.NET forums as the main resource for this article:

• http://forums.asp.net/
• http://atlas.asp.net/docs/Walkthroughs/GetStarted/UpdatePanel.aspx