Scribd
Upload
13 views

Using Multiple Popup Controls: Scriptmanager Control Must Be Put Anywhere On The Page (But Within The

The document discusses using multiple PopupControl extenders in the AJAX Control Toolkit to display the same popup panel containing a calendar control below two different textboxes when each textbox is activated. A ScriptManager is added to the page to enable AJAX functionality. An UpdatePanel is used to wrap the calendar to prevent full page posts. Then each textbox is extended with a PopupControlExtender specifying the target textbox control ID and the shared popup panel ID so that the calendar appears below each textbox when clicked.

Uploaded by

Brian Pham
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Using Multiple Popup Controls: Scriptmanager Control Must Be Put Anywhere On The Page (But Within The

The document discusses using multiple PopupControl extenders in the AJAX Control Toolkit to display the same popup panel containing a calendar control below two different textboxes when each textbox is activated. A ScriptManager is added to the page to enable AJAX functionality. An UpdatePanel is used to wrap the calendar to prevent full page posts. Then each textbox is extended with a PopupControlExtender specifying the target textbox control ID and the shared popup panel ID so that the calendar appears below each textbox when clicked.

Uploaded by

Brian Pham
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Using Multiple Popup Controls

Christian Wenz

Overview
The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. It is also possible to use more than one popup control on one page.

Steps
In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element): <asp:ScriptManager ID="asm" runat="server" /> Next, add a panel which serves as the popup. In the current scenario, the panel contains a Calendar control. In order to avoid the page refreshes caused by the Calendars postbacks, the panel is put within an UpdatePanel control: <asp:Panel ID="pnlCalendar" runat="server"> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Calendar ID="c1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> The page also contains two text boxes. For each text box, the calendar popup shall appear once the text box is activated. <div> Departure date: <asp:TextBox ID="tbDeparture" runat="server" /> Return date: <asp:TextBox ID="tbReturn" runat="server" /> </div> Now extend each of the two text boxes with a PopupControlExtender. The TargetControlID attribute provides the ID of the control tied to the extender. The PopupControlID attribute contains the ID of the popup panel. In this case, both extenders show the same panel, but different panels are possible, as well. <ajaxToolkit:PopupControlExtender ID="pce1" runat="server" TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" /> <ajaxToolkit:PopupControlExtender ID="pce2" runat="server" TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Now whenever you click within a text field, a calendar appears below the field, allowing you to select a date. (Getting the selected date back into the text boxes will be covered in a different tutorial.)

The Calendar appears when the user clicks into the textbox

You might also like