Click here to Skip to main content
Click here to Skip to main content

Setting control focus inside an UpdatePanel

, 18 Sep 2006
Rate this:
Please Sign up or sign in to vote.
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:

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

License

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

Share

About the Author

Amir Aryani

Australia Australia
No Biography provided

Comments and Discussions

 
GeneralMy vote of 2 PinmemberByttencourt9-Jun-09 6:58 
GeneralControl Focus is not working in UpdatePanel after postback. Is there any solution PinmemberSyed Kamran ul Haq9-Jun-08 20:44 
GeneralProblem Pinmembervenkat4u_in7-May-08 21:12 
GeneralEasier with... Pinmemberhartertobak25-Jun-07 5:16 
GeneralRe: Easier with... PinmemberDuane Lakoduk6-Nov-07 10:33 
GeneralRe: Easier with... Pinmemberpawan pratik15-Jan-09 4:09 
GeneralRe: Easier with... Pinmembernainakarri13-Oct-09 19:47 
Too good
 
Naina

GeneralThanks PinmemberJason Gray1-Nov-06 9:13 
GeneralProblem! Pinmemberbgguitarman18-Oct-06 9:14 
GeneralRe: Problem! Pinmemberbgguitarman18-Oct-06 9:37 
GeneralRe: Problem! PinmemberTanumnrec23-Mar-07 4:09 
Generalworks for me Pinmemberlwhkumc9-Oct-06 10:51 
Generalawesome! PinmemberJon Kruger27-Sep-06 5:00 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 19 Sep 2006
Article Copyright 2006 by Amir Aryani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid