CODEWITHSUNDEEP
ajaxupdatepanelajaxcontroltoolkitaccordion
Jini Thakker
Jini Thakker

Reputation: 23

C# Asp.net Ajaxcontroltoolkit multiple Accordion Panels. Show or Hide last panel if a checkbox is selected in first panel

<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server"> 
<Panes>   
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
    <Header><b>Panel 1</b></Header>
      <Content>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>          
            <br>
            Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True"/><br>
            Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
            <asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
            runat="server"/><br>
            <asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>                
        </ContentTemplate>
        </asp:UpdatePanel>
        </Content>
    </ajaxToolkit:AccordionPane>

    <ajaxToolkit:AccordionPane ID="Pane2" runat="server">
        <Header><b>Panel 2</b></Header>
        <Content>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>                    
                <br>
                <asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/><br>
                <asp:button ID="Button2" text="Submit" onclick="Button2_Click"
                runat="server"/><br><br>
                <asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
            </ContentTemplate>
            </asp:UpdatePanel>
        </Content>
    </ajaxToolkit:AccordionPane>
    </Panes>


protected void Button1_Click(object sender, EventArgs e) {
        if (Attorney.Checked) {
            Pane2.Visible = true;
        } else {
            Pane2.Visible = false;
        }
        //Message1.Text = Age1.Text;
    }

I have five Accordion Panels. Last Panel should be displayed only if a checkbox is checked in the first panel. Inside each Accordion Panel I have a UpdatePanel and within that I have ContentTemplate with controls and submit button particular to that accordion panel. The reason I added UpdatePanel is so that when i update a particular panel it does not affect other accordion panels.

The problem is I need to toggle last accordion panel display depending upon if a checkbox is checked in the first Panel and submit button is clicked. In Code behind, in the btnSubmit1 event...I have code that says if checkbox is checked....Pane2.Visible = true else Pane2.Visible=false. For some reasons it still shows the LastPanel.

I am not sure where am I going wrong...please advise!

Thanks! Jini

Upvotes: 0

Views: 3473

Answers (2)

user2525252
user2525252

Reputation: 31

I fixed the problem by adding an outer update panel...and removed the updatepanel for Panel 2. Haven't tested it thoroughly but so far looks good.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="OuterPanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" 
HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server"> 
<Panes>   
    <ajaxToolkit:AccordionPane ID="Pane1" runat="server">
    <Header><b>Panel 1</b></Header>
      <Content>            
            <br>
            Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True" /><br />
            Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
            <asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
            runat="server"/><br>
            <asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>                                                            
        </Content>
    </ajaxToolkit:AccordionPane>        
    <ajaxToolkit:AccordionPane ID="Pane2" runat="server">
        <Header><b>Panel 2</b></Header>
        <Content>                            
                <br>
                <asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/>&nbsp;&nbsp;
                <asp:button ID="Button2" text="Submit" onclick="Button2_Click"
                runat="server"/><br><br>
                <asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />                
        </Content>
    </ajaxToolkit:AccordionPane>
    </Panes>
 </ajaxToolkit:Accordion>
</ContentTemplate>

Upvotes: 1

Garrison Neely
Garrison Neely

Reputation: 3289

I'd like to see your code to be sure, but I'm expecting it's because you have an UpdatePanel in each of the AccordionPanels. Once an event happens in one UpdatePanel, ASP.NET will not run code handling that event that is attached to another UpdatePanel.

First, I'd take out all UpdatePanels to see if your code works as expected. Then, I'd add one UpdatePanel wrapped around the entire Accordion and see if your code still works.

If you really decided you need to have 5 UpdatePanels, look into the <Triggers> portion of the UpdatePanel. You'll be able to provide the CheckBox's ID to force the other associated UpdatePanel to PostBack.

Upvotes: 0

Related Questions