How to add collapsiblepanelextender ajax control in Aspnet

First,open the Microsoft Visual Studio 2008

Next,Select a New web Application and click Ok button

Next,Drag and Drop two panels from toolbox in to Default.aspx






Next,Come to source Page and add one image in panel one(see the below code)

<asp:panel _moz-userdefined="" id="Panel1" runat="server" style="cursor: pointer;">
<asp:imagebutton _moz-userdefined="" id="ImageButton3" imageurl="~/images/search_icon.gif" runat="server">
</asp:imagebutton> </asp:panel>

Next,come to panel2 and add one grid view and bind the data(see the below code)

<asp:panel _moz-userdefined="" id="Panel1" runat="server" style="overflow: hidden;"></asp:panel>
<asp:gridview _moz-userdefined="" cellpadding="4" forecolor="#333333" id="GridView1" runat="server"></asp:gridview>

Next,add the collapsiblepanelextender and properties like this

<cc1:collapsiblepanelextender collapsecontrolid="Panel1" collapsed="True" collapsedimage="~/images/search_icon.gif" collapsedtext="Collapse" expandcontrolid="Panel1" expanddirection="Vertical" expandedimage="~/images/search_icon.gif" expandedtext="Expand" id="Collapsiblepanelextender2"  runat="Server" suppresspostback="true" targetcontrolid="Panel2">
</cc1:collapsiblepanelextender>

Finally,Execute it and see the ouput in Browser...


Happy Coding...

About the Author

Sayyad is a Software Engineer, Blogger and Founder of Developers Code from India.His articles mainly focus on .Net (Web and Windows based applications), Mobile Technologies (Android,IPhone,BlackBerry) and SEO.

Reach Him :

Google+

Facebook

Twitter

Pinterest