How to insert a UserControl inside Accordion in asp.net?

Question

I have a user control that looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProfileGroupComponent.ascx.cs" Inherits="Reports.Controls.ProfileGroupComponent" %>

<ajaxToolkit:AccordionPane ID="accordionPane" runat="server">
    <Header>
        <asp:Table ID="Table1" runat="server">
            <asp:TableHeaderRow  runat="server">
                <asp:TableHeaderCell>
                    <asp:Label ID="lblHeader" runat="server">
                </asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                    <asp:Label ID="Label3" runat="server" Text="Frecuency: "></asp:Label>
                    <asp:Label ID="lblFrecuency" runat="server"></asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                    <asp:Label ID="Label7" runat="server" Text="Nxt Invoice Dt: "></asp:Label>
                    <asp:Label ID="lblNxtInvoiceDt" runat="server"></asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                   <asp:Label ID="Label9" runat="server" Text="Not Consolidated:"></asp:Label>
                    <ajaxToolkit:ComboBox ID="cmbNotConsolidated" runat="server" AutoCompleteMode="Suggest"></ajaxToolkit:ComboBox>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                     <asp:Button ID="btnPayorDetails" runat="server" Text="Payor Details" OnClick="btnPayorDetails_OnClick"/>
                </asp:TableHeaderCell>
            </asp:TableHeaderRow>
        </asp:Table>
    </Header>
    <Content>
        <asp:BulletedList ID="bltListDeitals" runat="server">

        </asp:BulletedList>
    </Content>
</ajaxToolkit:AccordionPane>

with that said I have a page with an accordion inside

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                    HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                    FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"
                    RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="1880">
                    <Panes>
                        <uc1:ProfileGroupComponent runat="server" ID="ProfileGroupComponent" />
                    </Panes>
                </ajaxToolkit:Accordion>

I am trying to insert the UserControl inside Panes tag, but the page doesn't render it, instead I am getting an error:

Parser Error Message: AjaxControlToolkit.AccordionPaneCollection must have items of type 'AjaxControlToolkit.AccordionPane'. 'uc1:ProfileGroupComponent' is of type 'ASP.controls_profilegroupcomponent_ascx'.

The idea behind is adding multiple panes dynamically, but with a consistent UI where I can edit the control and change the look and feel. Is there any safe way to do it?

Answer 1

The error message indicates that AccordionPanes expects a collection of AccordionPane items, not your custom user control.

There are a couple of possible ways to resolve this issue.

1. Make your Accordion control part of your ASCX control. One good thing about this approach is that you no longer have to break Accordion control itself down into multiple pieces, which I think is kinda awkward to do so in the first place. You then can use the Accordion right inside your own ASCX control.

2. Change the markup code of your ASPX page and ASCX control. By doing this, you will need to move AccordionPane item template to your ASPX page and make your ASCX as a content control only. You can also try to create a header content ASCX control if there's a need for reusing it somewhere else in your application. So in the end, it comes down to something like this.

Example:

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="1880"> 
     <Panes>
          <asp:AccordionPane ID="AccordionPane1" runat="server">
             <Header><uc1:HeaderCtrl runat="server" ID="myHeader" /></Header>
             <Content><uc1:ContentCtrl runat="server" ID="myContent" />
             </Content>
          </asp:AccordionPane>   
     </Panes>
</ajaxToolkit:Accordion>

3. Consider dynamically adding AccordionPane in the code behind. This is certainly a bit more challenging to do because you are expected to write more code. But more power to you if you have relatively complex logic to determine how Accordion should be rendered on the page.

You can take a look at this link for more details about this technique:
https://www.asp.net/web-forms/overview/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-cs