AJAX Collapsible Panel Extender not working

Question

0.00/5 (No votes)

See more:

I am trying to add a collapsible panel extender. I recently installed VS 2013 and added the Ajax Toolkit. I have tried to implement the collapsible panel based on many different tutorials, but mine does not work. I have the property set to start collapsed, but what I get is the panel expanded, and nothing happens when I click my image to expand/collapse it. I'm sure I'm just missing something stupid, but I can't see it. Any help would be much appreciated.

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <ajaxToolkit:CollapsiblePanelExtender ID="cpeFilter" runat="Server"
            TargetControlID="PnlPlayer"
            CollapsedSize="0"
            ExpandedSize="300"
            Collapsed="true"
            ExpandControlID="imgFilter"
            CollapseControlID="imgFilter"
            AutoCollapse="False"
            AutoExpand="False"
            ScrollContents="false"
            TextLabelID="Label1"
            CollapsedText="Show Details..."
            ExpandedText="Hide Details"
            ImageControlID="imgFilter"
            ExpandedImage="~/images/plyr_filter.gif"
            CollapsedImage="~/images/plyr_filter.gif"
            ExpandDirection="Vertical" />

            <asp:Image ID="imgFilter" CssClass="imgBtn"  runat="server" ImageUrl="images/plyr_filter.gif" ></asp:Image>

        <asp:Panel ID="PnlPlayer" runat="server" >
            I am the player
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Posted 1-Mar-14 23:42pm

Motley Drew

Updated 1-Mar-14 23:45pm

v2

Add a Solution

3 solutions

Solution 3

XML

Friends;
I utilized 3 panels in order to get it work!
This is a complete example:
---------------------------------------------------

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CollapsiblePanel Training</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>

<asp:Panel ID="pnl_Control" runat="server" BorderColor="Blue" BorderWidth="3px" Width="300px" HorizontalAlign="left" >
<asp:Panel ID="pnl_Header" runat="server" BackColor="Blue" ForeColor="White" Font-Bold="true" Width="300px">
<asp:Label ID="lbl_ExpandCollapse" runat="server" Text="Show Details..."></asp:Label>
<asp:Image ID="img_ExpandCollapse" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="Xpand Image" ImageAlign="Right" height="25" Width="25"/>
</asp:Panel>
<asp:Panel ID="pnl_Target" runat="server" Width="300px" Height="0px" HorizontalAlign="Justify">
This text must appeart after you click Expand/Collapse Panel. If so then you've succeeded.... God job!
<asp:Image ID="img_DetailImage" runat="server" ImageUrl="~/images/Maldives.jpg" Height="250px" Width="250px" AlternateText="Alt Text" />
</asp:Panel>
</asp:Panel>

<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
TargetControlID="pnl_Target"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="pnl_Control"
CollapseControlID="pnl_Control"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="False"
TextLabelID="lbl_ExpandCollapse"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="img_ExpandCollapse"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical" >
</asp:CollapsiblePanelExtender>
</form>
</body>
</html>

Posted 10-Nov-14 10:31am

Member 10621223

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Krunal Rohit · Accepted Answer · 2014-03-01T23:58:00

Solution 1

CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of Internet Explorer didn't support that model completely, so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode. Read here[^].

Or maybe use ToolScriptManager.
-KR

Posted 1-Mar-14 23:58pm

Krunal Rohit

Updated 2-Mar-14 1:11am

v3

Comments

Motley Drew 2-Mar-14 14:28pm

You both had the solution, almost. I replaced my ScriptManager with...
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" />
... which required modification of my webconfig. Details on this can be found here..
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ToolkitScriptManager/ToolkitScriptManager.aspx.

My panel auto collapsed, but still did not expand. This is due to incorrect references to my expand and collapse control IDs. I modified the following and it now works. Thanks for your help guys.

ExpandControlID="imgFilter"
CollapseControlID="imgFilter"

Krunal Rohit 3-Mar-14 9:30am

If you got your problem solved, kindly clicked on Accept Solution. That will help other users who might face same problem.

-KR

Pranav-BiTwiser · Accepted Answer · 2014-03-02T01:10:00

Solution 2

Try and use ToolScriptManager instead of Scriptmanager......

Posted 2-Mar-14 1:10am

Pranav-BiTwiser