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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget