Multiple PopupControlExtender - HOW?

Hi!

For example I have 10 textbox on my page. I created a panel with a calendar inside. I use 10 PopupControlExtender to bound the same panel to every textbox. (i dont want to create 10 diffrent Panels!)

And now i have a problem: How can i found out which PopupcontrolExtener and/or Textbox opend the calendar? I need this to set the value.

Any idea?

Thank you and sorry for bad english ;-)

Make it a user control. I've already done this and other than the issues that I've noted in some other posts about the popup behavior no longer working after postback, it works just fine. Below is the code I use to create the UserControl.

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="User_Controls_DatePicker" %>
<asp:TextBox ID="tbDateSelected" runat="server" SkinID="DateTextBox"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
<asp:ImageButton ID="imgCancel" runat="server" ImageUrl="../images/close.gif" OnClick="imgCancel_Click" />
</center>
</ContentTemplate>
</aspAjax:UpdatePanel>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pceDate" runat="server" PopupControlID="Panel1" TargetControlID="tbDateSelected" Position="Bottom" ></ajaxToolkit:PopupControlExtender>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Radius="6" Opacity="1" TrackPosition="true" Width="5">
</ajaxToolkit:DropShadowExtender
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;
using AjaxControlToolkit;

public partial class User_Controls_DatePicker : System.Web.UI.UserControl
{
private string _selectedDate;

public string SelectedDate
{
get { return tbDateSelected.Text; }
set { tbDateSelected.Text = value; }
}

public string Position
{
set { pceDate.Position = ( PopupControlPopupPosition ) Enum.Parse( typeof( PopupControlPopupPosition ), value ); }
}

protected void Page_Load( object sender, EventArgs e )
{
}

protected void Calendar1_SelectionChanged( object sender, EventArgs e )
{
pceDate.Commit( Calendar1.SelectedDate.ToShortDateString( ) );
}
protected void imgCancel_Click( object sender, ImageClickEventArgs e )
{
pceDate.Cancel( );
}
}

Hope this helps.

Nick

You can find out which PopupControlExtender called the calendar with the info accessible by calling this following function, in the event handler for the control you popped up:

 
AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
 You can use that in, say, your calendar's OnSelectedDateChanged event handler to see where it needs to go.

You can use the .Commit() function to submit the information from the calendar to the correct control. Once again, this would go in the event handler for your calendar's OnSelectedDateChanged event handler.

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).Commit(Calendar1.SelectedDate.toString())
 
Thanks toTed Glaza for the assist. 

Hello!

Thanks for your reply!

@.ncipollina
Thats not the right solution. I dont want to deliver 10 rendered controls (With the same content!) to the client. Thats to much overhead!

@.Matt M
Hi! That sounds interessting. But I dont get the point.

Protected Sub Calender_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim currentPopupControlExtender as AjaxControlToolkit.PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
currentPopupControlExtender.Commit(DirectCast(sender, Calendar).SelectedDate)
End Sub

Is this what you mean? I will try it tomorrow!

Undying:

Hello!

Thanks for your reply!

@.ncipollina
Thats not the right solution. I dont want to deliver 10 rendered controls (With the same content!) to the client. Thats to much overhead!

@.Matt M
Hi! That sounds interessting. But I dont get the point.

Protected Sub Calender_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim currentPopupControlExtender as AjaxControlToolkit.PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
currentPopupControlExtender.Commit(DirectCast(sender, Calendar).SelectedDate)
End Sub

Is this what you mean? I will try it tomorrow!

Use

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID

to find the TargetControlID of the PopupControlExtender that caused the panel to pop up. In other words, what textbox is the target of the PopupControlExtender.

Is that what you are looking for? 

Matt you are the man!

Protected

Sub Calender_SelectionChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(

Me).Commit(DirectCast(sender, Calendar).SelectedDate)EndSub

This work like a charme! I could use the Same "DatePickerPanel" on my page many times without duplicate code. Just add a Extender to the textbox and I'm done! Fine!

Thanks again for sharing this!

I am not sure that this actually works. I mean, the commit on the proxy works, but if I try to retrieve the value of TargetControlID from AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID, it is null (which sense since what is returned from the getproxy method is an empty popupcontrolextender)

Is there any way to retrieve this information? I am trying to set the value of two textboxes, each based on the other and another arbittrary value...

i.e. - i would like my code to be soomething like:

AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).Commit(calendar1.selecteddate.tostring())

select case AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page).TargetControlID

case "text1"

text2.text=format(calendar1.selecteddate.addmonths(arbitrary value),"MM/dd/yyyy")

case "text2"

text1.text=format(calendar1.selecteddate.addmonths(-1*arbitrary value),"MM/dd/yyyy")

end select

Could you pleaseopen a work item to report and track this issue. Thank you!

Multiple update panels

I had a query regarding multiple update panels.
I have a user control which contains one update panel.This user control contains a hidden textbox .
I am updating the updatepanel on basis of a timer control in javascripts which raises a postback.

I have placed two instances of this user control in another page say for eg. CIndexPage.aspx.
Now the Script manager is also placed in the same page ie CIndexPage.aspx.

Will the two updatepanels wrk independently.

Is the hidden variable shared between the instances of the update panel ?
Becoz the issue here is that even if i pass a value for the hidden textbox contained
in the first Update Panel, still the value gets stored for the hidden
variable in the second instance of the updatePanel.

Can we use Update Panels in a User Control and place multiple instances of the UserControls in a page.

Please if someone cld help me with this.

Thanks in advance.

Regards,
Shweta

hello.

well, the updatepanels will work independently. if you want to get independent refershes, you need to make sure that you've set the update mode of the pannel to conditional.

regarding the hidden field, it depends on how you've injected in the page...

Hi,

My Code is somewhat like this

User Control contains

_____________________________________________________________

<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>

____________________________________________________________________
There is adiv control which contains multiple hyperlinks.That is done thru .cs file of the Master Control and is dynamically generated.
The hidden filed in placed inside the UpdatePanel and the RequestID is updated on the hyperlink click.

And 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

It always updates the last user control.

Why does work in this manner . Also to update the UpdatePanel i am using the timer control and _dopostback method.

Is there an issue with the timer control.Shld that be placed in the ParentPage.

regards,

Shweta

hello.

can you please build a small demo app with a simple user control + page and put it here?

yes sure
------------
User Control Code is as follows for .aspx is as follows
-------------
<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel()
{
var obj=get$('<%=RequestID.ClientID%>');
_dopostback("obj",'');
}

function CallDetails(nSerialNo)
{
var obj=get$('<%=RequestID.ClientID%>');
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>
<body>
<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>
</body>

------------
end
-------------

------------
User Control Code is as follows for cs is as follows
-------------

In this i dynamically adding a hyperlink whose onclick events call CallDetails(nSerialNo) (in .aspx of user control).
And pass different value to the nSerialNo parameter on the click event.In the event i change the value of RequestID to the the nSerialNo.

------------
end
-------------

------------
Parent Page Code is as follows for .aspx is as follows
-------------
<%@. Register TagPrefix="csc" Namespace="CustomServerControls" %>
<body>
<asp:ScripManager runat=server id=ScriptMgr1 >
</asp:ScripManager >
<csc:CustomServerControls id=CustomServer1 runat=server >
</csc:CustomServerControls>

<csc:CustomServerControls id=CustomServer2 runat=server >
</csc:CustomServerControls>

</body>

------------
end
-------------

This way 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

Also if i am placing the usercontrol in a page and call the page thru <script tag by specifying the source it gives me a Syntax error.

Can i call the page in this way.

hello

well, now it's clear!. what you shoud do is change the js code. you should have something like this:

<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel(idCtl)
{
var obj=get$(idCtl);
_dopostback("obj",'');
}

function CallDetails(idCtl, nSerialNo)
{
var obj=get$(idCtl);
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>

where idCtl is the ID of the control (hidden field) you want to use. yep, you'll have to change your code so that it also passes the id of the field when you call the method.

in your code, what's happening is that when you're adding the second user control, it'll add the js methods again, overriding the previous definitions. this means that clicking on the 1st or 2nd user control will always call the latest definition, which points to the id of the last user control you've added to the page. if you perform the changes I've said, this won't happen any more.

my Calendar extender is so slow

I have a textbox, linked to calendar extender, and validationcallout attached to it. But the calendar extender displays so slowly, it takes for ever to see the calendar.

Any solution please.

One more question pls, does the calendar extender pop up after a round trip to the server, or is it purely on the client?

Help, Help Help :) :). Thnks a lot.

