not able to control ajax collapsible panel control

Question

0.00/5 (No votes)

See more:

Page looks like this and also I have pasted the required AjaxControlToolkit.dll file into bin folder but still ajax not working!!!

XML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Collapsible Panel Example</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<asp:Panel ID="pnlClick" runat="server" >
<div style="height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 0 0">
Collapsible Panel
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCollapsable" runat="server" Height="0" >
<table align="center" width="100%">
<tr>
<td></td>
<td>
<b>Registration Form</b>
</td>
</tr>
<tr>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"/>
</td>
</tr>
<tr>
<td></td>
<td align="left" >
<asp:Button ID="btnsubmit" runat="server" Text="Save"/>
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
<ajax:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="downarrow.jpg"
ExpandedImage="uparrow.jpg"
ExpandDirection="Vertical"
TargetControlID="pnlCollapsable"
ScrollContents="false">
</ajax:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>

Posted 31-Jan-12 21:42pm

07navneet

Add a Solution

Comments

07navneet 13-Feb-12 5:28am

ajax is not running on my PC but the same code works fine in my friend's laptop! Both of us have got ajaxcontroltoolkit.dll(3.5.11119.0)

thatraja 14-Feb-12 3:36am

What's the error message? Check it in firefox error console & do let me know

07navneet 14-Feb-12 4:28am

no error message!!

07navneet 14-Feb-12 4:28am

no error message!!!

4 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Martin Arapovic · Answer 1 · 2012-01-31T22:16:00

Solution 1

Hi,

As I can see your example must work.

Only thing why you cant see your "panels" is because of text style which is set to White and in combination with white background they are not visible on screen...

Remove

CSS

color: White;

from div elements and then try...

Posted 31-Jan-12 22:16pm

Martin Arapovic

Comments

07navneet 1-Feb-12 4:38am

still the same problem!!!

Al Moje · Answer 2 · 2012-01-31T22:22:00

Solution 2

Hi,

Try this it should be working...

HTML

]]>
]]>

Posted 31-Jan-12 22:22pm

Al Moje

Comments

Martin Arapovic 1-Feb-12 4:24am

Yes, I forget to add that. Tag prefix declaration must be added in page or in web.config. :)

07navneet 1-Feb-12 4:33am

@martin-cud u explain a bit more?

Al Moje · Answer 3 · 2012-01-31T22:28:00

Solution 3

Hi,

By first submition has an error...
Try this if could help...

HTML

]]>
]]>

Posted 31-Jan-12 22:28pm

Al Moje

Comments

07navneet 1-Feb-12 4:34am

sorry! doesnt effect!!

Al Moje 1-Feb-12 4:34am

I tried to submit all solution but ecountered server error:
I think you should change white color to either blue:
example:
<asp:ScriptManager ID="ScriptManager1" runat="server">

<div>
<asp:Panel ID="pnlClick" runat="server" ForeColor="#66CCFF">
<div style="height: 30px; vertical-align: middle; color: #FFFFFF; background-color: #66CCFF;">
<div style="float: left; padding: 5px 5px 0 0">
Collapsible Panel
</div>
<div style="float: right; color: Blue; padding: 5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label" />
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear: both">
</div>
</div>

07navneet 1-Feb-12 4:41am

how come color combination effect this?? now i have removed colors but same problem persists!

Al Moje 1-Feb-12 4:46am

change you backgroud color into blue.
In your solution you have a white forecolor with white background, that is
why you see nothing. Also change your script manager to:
<asp:ScriptManager ID="ScriptManager1" runat="server">

Al Moje · Answer 4 · 2012-01-31T22:41:00

Solution 4

Hi,

Try this...

]]>

Posted 31-Jan-12 22:41pm

Al Moje

Comments

07navneet 1-Feb-12 4:43am

!!?? already told you its not working? is there something i need to change in web.config file?

Al Moje 1-Feb-12 4:53am

Sorry! This is not the whole solution I intended to answer. When I submit my whole solution answer, there were a server popup message error...
Just change the Script Manager you have defined in you solution and then change the color as I had mention on my previous comments above and it should be working....

07navneet 1-Feb-12 5:28am

changed the color and scriptmanager BUT...same problem!!

Martin Arapovic 1-Feb-12 8:15am

I'll sent you a working solution on mail...
Check mail in about 15 mins....

07navneet 2-Feb-12 1:20am

hey I am working on MS-VS2008(3.5)

Martin Arapovic 2-Feb-12 2:36am

Ok,

I'll make solution for VS2008 and sent it to you again, but I think if you make empty ASP.NET WebApp, add reference to AjaxControlToolkit dll and copy page content to your new page in solution, all should work...

Al Moje 1-Feb-12 20:31pm

Hi,

Sorry I just read your message this morning at arround 900 am. I did not recieved your message immediately cause I did not bring my personal laptop at work, and also I could not access my personal email at work cause we are prohibited network administrator.

Your code is already correct what should be done is to put a backgroud color at your upper pannel and define the height to be enough to display image control you had made. e.g:

<asp:Panel ID="pnlClick" runat="server" BackColor="Blue" Height="42px">
<div style="height: 30px; vertical-align: middle">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label" />
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear: both">
</div>
</div>

Al Moje 1-Feb-12 20:54pm

If still have problem...Check the proper end tag like end tag of: asp:Panel

Right click in you Web config then click on Exclude from Project.

then run your code.There will be a popup message e.g:

'There were built errors. Would you like to continue and run the last

successful build?' click on Yes.

This will automaticaly would create a new Web.config.

07navneet 2-Feb-12 1:13am

thanks for the reply. but this also didnt work. there is an interesting thing that ajax is not running on my PC but the same code works fine in my friend's laptop! Both of us have got ajaxcontroltoolkit.dll(3.5.11119.0)

07navneet 2-Feb-12 2:56am

Should I waste my PC?!

not able to control ajax collapsible panel control

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0

not able to control ajax collapsible panel control

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us