How to use AjaxControlToolkit’s CollapsiblePanelExtender Control

Now a days , web development is no more boring and tough(at least creating good UI web pages) . AjaxControlToolkit is  new sensation in the web development . 

In this post and some upcoming posts ill be sharing  “HOW TO ”  explaination of these controls  available in AjaxControlToolkit.

Todays we will  discuss how to use   “CollapsiblePanelExtender” of AjaxControlToolkit.

Steps:

(1) Add AjaxControlToolkit.dll to your toolbox so that you can access all the controls of it .

(2) Now create a new web project in your VS . 

(3) Add a Panel control on the page and add your contents in to it . Set its ID =Panel1

(4) Add  CollapsiblePanelExtender  control from AjaxControlToolkit toolboxlist which we just added in step 1.

i.e

  <cc1:CollapsiblePanelExtender ID=”Panel3_CollapsiblePanelExtender” 
                runat=”server” Enabled=”True” TargetControlID=”Panel3″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  CollapsedText=”Expand” ExpandedText=”Collapse” AutoCollapse=”true”>
            </cc1:CollapsiblePanelExtender>

  <cc1:CollapsiblePanelExtender ID=”CollapsiblePanelExtenderanel1″      runat=”server” Enabled=”True” TargetControlID=”Panel1″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  >            </cc1:CollapsiblePanelExtender>

 

 

(5)  Create a hyper link or any button or any  control from tool box , which you want to use to collapse and Expand the panel . I am using here a Hyperlink control .

 <asp:HyperLink ID=”hl” runat=”server” Text=”Cpllapse”></asp:HyperLink>

(6 ) Now press F5  and clcik on the Hyperlink on hte page .  It will expand the panel and clicking again  on it will collapse it . 

Note : Adding Script Manager control is mandatory to use  this toolkit’s control

thus we  can place many panels on our page and add CollapsiblePanelExtender  control to them . 

Enjoy 🙂

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s