Showing posts with label popupcontrolextender. Show all posts
Showing posts with label popupcontrolextender. Show all posts

Wednesday, March 28, 2012

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 Popup Controls in PopupControlExtender

This is the code i have.

<atlasToolkit:PopupControlExtenderID="PopupControlExtender1"runat="server">

<atlasToolkit:PopupControlPropertiesPopupControlID="Panel1"Position="Bottom"TargetControlID="txtFrom"/>

<atlasToolkit:PopupControlPropertiesPopupControlID="Panel1"Position="bottom"TargetControlID="txtTo">

</atlasToolkit:PopupControlProperties>

</atlasToolkit:PopupControlExtender>

I get the following error message. But, if i remove one of the popupcontrols it works fine. AtlasControlToolkit version is 1.0.60914.0. What am i doing wrong.

Couldn't get extender properties on extender PopupControlExtender1. Make sure the ID is spelled correctly and the control is on the page.

Please include the complete error information and post a complete, simple sample page if you could.

Monday, March 26, 2012

MultiView in PopupControlExtender ?

I am trying to decide which ajaxtoolkit control to use for the following and if someone can point me to the correct direction, it would help alot.

I want to create poup window when click on a linkbutton. The popup window include asp.net server controls such as multiview or wizard which required popup to stay open even after the postback.

basically

1.user click on the linkbutton to open up popup window.

2. user fill up information on first view of the multiview and click next to go to next view

(catch the button next action on server side and do some action such as write to database, then change the multiview active index to second view)

3. user is provided with second view of the multiview while the popup still open

I can't use hovermenuextender because i want the popup to display when click action happened

I am trying out the popupcontrolextender but it close the popup window after user click next ( 2 ).

Here is the code, i have it so far.
123<asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" />4<asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle">5<asp:UpdatePanel runat="server" ID="UpdatePanel3">6 <ContentTemplate>78 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">9 <asp:View ID="View1" runat="server">10 View111 <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="btn_next.gif" />12 </asp:View>13 <asp:View ID="View2" runat="server">14 View215 <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="btn_complete.gif" />16 </asp:View>17 </asp:MultiView>18 </ContentTemplate>19 </asp:UpdatePanel>20 </asp:Panel>21<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1"22 PopupControlID="Panel1" Position="Bottom" >23</ajaxToolkit:PopupControlExtender>

With this code, it always close the popup after ImageButton1 in View1 is clicked. So i tried putting another updatepanel to wrapped the whole thing, once i do that the button click doesn't go back to server anymore.

What i am looking for exactly is an ajaxtoolkit control that create popup on clicked that can have any asp.net server control and stay open until user click close or certain button.

Any suggestion is appreciated.

thanks!


I guess i make it confused with my specific case. but it is quite simple what i want to do. so let me rephrase my question.

"Does anyone know which ajaxtoolkit control to use to create sticky popup with server controls which require postback?"


Really appreciate any suggestion even if there is no such control, please let me know.

Thanks very much.


Hi,

By default, popup extender doesn't support this behavior, but you can enable it by wrapping the wizard in a UpdatePanel.

Here is a sample that works:

<%@. Page Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) MultiView1.SetActiveView(View2) End Sub</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" /> <asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle"> <asp:UpdatePanel runat="server" ID="UpdatePanel3"> <ContentTemplate> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> View1<asp:Button ID="Button1" runat="server" Text="Next" UseSubmitBehavior="false" OnClick="Button1_Click" /> </asp:View> <asp:View ID="View2" runat="server"> View2 <asp:Button ID="Button2" runat="server" Text="Complete" UseSubmitBehavior="false"/> </asp:View> </asp:MultiView> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" Position="Bottom" > </ajaxToolkit:PopupControlExtender> </div> </form></body></html>
Hope this helps.

Thanks you Raymond for the reply. Just in case someone wondering how this goes. Here is what i ended up with. There is one that worth mentioning here. The property UseSubmitBehavior is a must so you must used button or similar control. The main problem that i have before was using imagebutton. I was using two updatedpanel nested and somehow imagebutton never make the server call. but the button did with UseSubmitBehavior set to false.

1 <asp:ScriptManager ID="ScriptManager1" runat="server">
2 </asp:ScriptManager>
3 <asp:UpdatePanel runat="server" ID="UpdatePanel1">
4 <ContentTemplate>
5 <asp:LinkButton ID="LinkButton1" runat="server" Text="Open Popup" />
6 <asp:Panel ID="Panel1" runat="server" CssClass="PopupStyle">
9 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
10 <asp:View ID="View1" runat="server">
11 View1
12 <asp:Button ID="Button1" runat="server" Text="Next" UseSubmitBehavior="false" OnClick="Button1_Click"
13 CssClass="ButtonSubmit" />
14 </asp:View>
15 <asp:View ID="View2" runat="server">
16 View2
17 <asp:Button ID="Button2" runat="server" Text="Complete" UseSubmitBehavior="false"
18 CssClass="ButtonComplete" />
19 </asp:View>
20 </asp:MultiView>
23 </asp:Panel>
24 <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton1"
25 PopupControlID="Panel1" Position="Bottom">
26 </ajaxToolkit:PopupControlExtender>
27 </ContentTemplate>
28 <Triggers>
29 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
30 <asp:PostBackTrigger ControlID="Button2" />
31 </Triggers>
32 </asp:UpdatePanel>

thanks for the helps. hope this help someone also.

MultiView, User Controls, PopupControlExtender

I have a webpage containing a MultiView. I put a user control in every view of the MultiView. From each user control, I use the ModalPopupExtender to open another user control, which contains fields for entering dates. I then use the calendar control and PopupControlExtender to select date.

It works fine when only one user control in the modal popup window has the calendar control and the PopupControlExtender. If more than one user controls opened with the modal popup extender have the calendar control and the PopupControlExtender, none of them works. In the latter case, I can still popup the calendar, but it doesn't allow me to select date, and it doesn't close. The calendar would dispear if I click outside the calendar area. But then I can't close the window containing the user control opened with the modal popup extender.

Anyone has similiar experience?

Please try your scenario with the recently available61020 release of the Toolkit (and ASP.NET AJAX Beta 1). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem. Thank you!

Multiview, modalPopup, updatepanel, popupcontrolextender

Hello,

I have a multiview that contains six views. Two of the views have update panels on them. I had it working with a popupcontrolextender (for a calender) and using updatepanel to move between the views without postback.

However, I added modalPopup to one of my views and now it doesn't switch between the views anymore. If I take the modalPopup out, it works again.

Has anyone run into this before? If so, how did you get around it?

Check the JavaScript debugger window for script errors, maybe?