Control Focus in ASP.Net 2.0 using AJAX, Master Pages, user controls...

Having a heck of a time with this... Any assistance would be appreciated. All I need to do is set focus to a textbox control that is inside an AJAX tab container (has 2 tabs) that is inside a user control that is inside the content page of a master page. I've tried everything from setting the default focus in the master page to calling .focus() on the textbox to custom javascript and cant get anything to work. Is there something I'm missing here? I'd like to somehow set the focus at the content page level if possible.

Thanks,Troy

I usually set the focus by custom javascript and not use any asp.net built-in feature for this.

I use this javascript function:

function setFocus( id )
{
var o = document.getElementById( id );
if(o != null && !o.disabled ) { o.focus(); }
}

And I have this just before closing the body tag, but can be other place:

<script type="text/javascript">

setFocus( "yourcontrolid" );

</script>

The real question is how to get the corrent id for your control?

You can do this for example:

setFocus( '<%= yourcontrol.ClientID %>' );

You can also hard-code the control id, you can find-out your correct control id by examining the source view of your html page (if the control is rendered during an async postback the page source view not reflect the changes, you need some debugging tool to see your real html source, firebug etc.)

Hadn't thought of inline script. I tried the above, but am still getting the following error: guessing it's an AJAX tab container thing:

"htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

Here's what I did: Exposed the textbox's clientID in a string property from the child control; Added setFocus(id) sccript to the master page's head tag;At the end of the content page's Page_Load event (server), added aRegisterStartupScript for setFocus passing in the clientID property.

When debugging the above error, my textbox (Input element) makes it into the setFocus() function, is enabled, etc, etc, ... ??

I'll continue to search on the above error. Thanks for the input stmarti...

Found a workaround. (seehttp://forums.asp.net/t/1184754.aspx?PageIndex=3) I ran across this before but am using it as a last resort... "Slowing down" the app doesnt seem like the correct solution but will have to do. I worked a delay routine into the setFocus() solution stmarti suggested. Did the same as above with the following changes in the master page (and calling delay using RegisterStartupScript in content's page_load instead of setFocus):

function delay(id){setTimeout("setFocus('"+id+"')",500);

}

function setFocus( id ) {

var o = document.getElementById( id );if(o !=null && !o.disabled ) { o.focus(); }

}

Anyone with a more elegant solution, please post. Thanks!

What about this (no delay required I think)?

<script type="text/javascript"
Sys.Application.add_load( function( )
{

var o = document.getElementById( yourid );

if(o !=null && !o.disabled ) { o.focus(); }

} );

</script>

You can try other events also (ASP.NET AJAX > Overview > ASP.NET AJAX Client Life-Cycle Events )

Looks like the above is what I'm looking for - wont get a chance to investigate for a bit. Thanks!

Conflict when using Textbox Watermark Extender?

Good day,

I'm trying to find what could be the problem. I'm playing with Textbox watermark extender and it works great, but when I tried using other extenders to same targetcontrol that the watermark is pointing to, I'm getting this kind of error.

Assertion Failed: Duplicate use of ID on

Is it a conflict or but in watermark extender? I'm using the examples of atlas control toolkit as reference. I used the popup control extender and tried to add a watermark extender to one of the text boxes. Then the error appears.

Note: The reason I encountered a problem is because I'm trying to make a textbox with the AutoComplete extender. I thought that adding a watermark extender would make the textbox much more user friendly.

Thanks for any comments.Depending on how the extenders implement their functionality, they may conflict when pointed at the same control. If you post a simple sample, we should be able to identify the conflict if there is one.

Here is the sample code. It is basically a text box with a popup control extender. In the popup control extender you could type some text in the smaller text box and when you had click the Add button it would transfer the text to the larger text box on the top. I added the watermark textbox extender and it begins to show the error. The popup works when the watermark is not used and vice versa. I removed the styles.

Thanks for any help. :)

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering=true runat="server"></atlas:ScriptManager><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="txtEmailTo" Width=500px runat="server"></asp:TextBox> <div style="width:100%;height:3px;"></div> <asp:Panel BorderColor=black BorderStyle=solid BorderWidth=1px ID="pnlEmailTo" runat="server" Width="504px"> <atlas:UpdatePanel ID="UpdatePanel12" runat="server"> <ContentTemplate> <atlasToolkit:PopupControlExtender ID="PopupControlEmailTo" runat="server"> <atlasToolkit:PopupControlProperties OffsetX=0 OffsetY=2 TargetControlID="txtEmailTo" PopupControlID="pnlEmailto" Position="Bottom" /> </atlasToolkit:PopupControlExtender> <asp:TextBox ID="txtSampleTo" runat="server" Width="300px"></asp:TextBox> <center>  <div style="width:100%;height:3px;"></div> <asp:Button ID="btnAddTo" UseSubmitBehavior=false runat="server" Width=120px Text="Add Text" OnClick="btnAddTo_Click" /> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> <atlasToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"> <atlasToolkit:TextBoxWatermarkProperties TargetControlID="txtEmailTo" WatermarkText="I'm a watermark" /> </atlasToolkit:TextBoxWatermarkExtender> </div> </form></body></html>

CODE

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Default2 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) { }protected void btnAddTo_Click(object sender, EventArgs e) {try {if (this.txtEmailTo.Text.Trim().Length <= 0) {this.PopupControlEmailTo.Commit(this.txtEmailTo,this.txtEmailTo.Text.Trim().ToString() +this.txtSampleTo.Text.ToString()); }else {this.PopupControlEmailTo.Commit(this.txtEmailTo,this.txtEmailTo.Text.Trim().ToString() +";" +this.txtSampleTo.Text.ToString()); } }catch { } }}

I've just opened work item 224 to track this issue. It says:

"PopupControl and TextBoxWatermark both override the ID property so they can return specifically decorated IDs. This is okay, but they override the set method with a NOOP. This is bad because it means the base class's implementation that actually stores the ID for later use doesn't get called and therefore when pointing two extenders at the same control there will be no way to avoid both extenders assigning themselves the same ID ("_TargetControlID"). The set method should really do something like "base.ID = value;".

Once that's in place, it's possible to avoid the same-naming problem by assigning an ID to either or both of the relevant extender's property lists so that their generated IDs will be non-conflicting ("AssignedID_TargetControlID")."

Making that change and adding an ID to one of your two extenders pointing at the same control seems to fix the problem for me. The resulting behavior's still a little weird since they both key off of focus, etc., but at least it works and will allow non-conflicting extenders to point to the same control.

Thanks for bringing this up!

Ah I see...

Much thanks for the reply, I'd try it later today to see if it is really that weird. :)

Regards,

Conditional updatepanel updates automatically

Hi,

I have a page with a lot of reviews. Each review has some comments and a textbox to enter a new comment for that review. When a new comment is posted, I update the list of comments for that review. A single review and it's correponding comments and commenttextbox are embedded in an updatepanel with conditional update. The problem is that when a comment is added, ALL the updatepanels for ALL the reviews on the page are updated and not only the updatepanel for the review, which was commented. This makes my page slow. I am using FireBug and in the console view I can see that the contents of all the updatepanels, are sent over the wire. How can I avoid this? I only want to update the comments for a single review.

Thanks

Thomas

What is good to do is place each "review + comments" in a single UpdatePanel with UpdateMode = "Conditional". By default, each UpdatePanel has by the UpdateMode = "Always".

Hope this helps,
Regards

Hi, as a matter of fact, I have already placed everything in updatepanels with updatemode=conditional.

thanks

Thomas

please send your code !

Hi,

Thank you for your post!

When we use updatepanel,all the content of the page is sent to the server!

UpdatePanel controls work by specifying regions of a page that can be updated without refreshing the whole page. This process is coordinated by theScriptManager server control and the clientPageRequestManager class. When partial-page updates are enabled, controls can asynchronously post to the server.An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed inUpdatePanel controls and that are marked to be updated.The server sends HTML markup for only the affected elements to the browser. In the browser, the client PageRequestManager class performs Document Object Model (DOM) manipulation to replace existing HTML with updated markup. The following illustration shows a page that is loaded for the first time, and a subsequent asynchronous postback that refreshes the content of anUpdatePanel control.

But when the Ayncpostback is returned, it only refresh the updatepanel(s) you nend to refresh.

If you have further questions,let me know!

Best Regards,

Conditional PopupControlExtender

I've seen all kinds of examples using the popup control extender being tied to textbox, I was wondering if there was a way to tie it to a checkbox or checkboxlist and have it only appear when an item is checked. I havent got any issues getting it to show up, but is it possible and if so how do you make it only appear when the control is being checked.

Thanks for any advice/guidance that you can provide.

You could attach a popup control extender to an invisible control and call its show method in the onclick event handler of the checkbox depending on what value is set.

Here is a post that talks about this problem:

http://forums.asp.net/thread/1466348.aspx

Composite control and MaskedEdit

I have a composite control that includes a textbox. I want to use the masked edit extender on this control, but I get the 'Unable to cast object to textbox" error. Is there a work around for this?

Thanks,
Rhonda

Hi Rhoda,

The maskedEdit control is extender to object TextBox :

...
[TargetControlType(typeof(TextBox))]
public class MaskedEditExtender : ExtenderControlBase
...

The MaskedEdit Control would not have as to control composite. For example , The composite has 2 textbox. Which will be associated? On the events, that events will be controlled (ex: keypress), of the composite or internal the textbox ?

Hi Rhodas,

Perhaps workaround is to create one webcontrol with Textbox + MaskedEdit.

I like the idea of adding the masked edit to my composite control, but I'm not sure how to do that. There's no HTML involved and I can't access the extender in code. Any ideas?

Thanks,
Rhonda

Hi Rhonda,

Sorry, I worte wrong :

.. create onewebUsercontrol with Textbox + MaskedEdit.

Glad I found that thread; that's exactly what I'm trying to do (a composite control with a textbox and a FilteredTextBoxExtender)!

I haven't had any luck 'till now (those are my first custom controls, and tutorials for that subject are rare, to say the least...)

Now, am I understanding correctly that you are saying that ExtenderControls can't be encapsulated in CustomServerControl? (I'm deriving from CompositeControl, for my part.)

regards.

Composite Control and CalendarExtender error

I'm trying to create a server control that wraps up a TextBox, calendar Image, and a AJAX 1.0 CalendarExtender. Here is a section of the code:

protected override void CreateChildControls() {txtDate.Width = 75;Controls.Add(txtDate);imgCal.ImageUrl= _iconURL;imgCal.ImageAlign= ImageAlign.AbsMiddle;Controls.Add(imgCal);calEx.PopupButtonID= imgCal.UniqueID;calEx.TargetControlID= txtDate.UniqueID;Controls.Add(calEx);}

Here is the runtime error I am getting:

"'_behaviors' is null or not an object"

Any ideas?

Looks like there is a little information about adding the behaviors here:

http://forums.asp.net/thread/1293293.aspx#13

But this leeds me to believe I need a client script on every page I plan to have this control. Which isn't really acceptable.

Is there a way to wrap it up in one compiled control?

Did you have any luck doing this? I'm in the process of doing the exact same thing.

Also, I'm having problems finding the Calendar Extender control to dynamically add it. I'm sure I'm missing something. I've tried adding references to the AjaxControlToolkit and the AJAXExtensionsToolbox, but no luck in finding it. I do see the AjaxControlToolkit namespace and several controls under it, just no Calendar.

Thanks In Advance!

Firgured out the problem... somehow the older version of the AjaxControlTool.dll got in there.

I got it working great!

componenet alike dragpanel

hi everybody, i want create some component(for example : label, textbox,..) alike dargpanle's ajaxtoolkit( i can drag them). but i dont know how can i do it?

Hi MarziehReader,

To create an extender , I would like to introduce thisdocument. To create a DragPanelExtender , you should dip into its source code since the AJAX Control Toolkit is an open source project.

Best regards,

Jonathan

Complete postback from inside the updatepanel

I do have an updatepanel in my webform which contains a combobox, a textbox and a submit button.

the submission way varies based on the situation of the combobox and the texbox but it is to be validated before allowing the user to submit the form.

The form also includes a repeater containing a user control and a checkbox as item template (the checkbox is the only input component in there)

I want the updatepanel to perform validation jon asynchronously and to hold the submit button disabled while validation fails but I want the submit button to completely post the webform to the server so I can get the checkboxes inside the repeater.

use postbacktrigger of the Updatepanel for submit button

<asp:UpdatePanel>

<ContentTemplate>

//ur all contents

</ContentTemplate>

<Triggers>

//for complete postback

<asp:PostBackTriggerControlID="SubmitButton"/>

</Triggers>

</asp:UpdatePanel>

http://www.interviewghost.com
IT placement papers, IT interview question answers, Dot.net question answer,interviewghost is a portal where you can find all information about the interview. you can find there HR interview quesion answer, Call center interview question answer, IAS interview question answer, IAS Pervious year question papers, TOP IT companies Placement papers, TECHNICAL interview question answer, IT COMPUTER interview question answer,
This product will help to crack the anytype of interview.http://www.interviewghost.com This portal provide you a whole information about the interview process, interview types and interview tips.
visit:http://www.interviewghost.com

Thank you sir but I'm afraid you misunderstood the problem.

It it is a soloution for just the reverse problem. In this case since the button is located inside the update panel, its click event is actually triggered by the updatepanel with no effort.

What I'm trying to do here is toprevent the updatepanel from triggering the button's click event while it does have full control over anything else related to the button.