Working with CollapsiblePanelExtender

I hope it would be use full for beginner. It is very simple and effective control of ajax.

Let Start with Collapsible Panel Extender.

First register ajax assembly in your page like I have added below.

 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

Second step is we need to add one “ScriptManager” in our page.

 It would be only one, means if it has been added in master page then we don’t need to add in our page or user control.

 <asp:ScriptManager

       runat="server" ID="script1" >

</asp:ScriptManager> 

Now from here we are adding our Collapsible panel extender, like below i have added in my page.

    <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"

       runat="server"

       TargetControlID="PannelFieldsList"

       ExpandControlID="PanelHiddenFieldsList"

       Collapsed="true"

       CollapseControlID="PanelHiddenFieldsList">

    </ajaxToolkit:CollapsiblePanelExtender> 

Now here we need some explanations , so I am giving one by one

ID: - This is the id of collapsible panel extender by which we can identify our control.
TargetControlID:-  We give id of that panel which we want to collapsible . 
                                      like I have given “PannelFieldsList”.

ExpandControlID:- We give id of control by which clicking we can see target. Like I have given id “PanelHiddenFieldsList” so clicking on this id I can see target.

Collapsed:-  we can choose one option collapsed or not . If we give value as true then it will be hidden at load time

 CollapseControlID:-  we give the id of that control by which clicking target control collapse . Because I want to collapse target control on click on same control so both having same control id.

Now bellow I have code for showing magic of collapsible panel

<table >   

   <tr>

      <td align="left" valign="top" colspan="1">

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

                <div>

                    Click here
                </div>

            </asp:Panel>

        </td>

        <td align="left" valign="top" >

           <asp:Panel ID="PannelFieldsList" runat="server" Visible="true">

              <asp:CheckBoxList

                     ID="CheckBoxListFields"

                     runat="server"                

                     BorderStyle="Solid" 
                     BorderColor="Blue" 
                     BorderWidth="1px">

               <asp:ListItem >Solid</asp:ListItem>

                    <asp:ListItem >Dotted</asp:ListItem>

                    <asp:ListItem >Double</asp:ListItem>

                </asp:CheckBoxList>

                <asp:Button ID="ButtonSaveSetting" runat="server"

                  Text="SaveSetting" Width="96px" />

            </asp:Panel>

        </td>  

</tr>

</table>