Advertisements
Home > Ajax > How to create a simple Ajax Collapsible Panel Extender in asp.net

How to create a simple Ajax Collapsible Panel Extender in asp.net


The collapsiblePanel is used to collapse and expand any web page content or controls inside asp.net panel control. Panel control will expand and collapse by using label control or linkbutton control. For clean collapse and expand use Label Control to target collapse and expand panel control.

Properties of CollapsiblePanelExtender

TargetControlID – the Panel to operate expand and collapse. Use Panel control as TargetControlID

Collapsed – It specifies that the object should initially be collapsed or expanded.

AutoCollapse – when it is property is True to automatically collapse when the mouse is moved off the panel. It is better to keep false for clean collapse

AutoExpand – when it is property is True to automatically expand when the mouse is moved over the panel. It is better to keep false for clean collapse

ScrollContents – True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.

ExpandControlID/CollapseControlID – The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click. ExpandControlID or CollapseControl ID use label control

CollapsedImage – It views the image assigned by image path of the ImageControlID when the panel is Collapsed

ExpandedImage – It views the image assigned by image path of the ImageControlID when the panel is expanded

ExpandDirection – It can be “Vertical” or “Horizontal” to determine whether the panel expands or collapse top-to-bottom or left-to-right.

Step by step process to create a simple ajax collapsible panel extender

Step1: Drag Script Manager from Toolbox Ajax Extensions first then drag Label control its id is lblRegister

<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" 
Font-Size="9pt" Text="Register"></asp:Label>

Step2: Drag Panel control inside panel control Design Register form with TextBoxs and button control.

<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox ID="txtEmailID? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>

Step3: Drag CollapsiblePanelExtender from Ajax control toolkit

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server">
</cc1:CollapsiblePanelExtender>
Explanation: The collapsiblePanelExtender will take action when 
user click Label (lblRegister) control then the register panel 
will collapse and to  expand also click label (lblRegister)
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? 
runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>

Remember: Target controls ID must be always Panel control. For Expand and Collapse ID is Label or LinkButton control

Complete code for CollapsiblePanelExtender Example

<asp:ScriptManager ID="ScriptManager1? runat="server"> </asp:ScriptManager>
<div style="width: 300px">
<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" Font-Size="9pt"
Text="Register" BackColor="#FFCC66?></asp:Label>
<br />
<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>EmailID</td>
<td><asp:TextBox ID="txtEmail? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>
<br />
</div>

Step4: Now Run the application you will observe Register (label control) by clicking this control User Registration form(Panel control) will collaspe to expand click same label control(Register).

To Remove ajax collapsiblepanel flicker

keep properties of

AutoCollapse = false
AutoExpand = false

in CollapsiblePanelExtender

Advertisements
Categories: Ajax Tags:
  1. Dhirendra Kumar
    November 22, 2011 at 11:21 am

    thanks buddy… nice article..

  2. DST
    May 17, 2012 at 4:27 am

    Very nice atcile and thanks for posting it online !

  3. July 14, 2012 at 11:56 am

    Hey There. I found your blog using msn. This is a
    really well written article. I’ll make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll certainly comeback.

  4. October 6, 2012 at 11:48 am

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get
    four emails with the same comment. Is there any way you can remove people from
    that service? Thank you!

  5. March 31, 2013 at 9:53 am

    Thanks for sharing your info. I really appreciate your efforts and I will be waiting
    for your next post thank you once again.

  6. May 11, 2013 at 4:44 pm

    After I originally left a comment I seem to have clicked the -Notify me when new comments are added-
    checkbox and from now on whenever a comment is added I recieve four emails with the
    exact same comment. Perhaps there is an easy method you can remove me from
    that service? Kudos!

  7. June 10, 2013 at 10:27 am

    spośród dostrzegł adoracja. Oto chyża finesse orzeczenie.
    – Wiecie, damy – Arnold wypatrywał na wysoko ukontentowanego.

    – Dobrze się stanie, w charakterze smok bezcześcić owo miejsce przestanie.
    Szanowny to gród, polubiłem go,

  8. June 21, 2013 at 3:51 pm

    Do you have a spam problem on this blog; I also am a blogger, and I was curious about your situation; we have developed some nice methods and we
    are looking to exchange solutions with others, be sure to shoot me an e-mail if interested.

  9. June 24, 2013 at 8:41 pm

    Its such as you read my mind! You seem to grasp so much about this, like you wrote the book in
    it or something. I believe that you just can do with some percent to
    power the message home a bit, but other than that, this is excellent blog.
    A great read. I’ll definitely be back.

  10. sagar
    July 24, 2013 at 11:41 am

    thanks its nice

  11. August 1, 2013 at 6:37 am

    Hi, this weekend is fastidious in favor of me, because this moment i am reading this impressive informative piece of writing here
    at my residence.

  12. January 23, 2014 at 2:47 am

    I really want to know why you called this specific
    post, “How to create a simple Ajax Collapsible Panel Extender in asp.net
    | Tuvian : Discussion forum for ASP.Net,C#,Ajax,JQuery,JavaScript,HTML,CSS..”.

    Regardless I appreciated it!Thanks for the post-Genesis

  13. February 3, 2014 at 8:02 pm

    The Sims 4 is the highly predicted daily life simulation sport that lets
    you perform with life like in no way just before. Generate new Sims with intelligence and emotion, whose each and every action is educated and afflicted
    by their interactions and emotional states. Knowledge all new intuitive and exciting imaginative tools.

    Sculpt your Sims in Generate A Sim and construct special houses
    with the tactile space-based Develop Mode. Control
    the mind, entire body, and heart of your Sims with dynamic, emotion-prosperous gameplay, and provide your stories to existence.

  14. October 9, 2014 at 3:33 pm

    I love what you guys tend to be up too. This type of clever work
    and coverage! Keep up the terrific works guys I’ve incorporated you guys
    to my own blogroll.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: