I am currently using an Accordion that is databound to a DataSet. I want to make the Accordion render only partially. For example, it loads all of the headers for the accordion. When a header is clicked on and the body is expanded the content section is then populated from the server. Therefore if a user never clicks on a specific accordion pane then the content for that pane is never queried and transmitted saving the time and resources on pulling unneeded data.

 This seems like a common problem and wanted to how other people have accomplished this.
 
Thanks,
  Josh
 

Hi Joshuakent,

When first databind, you can add a Panel to each AccordionPane's <Content> template. Inside the Panel is a loading gif.  Also you should add an UpdatePanel outside of the Accordion with an Panel named UPPanel. When click on the Accordion, a javascript will be fired.  This javascript function will first force the Panel which is inside the current AccordionPane to show the loading gif.    Then refresh the UpdatePanel to get its desired content by clicking a hidden control inside the UpdatePanel.  Now, use javascript to replace the loading gif with the content inside UPPanel.    For example,

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Accordion.xml" XPath="root/menu">
        </asp:XmlDataSource>
        <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" FadeTransitions="false"
            FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false"
            SuppressHeaderPostbacks="false" DataSourceID="XmlDataSource1">
            <HeaderTemplate>
                <div style="width: 100%;" onclick="getShowContent(ContentPanel's ClientID)">       <!-- see my sample here.-->
                    <%#XPath("@title")%>
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <asp:Panel ID="ContentPanel" runat="server">
                    <asp:Image ID="LoadingGif" runat="server" />
                </asp:Panel>
            </ContentTemplate>
        </ajaxToolkit:Accordion>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="UPPanel" runat="server">
                       //get ContentPanel's desired content here after updated.
                </asp:Panel>
                <asp:Button ID="btnUpdate" runat="server" Text="Button" style="display:none;visibility:false"/>
            </ContentTemplate>
        </asp:UpdatePanel>
        <script type="text/javascript" language="javascript">
            var destPanel = ""
            function getShowContent(panelID){
                destPanel = panelID; 
                // add an image and set its src to loading gif
                //refresh the UpdatePanel
                $get("<%= btnUpdate.ClientID%>").click();
            }
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender,args){
               $get(destPanel).innerHTML = $get(UPPanel).innerHTML;
            }

        </script>

 Best regards,

Jonathan