Link to home
Start Free TrialLog in
Avatar of ksmithtx
ksmithtx

asked on

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

Avatar of Kumaraswamy R
Kumaraswamy R
Flag of India image

ASKER CERTIFIED SOLUTION
Avatar of ksmithtx
ksmithtx

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ksmithtx
ksmithtx

ASKER

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
Had to open ticket with Microsoft and they where able to provide the complete answer - it was a bug in IE8