AJAX PopupControl Extender

by top54u.com 30 May, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

ASP.Net AJAX Tab Extender CSS Class Styles

ASP.Net AJAX Tab Control Extender

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net AJAX Password Strength Extender Control

ASP.Net AJAX NoBot Extender Control

ASP.Net AJAX Star Rating Extender Control

ASP.Net AJAX NoBot Extender Control Example

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:

body {
font-family:verdana;
font-size:11px;
}

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

.textbox {
border: solid 1px #cccccc;
color:#444444;
width: 250px;
}

</style>

HTML Code:

[code:html]

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:TextBox ID="TextBox1" CssClass="textbox" runat="server"></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="Bottom"
                     CommitScript="e.style.color = e.foreColor;e.value = e.foreColor + ' - is your selected color';"
                     TargetControlID="TextBox1"
                     PopupControlID="Panel1"
                     OffsetX="2"
                     OffsetY="2">
            </ajaxToolkit:PopupControlExtender>

        </div>
    </form>

C# Code:

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