Bunch's Blog

One day I'll have a catchy subtitle, one day
posts - 77, comments - 89, trackbacks - 0

My Links

News

Tag Cloud

Archives

Green

Tabbing Issue with AutoPostBack

Here was a little issue that caused some frustration. I have an app with an UpdatePanel and inside that are two Textboxes each with their own RequiredFieldValidator. Both Textboxes had AutoPostBack set to True. Also each used an OnTextChanged event to trigger some checks from the code behind.

The issue was after entering a valid value in Textbox1 you could not tab directly to Textbox2. When you hit the tab key the cursor would blink once in Textbox2 and then disappear. If you kept hitting tab the focus would go to items above either textbox and eventually you could tab down to Textbox2. This wasn’t what the users were looking for and it threw them off when entering data.
The fix ended up being to add in Me.ScriptManager1.SetFocus(Textbox1.ClientID)in the Sub that was called by the OnTextChanged. This allowed the focus to properly tab down to Textbox2.


Aspx Code
<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>
<h1>Add Data</h1>

<asp:UpdatePanel ID="upData" runat="server" RenderMode="Inline" >

     <ContentTemplate>
          <table border="0" cellspacing="0" cellpadding="5" >
          <tr>
               <td style="width: 100px" class="requiredInput">Data Item 1</td>
               <td>
               <asp:TextBox ID="Textbox1" runat="server" AutoPostBack="true" OnTextChanged="Check_Textbox1" />
               <asp:RequiredFieldValidator
                        ID="rfvDataItem1"

                        ControlToValidate="Textbox1"

                        runat="server"
                        ErrorMessage="Enter valid data."
                        ValidationGroup="vgData"
                        />
                </td>
            </tr>
            <tr>
                <td style="width: 100px" class="requiredInput">
                    Data Item 2</td>
                <td>
                    <asp:TextBox AutoPostBack="true" ID="Textbox2" runat="server"OnTextChanged="Check_Textbox2" />
                    <asp:RequiredFieldValidator
                        runat="server"
                        ID="rfvDataItem2"

                        ErrorMessage="Enter valid data."

                        ControlToValidate=”Textbox2"
                        ValidationGroup="vgData"
                        />
                </td>
            </tr>
</table>
    </ContentTemplate>
</asp:UpdatePanel>
 
 
VB.Net
Sub Check_Textbox1(ByVal sender As Object, ByVal e As System.EventArgs)

      'Code to run check

       
'Sets focus to Textbox2 rather than the cursor disappearing
Me.ScriptManager1.SetFocus(Textbox2.ClientID)
    
End Sub
C#

protected void Check_Textbox1(object sender, EventArgs e)
{
   this.ScriptManager1.SetFocus(Textbox2.ClientID)
}

Technorati Tags: ,,
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted on Thursday, September 18, 2008 3:17 PM |

Feedback

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: