How do I set focus in .ascx from .aspx page?

I have a bulletin.aspx page that includes an imagePicker.ascx control (allows user to pick a picture). Based on certain situations, I would like to set the focus to be a dropdown within the imagePicker.ascx control.

I use a Session variable to track what control to focus on. The Session var is being set correctly, and the javascript value appears to be set (I can see it in an alert box), but the focus just does not work for the imagePicker.ascx.

Any help would be greatly appreciated. Here's the code:

<script>
var focus = '<%= Session["focus"] %>';
var TextBoxBulletinTo=document.getElementById("<%= TextBoxBulletinTo.ClientID %>");
var ImageLoader = document.getElementById("<%= ImageLoader1.DropDownListAlbumClientID %>");

function CuteEditor_OnInitialized(editor)
{
    setTimeout(focusControl,100);
}

function focusControl()
{
    if(focus=="default")
    {
        TextBoxBulletinTo.focus();
    }
    if(focus=="image")
    {

        alert(focus);
        ImageLoader.focus();
    }
}
</script>

And in my imagePicker.ascx:

public string DropDownListAlbumClientID
{
get { return DropDownListAlbum.ClientID; }
}

Re: How do I set focus in .ascx from .aspx page?

Though image control will have focus but it cannot be seen as we can see the focus(cursor blinking) in textbox control.

Re: How do I set focus in .ascx from .aspx page?

But I am trying to set focus to the DropDownList in the imagePicker.ascx.

Re: How do I set focus in .ascx from .aspx page?

I am not trying to set focus to the imagePicker.ascx.

Re: How do I set focus in .ascx from .aspx page?

In page load event of your user control registered jaavascript with caling one javascript function and pass your related control's client id and in this js function as below.

function Setfocus(control)
{
document.getElementByID(control).focus();
}

because user control's control have differnet id so you have to pass it from user control's load event, to get accurate it.

Re: How do I set focus in .ascx from .aspx page?

Many thanks for the suggestions. Basically, I was doing all this work to prevent the HTML Editor from stealing the focus.

Because the .ascx has the control I need to focus, I was required to use a Public variable to access that control. Once I had that properly working, I was able to force the focus from either the .aspx or .ascx using javascript and a session var.

Here is a final sample of the code that work:

-- .aspx.cs

public partial class testCE : System.Web.UI.Page
{
    protected override void OnLoad(EventArgs e)
    {
        if (!IsPostBack)
        {
            Session["focus"] = "default";
        }
        base.OnLoad(e);
    }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
}

-- .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testCE.aspx.cs" Inherits="testCE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<%@ Register Src="TestUserControl.ascx" TagName="TestUserControl" TagPrefix="uc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <CE:Editor Width="505" Height="150" ID="TextBoxBulletinDescription" runat="server"
                      EnableContextMenu="true" EditorOnPaste="PasteWord" ShowBottomBar="false" MaxHTMLLength="7000" Focus="false"></CE:Editor>
                                
        <br />
        <uc1:TestUserControl ID="TestUserControl" runat="server"></uc1:TestUserControl>
    </div>
    </form>
        <script>
    
var focus = '<%= Session["focus"] %>';
var TextBox1=document.getElementById("<%= TextBox1.ClientID %>");
var TestUserControlDDL = document.getElementById("<%= TestUserControl.DropDownListClientID %>");

function CuteEditor_OnInitialized(editor)
{
    setTimeout(focusControl,100);
  
}
function focusControl()
{
    if(focus=="default")
    {
        TextBox1.focus();
    }
    if(focus=="ddl")
    {
        TestUserControlDDL.focus();
    }
}
</script>
</body>
</html>

-- USER CONTROL--

--.ascx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class TestUserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Session["focus"] = "ddl";
        Label1.Text = "Selected value = " + DropDownList1.SelectedValue.ToString();
    }

    public string DropDownListClientID
    {
        get { return DropDownList1.ClientID; }
    }
}


-- .ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestUserControl.ascx.cs" Inherits="TestUserControl" %>

<asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true"
    onselectedindexchanged="DropDownList1_SelectedIndexChanged">
    <asp:ListItem>Option 1</asp:ListItem>
    <asp:ListItem>Option 2</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>