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; }
}
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.
My Tech Blogs MCPD Enterprise and Web Application
MCTS Web, Window and Enterprise Application
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>
Jason Duncan
Member
413 Points
222 Posts
How do I set focus in .ascx from .aspx page?
Apr 18, 2012 11:24 PM|LINK
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; }
}
res.web
Member
546 Points
138 Posts
Re: How do I set focus in .ascx from .aspx page?
Apr 19, 2012 05:44 AM|LINK
Though image control will have focus but it cannot be seen as we can see the focus(cursor blinking) in textbox control.
Jason Duncan
Member
413 Points
222 Posts
Re: How do I set focus in .ascx from .aspx page?
Apr 19, 2012 01:18 PM|LINK
But I am trying to set focus to the DropDownList in the imagePicker.ascx.
Jason Duncan
Member
413 Points
222 Posts
Re: How do I set focus in .ascx from .aspx page?
Apr 19, 2012 01:18 PM|LINK
I am not trying to set focus to the imagePicker.ascx.
amitpatel.it
Star
7966 Points
1865 Posts
Re: How do I set focus in .ascx from .aspx page?
Apr 19, 2012 01:24 PM|LINK
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.
MCPD Enterprise and Web Application
MCTS Web, Window and Enterprise Application
Jason Duncan
Member
413 Points
222 Posts
Re: How do I set focus in .ascx from .aspx page?
Apr 19, 2012 10:00 PM|LINK
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>