tutus:

One more question pls, does the calendar extender pop up after a round trip to the server, or is it purely on the client?

The calendar extender is all done on client side using javascript.

I also get slow performance on the calendar extender when I have a few on the page and if I try to open and close them repeatedly while selecting dates.

is there any other alternative pls? or is the calendar server control faster?

Thanks.

tutus:

or is the calendar server control faster?

The calendar asp.net control will cause a full page postback.

I can see that the calendar extender is a tad slow but not to the extent where it is frustrating users or where it is such a delay that I would rather do a full page post back

My extender control wires its events, then seems to forget what it is!

I've created an extender using the Ajax Extender Control Template. It takes a TextBox as its TargetControl and adds a couple of drop downs to its child controls. Then it responds to the onblur event of the text box. It is supposed to set the values of the drop downs before it posts back. The problem is that when the text box fires its 'blur' event I can't use the 'this' keyword to refer to any of the classes properties or methods. Here is a brief snippett:

Company.Web.MASW.ProductAutoCompleteBehavior.prototype = { initialize : function() { Company.Web.MASW.ProductAutoCompleteBehavior.callBaseMethod(this,'initialize'); $addHandler(this.get_element(),'blur',this._elementChanged ); $addHandler(this._DiameterElement,'click',this._setElementValue ); $addHandler(this._TypeElement,'click',this._setElementValue ); },... _elementChanged : function(e) { alert(this.get_element()); }, _setElementValue : function(e) { alert( this._DiameterElement ); }}

The alert commands just verify that I've managed to make the connection to the right input element. It should pop up and say [object] but I get a script error saying object does not support this property or method. I just can't understand how it's calling the right event but can't see it's own properties. Could It be that it's inheriting from the AjaxToolkit.BehaviorBase class?

It seems as though I have a lot to learn about how to connect everything in Ajax. I've done a fair amout of JavaScript and I've done a fair amount of JScript in ASP. I have got a lot to learn about how Ajax connects ECMA, EMCA, E=MC², or what ever it's called. I just can't fool with it much more for now so consider this 'resolved'. Thanks to all those who read this and said "what in the world is he up to?"

Need a double check on my options

I am not familiar with client side scripting.

My situation involves dynamic validation and masking of an asp.net textbox.

From reading articles and knowing what I think I know about server control, the only way to accomplish this is by using a client side raw javascript or using the new atlas clientside scripting functionality.

Just for verification, It is not possible to do it with just a server control, right?

Thanks for any input...

You could do it server-side but it would be an unberably bad user-experience. Any field masking should happen client side, and validation should happen on client and server side.

You usually do validation client sideand server side.

Masking involves the use of javascript. You need javascript to add and control the mask on the input element.

By the way, I am using the prototype version of MaskEdit control. It's included in the source code of Atlas Control Tookit.

It's very nice!

Cheers,

Leo

I will try the new control, thanx for the info.

One last question,

This is for a telephone number. I want to be able to mask on the insert template and display on the item template with the format (000) 000-0000.

The question is would you store it in the db as a nchar with formatting or as an integer and add and remove formatting on the server side?

Jamy

Need help with CalendarExtender Control

Hi,

I'm a beginner to ASP.NET AJAX and ASP.NET itself. I have a calendar extender for a textbox and it works fine until I click the 'Submit' button in my form. Apparently in the UI the date will show but when I do an insert to my database by using the Convert.ToDateTime function first, I get thrown an exception where it says:

'The string was not recognized as a valid DateTime. Tehre is a unknown word starting at index 0'

I would like to get some help to troubleshoot this problem.

Thanks in advance,
Nick

HI, probably your date format is not correct, the calendar extender format should be the same that the database format check that both formats be mm/dd/yy or mm/dd/yyyy or mm/dd/yyyy hh:mm:ss.

Hi, apparently something was wrong with the AJAX calendar extender. I didn't realise it until I deleted it and created a new one.

Thanks for the help anyway!

Cheers,
Nick