How to use Ajax CollapsiblePanelExtender control on Asp.net OR Ajax CollapsiblePanelExtender control Example

Introduction: In this article I will try to explain how we can use the Ajax CollapsiblePanelExtender in Asp.net.

Description:

In the last article I have explained How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example, How to useAutoCompleteExtender Ajax control in Asp.net, How to use TabContainer AjaxControl in Asp.net and How to use Ajax FilteredTextBoxExtender control in Asp.net OR Ajax FilteredTextBoxExtender Example.

 We use CollapsiblePanelExtender to create collapsible panel i.e. click on down arrow panel will expand and click on up arrow will collapse automatically. CollapsiblePanelExtender Properties:

TargetControlID: Panel ID to expand and collapse

CollapseControlID: ID used to collapse on click

ExpandControlID: ID used to expand on click

CollapsedImage: path of image used by ImageControlID when the panel is collasped

ExpandedImage:  path of image used by ImageControlID when the panel is expand

TextLabelID: ID of the label where STATUS TEXT for the panel will be placed.

CollapsedText: text to show in control specified by TextLabelID when panel is collapsed

ExpandedText: text to show in control specified by TextLabelID when panel is expand

Collapsed: specifies that object should initially be colasped or expanded

ImageControlID: ID of image control where icon indicating the collapsed status of the panel. Extender will replace the image source with CollapsedImage and ExpandedImage.

AutoCollapse: automatically collaspe when mouse is moved over the panel. Automatically it’s true

AutoExpand: automatically expand when mouse is moved over the panel. Automatically it’s true

Add a webform to project. Drag and drop the control from Toolbox and design .aspx page as mention below:

<asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <asp:Panel ID="pnl1" runat="server" Width="350px">

       <div style="font-weight: bold; background-color: #c2e4f0;">

            <table width="100%">

                <tr>

                    <td align="left">

                    Click Here to Check Result                      

                    </td>

                    <td>

                    <asp:Label runat="server" ID="textLabel" />

                    </td>

                    <td align="right" width="10px">                    

                        <asp:Image ID="Image1" runat="server" />

                    </td>

                </tr>

            </table>

        </div>

        </asp:Panel>

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

      <div>

            <table border="1px solid" width="26%">

                <tr valign="top">

                    <td align="left">

                       <b>Student Name</b>

                    </td>

                    <td align="center">

                    <b>Class</b>

                    </td>

                    <td align="right"><b>Result</b></td>

                </tr>

                <tr>

                <td>John</td>

                <td>BCA Ist Year</td>

                <td>Pass</td>

                </tr>

                <tr>

                <td>Davis</td>

                <td>MCA Final</td>

                <td>Pass</td>

                </tr>

                <tr>

                <td>Brand Pitt</td>

                <td>B.Tech. 5th SEM</td>

                <td>Fail</td>

                </tr>

                <tr>

                <td>Katrina</td>

                <td>MCA 1st Year</td>

                <td>Pass</td>

                </tr>

            </table>

        </div>

        </asp:Panel>

        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pnl2" CollapseControlID="pnl1" ExpandControlID="pnl1" CollapsedImage="~/Images/downarrow.jpg"

ExpandedImage="~/Images/uparrow.jpg" TextLabelID="textLabel" CollapsedText="Show" ExpandedText="Hide"  Collapsed="true" ImageControlID="Image1" AutoCollapse="False"

    AutoExpand="False">

        </asp:CollapsiblePanelExtender>

Now run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.