My control events inside panel aren't firing

[dean.carrefour]

I have a pretty simple page.  I have an Ajax Manager, two Ajax Panels and a very few other controls outside of either panel.  In the top Panel, it is just two radio buttons.  Depending on which button is clicked, I want the bottom panel to hide or unhide using the panel's .visible property.  The default is hidden when the page loads.  I have  breakpoint in my code (VS2010) for the _CheckedChanged event of both radio buttons and when I click the radio buttons, neither one seems to fire these event.

All I want to do is show or hide the lower panel full of controls.


AjaxManger code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rbDonationTypeGeneral">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="rbDonationILMO">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Radio-button Panel: (that hides/unhides ILMO panel below)

<telerik:RadAjaxPanel ID="pnlDonationType" runat="server" height="59px"
    width="300px">
    <asp:RadioButton ID="rbDonationTypeGeneral"
        runat="server"
        Checked="True"
        GroupName="grpDonationType"
        Text="   General Donation" />
    <br />
    <asp:RadioButton ID="rbDonationILMO"
        runat="server"
        GroupName="grpDonationType"
        Text="   In Loving Memory Of..." />
</telerik:RadAjaxPanel>

ILMO Panel:  (this is the panel that hides or un-hides depending on which radio button is selected above)

<telerik:RadAjaxPanel ID="pnlILMO" runat="server" height="373px" width="717px" Visible="False">
    A charitable contribution has been made to the Foundation:
    <br />
    <br />
    <b>In loving memory of:</b>
        <telerik:RadTextBox ID="txtILMO_Name"
            Runat="server"
            Width="175px"
            Wrap="False">
        </telerik:RadTextBox>

    Cared for in (city):
        <telerik:RadTextBox ID="txtHospiceCity"
            Runat="server"
            Width="175px"
            Wrap="False">
        </telerik:RadTextBox>
        <br />
        By (donor):
        <telerik:RadTextBox ID="txtDonorName"
            Runat="server"
            Width="260px"
            Wrap="False">
        </telerik:RadTextBox>

    E-mail:
        <telerik:RadTextBox ID="txtDonorEmail"
            Runat="server"
            Width="246px"
            Wrap="False">
        </telerik:RadTextBox>
        <br />
        Phone:
        <telerik:RadMaskedTextBox ID="txtDonorPhone"
            runat="server"
            Mask="(###) ###-####"
            Width="80">
        </telerik:RadMaskedTextBox>

    Address:
        <telerik:RadTextBox ID="txtDonorAddress"
            Runat="server"
            Width="452px"
            Wrap="False">
        </telerik:RadTextBox>
        <br />
        City:
        <telerik:RadTextBox ID="txtDonorCity"
            Runat="server"
            Width="260px"
            Wrap="False">
        </telerik:RadTextBox>

    State:
        <telerik:RadComboBox ID="cmbDonorState"
            Runat="server"
            DataSourceID="USStates"
            DataTextField="name"
            DataValueField="abbreviation"
            MarkFirstMatch="True"
            Skin="Forest" Width="150px">
        </telerik:RadComboBox>

    Zip:
        <telerik:RadTextBox ID="txtDonorZip"
            Runat="server"
            Width="103px"
            Wrap="False"
            MaxLength="10">
        </telerik:RadTextBox>
        <br />
        <br />
        <br />
        <b>Please send an acknowledgement to:</b><br /> Name:
        <telerik:RadTextBox ID="txtAcknowledgement_Name"
            Runat="server"
            Width="622px"
            Wrap="False">
        </telerik:RadTextBox>
        <br />
        Address:
        <telerik:RadTextBox ID="txtAcknowledgement_Address"
            Runat="server"
            Width="608px"
            Wrap="False">
        </telerik:RadTextBox>
        <br />
        City:
        <telerik:RadTextBox ID="txtAcknowledgement_City"
            Runat="server"
            Width="260px"
            Wrap="False">
        </telerik:RadTextBox>

    State:
        <telerik:RadComboBox ID="cmbAcknowledgement_State"
            Runat="server"
            DataSourceID="USStates"
            DataTextField="name"
            DataValueField="abbreviation"
            MarkFirstMatch="True"
            Skin="Forest"
            Width="150px">
        </telerik:RadComboBox>

    Zip:
        <telerik:RadTextBox ID="txtAcknowledgement_Zip"
            Runat="server"
            Width="105px"
            Wrap="False">
        </telerik:RadTextBox>
    <br />
    <br />
    <br />
</telerik:RadAjaxPanel>

Event code of the radio buttons:

Protected Sub rbDonationTypeGeneral_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbDonationTypeGeneral.CheckedChanged
    pnlILMO.Visible = False
End Sub

Protected Sub rbDonationILMO_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbDonationILMO.CheckedChanged
    pnlILMO.Visible = True
End Sub

Can someone please tell me what I'm missing or doing wrong.  Thanks.

[Iana Tsolova]

Hi Dean,

For the server events to fire a postback should be performed. For that purpose you should enable postback for the radio buttons.

Additionally, note that to make sure a page would work properly with ajax, you should first make sure it works as expected without ajax.

I also suggest that you check out the below article for more information on how to ajaxify controls wrapped in RadAjaxPanel with RadAjaxManager:
http://www.telerik.com/help/aspnet-ajax/ajax-controls-in-ajaxpanel-and-ajaxsettings.html

Check it out and let me know if further issues arise.

Greetings,
Iana
the Telerik team

[dean.carrefour]

Ok, I read that document and removed the AJAX Panels and replaced them with ASP Panels.  It kinda works.  The top radio button is selected by default when the page loads and the large bottom panel is hidden.  When they select the bottom radio button, the large bottom panel becomes visible and works exactly like its supposed to.  But if they change their mind and select the upper radio button again, the lower panel remains visible when it should become hidden.

It never fires the event _CheckedChanged for the top radio button, but the lower button fires every time.  What gives?

[dean.carrefour]

I just removed my AjaxManager and it works fine.  Then I added the AjaxManager back in and it doesn't work.  I'm using v2011.1.313.40.

Here' s my AjaxManager Code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rbDonationGeneral">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="rbDonationILMO">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

[Iana Tsolova]

Hello dean,

Try modifying the ajax settings as below:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rbDonationTypeGeneral">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
                <telerik:AjaxUpdatedControl ControlID="rbDonationILMO" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="rbDonationILMO">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlILMO" />
                <telerik:AjaxUpdatedControl ControlID="rbDonationTypeGeneral" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Greetings,
Iana
the Telerik team