AJAX PopupControl Extender

The AJAX PopupControlExtender provides a new and very interactive way to display the collection of list type options using different ASP.Net controls. Instead of using drop downs or list boxes you can use PopupControlExtender to display the collection of options in any other ASP.Net server control e.g.: radio button list, checkbox list etc...

You can display the popup populated with values retrieved from the database and set the value for targeted Textbox by selecting a value from the popup. All this functionality can be provided with more interactive way using AJAX UpdatePanel. UpdatePanel will bind and update the values using Partial Rendering feature of AJAX that works for individual controls without affecting rest of web page.

PopupControlExtender controls both server side and client side events based on the values specified in its properties.

PopupControl Extender Properties

TargetControlID: ID of the textbox that will capture the return values.

PopupControlID: ID of the control that will appear as popup.

Position: You can specify the position for the popup to appear. It accepts the positions as Bottom, Top, Center, Left and Right.

OffesetX: It assigns margin to the popup in horizontal direction from the position defined in Position property.

OffsetY: It assigns margin to the popup in vertical direction corresponding to the specified Position.

CommitProperty: It adds a new attribute/property to the target control that you can access and use at client side scripting.

CommitScript: Client side script that executes after retrieving the popup value.

Sample Code for PopupControlExtender

CSS code

.popupControl {
    background-color: #eeeeee;
    border: outset 1px #c0c0c0;
    color: #444444;
    position: absolute;
    visibility: hidden;
}

.textbox {
    border: solid 2px #cccccc;
    border-top: solid 2px #a0a0a0;
    color: #444444;
    width: 250px;
}

HTML Code

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:Label ID="Label1" 
    runat="server" 
    Font-Bold="true" 
    Font-Size="14px" 
    Text="Click inside the textbox to open AJAX Popup Control:">
</asp:Label>

<div class="clear"><br /></div>

<asp:TextBox ID="TextBox1" 
    CssClass="textbox" 
    runat="server" 
    Width="200px">
</asp:TextBox>

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:RadioButtonList ID="RadioButtonList1" 
                runat="server" 
                AutoPostBack="True" 
                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                <asp:ListItem Value="#ff0000">Red</asp:ListItem>
                <asp:ListItem Value="#0000ff">Blue</asp:ListItem>
                <asp:ListItem Value="#00ff00">Green</asp:ListItem>
                <asp:ListItem Value="#c0c0c0">Gray</asp:ListItem>
            </asp:RadioButtonList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" 
    runat="server" 
    CommitProperty="foreColor"
    Position="Right" 
    CommitScript="e.style.color = e.foreColor;e.value = e.foreColor + ' - is your selected color';" 
    TargetControlID="TextBox1"
    PopupControlID="Panel1" 
    OffsetX="2" 
    OffsetY="2">
</ajaxToolkit:PopupControlExtender>

C# Code

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    PopupControlExtender1.Commit(RadioButtonList1.SelectedItem.Text);
    RadioButtonList1.ClearSelection();

}

Above sample code will help you to learn the use of CommitProperty and CommitScript property of the PopupControlExtender.

Continue to next tutorial: AJAX Resizable Control Extender to learn the AJAX functionality to resize the ASP.Net Panel control.