Click here to Skip to main content
15,867,939 members
Articles / Web Development / ASP.NET

Setting control focus inside an UpdatePanel

Rate me:
Please Sign up or sign in to vote.
1.50/5 (2 votes)
18 Sep 2006CPOL2 min read 81.5K   354   19   13
This article explains how to maintain or change the focus on the page after an UpdatePanel postback event.

Sample Image - AtlasSample.jpg

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:

VB
'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:

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

ASP.NET
<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:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: Problem! Pin
Tanumnrec23-Mar-07 4:09
Tanumnrec23-Mar-07 4:09 
Generalworks for me Pin
lwhkumc9-Oct-06 10:51
lwhkumc9-Oct-06 10:51 
Generalawesome! Pin
Jon Kruger27-Sep-06 5:00
Jon Kruger27-Sep-06 5:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.