I haven’t been really keen on using the AJAX features within .NET to date. I had been using the XMLHTTP feature in IE for years and just didn’t see the need. However, the other day I had a need to collapse some data within a ListView and I really didn’t want to figure out how to render the script properly to do this (read: I wanted to do something easy). The ListView is control that is deserving of its own post as it gives complete control over how HTML is rendered, a big change from some of the other data controls that have shipped earlier in .Net. There are plenty of examples on how to use the ListView control on the web. However, when it came to the CollapsiblePanelExtender control, I had a bit of trouble finding any good examples. After spending about an hour with the CollapsiblePanel I feel there are some basic usage rules missing on the control’s website. The properties of the control are well documented, but I really needed to know how to wire the control up. Essentially I wanted this:

Show:

[-] My Items

Here is the data I want to hide and show.

Hide:

[+] My Items

It turns out the simple way to get it setup is to use a Panel for the data you want to hide, AND a panel to host the label that you want to control the show and hide functionality. In addition, you need a style to change the cursor when the user hovers over your label. So it would look something like this:

<style type="text/css">
    .ExpanderLabel {cursor:pointer;}
</style>
<cc1:CollapsiblePanelExtender ID="MyPanelExtender"
    runat="server" TargetControlID="MyItemsPanel"
    CollapsedText="[+] My Items"
    ExpandedText="[-] My Items"
    TextLabelID="MyItemsPanelLabel"
    ExpandControlID="MyItemsPanelControl"
    CollapseControlID="MyItemsPanelControl"
    SuppressPostBack="true"/>
<asp:Panel ID="MyItemsPanelControl" runat="server">
    <asp:Label Width="100%"
        CssClass="MyItemsPanelLabel"
        ToolTip="Click to Show/Hide this section"
        ID="MyItemsPanelLabel" runat="server" />
</asp:Panel>
<asp:Panel ID="MyItemsPanel" runat="server">
    Here is the data I want to hide and show.
</asp:Panel>

 

So the CollapsablePanelExtender references a TargetControlID which contains the actual data I want to hide. It also references the ExpandControlID and the CollapseControlID which I wanted to be the same. The last set of references is to the TextLabelID, CollapsedText and ExpandedText. This set controls the text that will be shown as a title bar for the data section.

Copyright © Scott P. Rudy 2009 All Rights Reserved