How to use Ajax CollapsiblePanelExtender control on Asp.net OR Ajax CollapsiblePanelExtender control Example - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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:

 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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon