Thursday, January 27, 2011

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">

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.

Labels: , , , , ,


At April 25, 2011 at 7:58 PM , Anonymous Anonymous said...

Thanks for sharing


Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home