A Day Out with AJAXToolKit’s CollapsiblePanelExtender

Last Week I was assigned a task to add Collapse/Expand animation to some portion of an ASP.NET User Control in my project. At that time I never thought, even remotely, that this simple stuff is going to be such a big nightmare for me. Things went bad in all possible way they can. 😦

Creating an Collapse/Expand effect in ASP.NET is quite simple You use AJAXToolKit’s CollapsiblePanelExtender, specify Header, Content panes and few properties and you are done. I did the same thing.

Following is the code I wrote for the initially, where I had a Header block named pnlWelcomeHeader for the header part of the Collapsible Panel containing just a single ASP Label control for displaying some header text, a Content block named pnlWelcomeContent containing another ASP Label for displaying a welcome message text to the user and finally an AJAXToolKit’s CollapsiblePanelExtender with all its properties defined.

   1: <%-- Welcome text Panel Header HTML  --%>

   2: <asp:Panel ID="pnlWelcomeHeader" runat="server" >

   3:      <table width = "100%">

   4:          <tr>

   5:               <td >

   6:                     <asp:Label ID="lblWelcomeHeader" Text="Welcome" runat="server"/>

   7:                      <asp:Image ID="_imageCollapse2" runat="server" ImageUrl = "~/images/icons/expand.gif" />        

   8:                </td>

   9:            </tr>

  10:      </table>

  11: </asp:Panel>

  12:  

  13: <%-- Collapsible Panel Extender--%>

  14: <asp:Panel ID="pnlWrapper" runat="server" SkinID="CollapsibleGenericContent">

  15:         <ajaxToolkit:CollapsiblePanelExtender ID="cpeWelcome" runat = "server" CollapseControlID="pnlWelcomeHeader" 

  16:              ExpandControlID ="pnlWelcomeHeader" TargetControlID = "pnlWelcomeContent" CollapsedSize="0" ImageControlID="_imageCollapse2" 

  17:             AutoCollapse = "false" AutoExpand="false" Collapsed="true" ExpandDirection = "Vertical" SuppressPostBack = "true" 

  18:             ExpandedImage ="~/images/icons/collapse.gif" CollapsedImage = "~/images/icons/expand.gif"> 

  19:         </ajaxToolkit:CollapsiblePanelExtender>

  20:  

  21:         <%-- Welcome text Content Panel HTML  --%>

  22:         

  23:         <asp:Panel ID="pnlWelcomeContent" runat="server">

  24:                   <asp:Label ID="welcome_msg" Text="Welcome" runat="server" />            

  25:         </asp:Panel>

  26: </asp:Panel>

But when I tried to run the website and test my code, I was amazed to see some weird behavior. Even when the Collapsed property of the extender was set to true, the panel was in expanded mode. On click of the Header block, the Extender is suppose to expand/Collapse the Content Panel but in my case it was not doing it. instead it appeared to do the expand/collapse animation i.e. on click of the header block the panel collapses but then suddenly it expands. The text in Header block was displayed correctly i.e. it shown “Show Details” when collapsed and “Hide Details ” when it was expanded.

   After lots of head scratching and googling :), I found out the solution for this problem but not the reason why this weird thing is happening to me. Solution was to use “position:absolute” in the content block. So I wrapped a <DIV> tag around the welcome_msg ASP Label and applied this style to to that DIV and my Collapse/Expand not working problem was solved.

   1: <%-- Welcome text Content Panel HTML  --%>

   2: <asp:Panel ID="pnlWelcomeContent" runat="server">

   3:    <div id="_wrapperwelcome" style="border:solid 1px #ccc; position:absolute; width:100%;" runat="server">

   4:              <asp:Label ID="welcome_msg" Text="Welcome" runat="server" />            

   5:     </div>   

   6: </asp:Panel>

The DIV inside the panel in the abode code snippet did the trick. But this was just the beginning. Now the second thing I wanted to do with the collapsible panel was to show it in expanded mode first time when the page loads. but event after setting Collapsed property of the extender to false, it didn’t work out. 😦

Again after searching here and there got a solution for it but not the reason… Solution was to expand the panel in Page’s Code behind.

   1: cpeWelcome.ClientState = "false";

   2: cpeWelcome.Collapsed = false;

Now my collapsible panel was in expanded mode on page load.. Thank God…. But now I wanted to set the expand size for the collapsible panel so that when the content exceeds that length my panel starts scrolling.. Did I am asking too much from the collapsiblepanel 🙂

   1: ExpandedSize="250" // This is the property in extender that decides the maximum size

and here comes a much weird situation, now the collapsible panel didn’t expand at the page load but on the aspx page it occupies the blank space equal to its height i.e. in my case 250px and once it click on the header to collapse it the content of the panel gets displayed and then it collapses. that means it was just not working for the first time it loads and after that it works great.

After some hits and trials I wrote some dirty JavaScript code that fires the collapse/expand onclick event for the panel so that the Panel in shown in correct mode on page load.

   1: /* On ASPX page*/

   2:  

   3: function pageLoad(sender, args)

   4: {

   5:       //Following code is for expanding the Welcome Panel on Page Load

   6:      var objExtender = $find("<%=cpeWelcome.ClientID%>");

   7:      try{objExtender._doClose();}catch(e){}  // Collapse it

   8:      try{objExtender._doOpen();}catch(e){}  // expand it

   9: }

  10:  

  11: cpeWelcome.BehaviorID = cpeWelcome.ClientID; // In page code behind

So finally after all this my task was done…. 🙂

If anyone of you gets into this situation and finds a solution for this please do ping me pack..