Issue setting focus in dynamically loaded user control

Hello everyone,

I'm having a bit of an issue in my ASP.Net application moving focus from a textbox in one user control to a text box in the next user control on the page after postback. I’ve searched high and low over the last several days to find a solution but, for whatever reason, have been unable to do so. Any help that any of you can provide would be very much appreciated.

Here are the details of the application:

I have a page that has user controls loaded dynamically to allow a user to enter data.

The number and type of user controls loaded to the page is determined at run time based on a database query.

It is possible than many controls of the same type can be loaded.

Each user control has its own update panel.

Within the update panel of each control is a regular asp panel.

Inside of the regular panel there are at least 2 server controls (any other controls that may exist in the user control are not affected by this issue) – a text box and a button.

The defaultbutton property of the regular panel is set to the ID of the button within the user control.

The desired behavior is
To allow the user to enter data into the textbox on one user control
Press the Enter keyto save the data on the "current" user control
The application will set focus to the textbox of the next user control on the page after the data from the “current” user control has been saved.

Other considerations;
The application uses master pages.
We make extensive use of ajax and the ajaxtoolkit in the application.
I am using Visual Studio 2010 and .Net 4

The issue:

when first entering the page, one can enter data into the first textbox and press the enter key. Data from “current” user control is correctly saved and focus is correctly moved to the next user control on the page.

Data can be entered into the textbox of “new” user control and when the enter key is pressed, the data is correctly save. The focus appears to move correctly to the next user control on the page.

Data cannot be entered into the textbox of the control. Pressing the enter key will not save the data (because none was entered) but the focus will move to the textbox of the next user control on the page.

Data can be entered into the textbox of the user control. When the enter key is pressed, the data is correctly saved and the focus appears to move correctly to the textbox of the next control on the page

Basically, steps 3 and 4 are repeated until the end of the user controls on the page, alternating between being able to enter data and not.

Other items of note:
When one is able to enter data into the textbox of a user control, one can correctly tab through the textboxes of each user control until the end of the page
When one is not able to enter data into the textbox of a user control, pressing the tab key will take the focus to the address bar of the browser.

I created a much simplified example of the scenario described above and was able to consistently reproduce the “bad” focus behavior. All of the ajax toolkit controls and code where stripped out of the sample to rule the toolkit out as a cause. The behavior still occurs without the toolkit.

I am including the code for default.aspx and WebUserControl1.ascx.

Thanks,
Kelly

default.aspx
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <asp:Panel ID="Panel1" runat="server">
    </asp:Panel>
</asp:Content> 

default.aspx.vb
Public Class _Default
    Inherits System.Web.UI.Page

    Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        For x As Int64 = 1 To 20
            Dim Control As New WebUserControl1
            Control = LoadControl("WebUserControl1.ascx")
            Control.ID = "UserControl" & x.ToString
            Me.Panel1.Controls.Add(Control)

            AddHandler Control.ControlDataSaved, AddressOf Me.Operations_ControlDataSaved
        Next
    End Sub
    Protected Sub Operations_ControlDataSaved(ByVal sender As Object, ByVal e As EventArgs)
        For x As Int64 = 0 To Me.Panel1.Controls.Count - 1
            If Me.Panel1.Controls.Item(x).ID = sender.ID Then

                Dim Control As WebUserControl1 = Me.Panel1.FindControl(Me.Panel1.Controls.Item(x + 1).ID)
                Control.FindControl("Textbox1").Focus()

                ''' This code behaves the same way as the uncommented code.
                'Dim ControlID As String = Me.Panel1.Controls.Item(x + 1).ClientID & "_TextBox1"
                'Dim sm As ScriptManager = ScriptManager.GetCurrent(Me)
                'sm.SetFocus(ControlID)

                Exit For
            End If
        Next
    End Sub
End Class

WebUserControl1.ascx
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb" Inherits="WebApplication1.WebUserControl1" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
            <asp:TextBox ID="TextBox1" runat="server" TabIndex="1"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" TabIndex="-1" />
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

WebUserControl.ascx.vb
Public Class WebUserControl1
    Inherits System.Web.UI.UserControl

    Public Event ControlDataSaved As EventHandler

    Protected Sub OnControlDataSaved(ByVal e As EventArgs)
        RaiseEvent ControlDataSaved(Me, e)
    End Sub
    Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Me.OnControlDataSaved(e)
    End Sub
End Class

Open in new window

ksmithtxConnect With a Mentor Author Commented: 2010-11-19

Thank you rkworlds for your suggestions. Under normal circumstances your response would have help resolve my issue, so I'll give you partial points.

As it turns out, The code I was using was the exact code I needed to do what I wanted to do - it just didn't work in IE8. I tested 4 other browsers (Safari, Chrome, Opera, and Firefox) and all worked as they should have given the code I was using.

I finally opened a ticket with Microsoft and found out that the behavior I described in my original post was specific to IE8 running in IE8 standards mode. I was given a couple of work around to try. The first was to call a set focus script via a setTimeout call of 0. Given the architecture of my application, this would have required a substantial amount of rework. The other was to set the compatability view of the page to IE=EmulateIE7. (Instruction on how to do this are at http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx) This worked like a champ and the page and code are now behaving as expected.

Microsoft also informed me that they tested my code in IE version 6,7, and 9 beta and the code worked as it should in each of those version - only IE8 seems to be affected.

Thanks to all of the folks over at Microsoft for giving me a hand with this.

Kelly

LVL 29

Kumaraswamy RCommented: 2010-11-12

http://stackoverflow.com/questions/673536/wpf-cant-set-focus-to-a-child-of-usercontrol

http://www.velocityreviews.com/forums/t83507-setting-default-button-on-dynamically-loaded-web-user-control.html

ksmithtxAuthor Commented: 2010-11-19

Dear Moderator,

I'm pretty new to Experts exchange and think I messed up in the awarding of points. I would like to award only 250 points rkworlds response as it would work for this issue on most browsers, but not for the browser I was using.

As such, I had to open a ticket with microsoft to get the final solution, which I posted as an "authors comment".

Other than the awarding of the points, I have no other issues and am fine with the questions being closed.

Please let me know if you have any questions.

Kelly

ksmithtxAuthor Commented: 2010-11-27

Had to open ticket with Microsoft and they where able to provide the complete answer - it was a bug in IE8

Expand your skills with this month's free Premium course.

Issue setting focus in dynamically loaded user control

Who is Participating?

Already a member? Login.