Wednesday, March 18, 2009

CollapsiblePanelExtender Height with data controls

I recently ran into a problem where I need to use the AjaxControlToolkit CollapsiblePanelExtender to contain a GridView. The CollapsiblePanelExtender is inside an UpdatePanel and items can be added to the table that drives the GridView within the CollapsiblePanelExtender. After a new item was added to the SQL table and then databound to the GridView, the CollapsiblePanelExtender height would not adjust to account for the new rows.

This problem was driving me nuts until I found the answer in the ASP.NET Forums. All you need to do is wrap your databound control(s) in an asp:Panel or Div with the following style attribute:

style="overflow: hidden;"

Adding that tag will take care of the problem and the CollapsiblePanelExtender will adjust to the proper height.

Example:

<asp:UpdatePanel ID="clpsUpdatePanel" runat="server" UpdateMode="Conditional">


    <ContentTemplate>


        <asp:Panel ID="pnlTitle" runat="server">


            <div style="padding: 1px; cursor: pointer; vertical-align: middle;">


                <h1>


                    This is my collapsible panel title


                    <asp:Image ID="collapseImage" runat="server" SkinID="TipGreen" />


                </h1>


            </div>


        </asp:Panel>                      


        <!--Panel with style="overflow: hidden;" will ensure the CollapsiblePanelExtender will display 


            the contents of a databound control after PostBack -->


        <asp:Panel ID="pnlDataBoundControl" runat="server" Height="100%" style="overflow: hidden;">


            <asp:GridView ID="grdvwExcludedAffiliates" 


                  runat="server" 


                  AutoGenerateColumns="True" 


                  DataSourceID="odsMyData" >


            </asp:GridView>


            <asp:ObjectDataSource ID="odsMyData" 


                runat="server" 


                OldValuesParameterFormatString="original_{0}" 


                SelectMethod="GetMyData" 


                TypeName="BusinessLogic.MyLogic">


                <SelectParameters>


                    <asp:Parameter DefaultValue="0" Name="Id" Type="Int32" />


                </SelectParameters>


            </asp:ObjectDataSource>


            <asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="clpsUpdatePanel">


                <ProgressTemplate>


                    <asp:Image ID="prgImage" SkinID="Spinner" runat="server" />


                </ProgressTemplate>


            </asp:UpdateProgress>


        </asp:Panel>


        <ajaxToolkit:CollapsiblePanelExtender ID="pnlExtender" 


            runat="Server"


            TargetControlID="pnlDataBoundControl" 


            ExpandControlID="pnlTitle" 


            CollapseControlID="pnlTitle"


            Collapsed="False" 


            ImageControlID="collapseImage"  


            ExpandedImage="~/Images/arrowdown.gif" 


            CollapsedImage="~/Images/arrow.gif"


            SuppressPostBack="false" />


    </ContentTemplate>


</asp:UpdatePanel>




- Aaron Schnieder

http://www.churchofficeonline.com

3 comments:

Pravesh Singh said...

This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url....

Ajax Toolkit CollapsiblePanelExtender Control in ASP.Net

Thanks

Thanks

Anonymous said...

I was facing the same trouble in couple of places in my project and I was stuck until I posted it on MSDN and they gave me link of this article and it was just like magic.

Thanks,
Attiqe

Anonymous said...

Awesome Thanks. saved my time.. Asp.net ajax control lot of bugs.......