ASP.Net CollapsiblePanelextender Control

Question

Afternoon All,

I am wonding if i can configure and use a collapsiblePanelextender in ASP.net within a table. I would likt this to be used for a minutes of meeting system that i am creating. I have the following code and thought that if i added pnlPresenter and pnlTime to the CollapseControlID along with pnlHeader i would be able to get this to work but i cant.

Has anyone got any other suggestions?

 <table width="100%">
    <tr>
           <td class="style3">Topic</td>
            <td class="style2">Presenter</td>
            <td>Time Alloted</td>
    </tr>
    <tr >
           <td class="style1" colspan="3">
            <asp:Panel ID="pnlHeader" runat="server" CssClass="cpHeader" Width="228%" Height="18px">
                1.   Agenda Item 1
            <asp:Image ID="ImgToggle" runat="server"  ImageUrl="~/Images/collapse.jpg" ImageAlign="Middle" />
            </asp:Panel>
            </td>
     </tr>
     <tr>
            <td class="style3">
            <asp:Panel ID="pnlInfo" runat="server" CssClass="cpBody" >
                The Agenda topic details goes within here, The Agenda topic details goes within here, 
                The Agenda topic details goes within here, The Agenda topic details goes within here,.
            </asp:Panel>
            </td> 
            <td class="style2"> 
            <asp:Panel ID="pnlPresenter" runat="server" CssClass="cpBody" Width="107px">
                Presenters Name
            </asp:Panel>
            </td>
            <td class="style2"> 
            <asp:Panel ID="pnlTime" runat="server" CssClass="cpBody" Width="107px">
                Time
            </asp:Panel>
            </td>
      </tr>
</table>

Many Thanks in advance

Regards Betty

Answer 1

It's not entirely clear what you want to achieve here, especially as there's no CollapsiblePanelExtender in the markup you've posted, so I'm writing this on the assumption that you want to display a page for a meeting where each agenda item is expandable/collapsible.

I suggest you build your table using a Repeater instead of hard-coding it into your page, then for each agenda item the Repeater can render a new row for you. Inside the row that's rendered by the Repeater, you can then have the agenda topic as a header, and the agenda item details as a panel that's expanded/collapsed using the extender:

<asp:Repeater runat="server" ID="AgendaRepeater" DataSourceID="AgendaDataSource">
    <HeaderTemplate>
        <table border="1">
            <tr>
                <td>
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label runat="server" ID="AgendaTopicLabel" Text='<%# Eval("Topic") %>' />
                <asp:ImageButton runat="server" ID="PanelExpandContractImageButton" ImageUrl="~/images/zoom_in_16x16.gif" />
                <asp:Panel runat="server" ID="AgendaItemDetailsPanel" Height="0px">
                    <asp:Label runat="server" ID="TopicDetailsLabel" Text='<%# Eval("Details") %>' /><br />
                    <asp:Label runat="server" ID="PresenterLabel" Text='<%# Eval("Presenter") %>' /><br />
                    <asp:Label runat="server" ID="TimeLabel" Text='<%# Eval("Time") %>' />
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="AgendaItemDetailsPanel"
                        Collapsed="true" ExpandControlID="PanelExpandContractImageButton" CollapseControlID="PanelExpandContractImageButton"
                        ImageControlID="PanelExpandContractImageButton" CollapsedImage="~/images/zoom_in_16x16.gif"
                        ExpandedImage="~/images/zoom_out_16x16.gif" ExpandedSize="100" ExpandDirection="Vertical"
                        ScrollContents="true" />
           </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>