Bunch's Blog

  Home  |   Contact  |   Syndication    |   Login
  46 Posts | 0 Stories | 32 Comments | 0 Trackbacks

News

Tag Cloud


Archives

Green

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: ,,
posted on Thursday, September 18, 2008 3:17 PM