Click here to Skip to main content
13,357,402 members (67,195 online)
Click here to Skip to main content
Add your own
alternative version


19 bookmarked
Posted 18 Sep 2006

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


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
End Sub


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.


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
End Sub

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

<asp:Content ID="Content1" 


    <cc1:ScriptManager ID="ScriptManager1" 

            runat="server" EnablePartialRendering="True">
    <cc1:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:TextBox ID="TextBox1" runat="server" 

               AutoPostBack="True" Width="56px" 

            <asp:TextBox ID="TextBox2" runat="server" 

              AutoPostBack="True" Width="48px" 

            <asp:TextBox ID="TextBox3" runat="server" 

              BackColor="#FFE0C0" Width="72px"></asp:TextBox>


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:


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


About the Author

Amir Aryani
Australia Australia
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 2 Pin
Byttencourt9-Jun-09 7:58
memberByttencourt9-Jun-09 7:58 
GeneralControl Focus is not working in UpdatePanel after postback. Is there any solution Pin
Syed Kamran ul Haq9-Jun-08 21:44
memberSyed Kamran ul Haq9-Jun-08 21:44 
GeneralProblem Pin
venkat4u_in7-May-08 22:12
membervenkat4u_in7-May-08 22:12 
GeneralEasier with... Pin
hartertobak25-Jun-07 6:16
memberhartertobak25-Jun-07 6:16 
GeneralRe: Easier with... Pin
Duane Lakoduk6-Nov-07 11:33
memberDuane Lakoduk6-Nov-07 11:33 
GeneralRe: Easier with... Pin
pawan pratik15-Jan-09 5:09
memberpawan pratik15-Jan-09 5:09 
GeneralRe: Easier with... Pin
nainakarri13-Oct-09 20:47
membernainakarri13-Oct-09 20:47 
GeneralThanks Pin
Jason Gray1-Nov-06 10:13
memberJason Gray1-Nov-06 10:13 
GeneralProblem! Pin
bgguitarman18-Oct-06 10:14
memberbgguitarman18-Oct-06 10:14 
GeneralRe: Problem! Pin
bgguitarman18-Oct-06 10:37
memberbgguitarman18-Oct-06 10:37 
GeneralRe: Problem! Pin
Tanumnrec23-Mar-07 5:09
memberTanumnrec23-Mar-07 5:09 
Its not working for me on button click... can you tell me what problem u were facing?

thanks tanu
Generalworks for me Pin
lwhkumc9-Oct-06 11:51
memberlwhkumc9-Oct-06 11:51 
Generalawesome! Pin
Jon Kruger27-Sep-06 6:00
memberJon Kruger27-Sep-06 6: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 19 Sep 2006
Article Copyright 2006 by Amir Aryani
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid