Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Ajax collapsible panel not collapsing

Posted on 2010-08-31
7
Medium Priority
?
962 Views
Last Modified: 2013-11-07
I have a serie of collapsible panels in a form, that are collapsed when the form is first open.
I have added a link button to collapse or open the panels.  But for some reason I cannot make the panels collapse or open.

This is the code in my link button:
Protected Sub btnColPanel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnColPanel.Click
        NVar.bCollapsed = Not NVar.bCollapsed

        If NVar.bCollapsed = True Then
            Me.btnColPanel.Text = "Display assessment information"
            Me.ColApp.Collapsed = True
            Me.ColSaving.Collapsed = True
            Me.ColCE.Collapsed = True
        Else
            Me.btnColPanel.Text = "Hide assessment information"
            Me.ColApp.Collapsed = False
            Me.ColCE.Collapsed = False
            Me.ColSaving.Collapsed = False
        End If
    End Sub
I have tried to set the Causevalidation of the button to true or false, it did not work.
I have moved the second part of the code where the (panel collapsed) to the init, load and prerender of the form, it did not work.

Thanks for your help.

Anne
0
Comment
Question by:AnneF
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 6

Expert Comment

by:thaytu888888
ID: 33565232
- Can you debug and tell me what's happen?
0
 

Author Comment

by:AnneF
ID: 33566604
It looks like it go through the code only once, and the variable changes everytime, the name of the button changes as well but the panel does not collapse/open.
I have difficulty to debug since I have started using the ajax controls as I get the following message:
There is no source code available for the current location, and a button to show disassembly.
0
 
LVL 15

Expert Comment

by:rajeeshmca
ID: 33573906
Hello Annef,

Can u please let me know why do u want to do it in the code behind...

why dont u do somethig like the following:

<form id="form1" runat="server">
    <asp:ScriptManager ID="Sc1" runat="server"></asp:ScriptManager>
        <div>
            <asp:LinkButton ID="Lb1" runat="server" Text="Open" >
            </asp:LinkButton>
            <asp:Panel ID="Panel1" runat="server">
            Panel1
            </asp:Panel>
            <cc1:CollapsiblePanelExtender ID="TestColl1" runat="server" TargetControlID="Panel1" CollapseControlID="Lb1" ExpandControlID="Lb1"
            Collapsed="false"  >
            </cc1:CollapsiblePanelExtender>
            <asp:Panel ID="Panel2" runat="server">
            Panel2
            </asp:Panel>
            <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" CollapseControlID="Lb1" ExpandControlID="Lb1"
            Collapsed="false"  >
            </cc1:CollapsiblePanelExtender>
        </div>
    </form>

0
Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

 

Author Comment

by:AnneF
ID: 33582344
I copied your code into a test form, however it does not recognise the asp:ScriptManager, message is: script manager is not a known element.

This is the html code I have:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test_Panel_Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>

<form id="form2" runat="server">

    <asp:ScriptManager ID="Sc1" runat="server"/>
        <div>
            <asp:LinkButton ID="Lb1" runat="server" Text="Open" >
            </asp:LinkButton>
            <asp:Panel ID="Panel1" runat="server">
            Panel1
            </asp:Panel>
            <ajaxToolkit:CollapsiblePanelExtender ID="TestColl1" runat="server" TargetControlID="Panel1" CollapseControlID="Lb1" ExpandControlID="Lb1"
            Collapsed="false"  >
            </ajaxToolkit:CollapsiblePanelExtender>
            <asp:Panel ID="Panel2" runat="server">
            Panel2
            </asp:Panel>
            <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" CollapseControlID="Lb1" ExpandControlID="Lb1"
            Collapsed="false"  >
            </ajaxToolkit:CollapsiblePanelExtender>
        </div>
    </form>

</body>
</html>
0
 

Author Comment

by:AnneF
ID: 33582486
I managed to make the scriptmanager work, and I was able to test your solution, and it worked.

However, I have many collapsible panels, that can be open or closed separately. I want to be able to close/open them one a a time, when entering/viewing data, or all together at once.

In this case, your solution won't work for me, as the CollapseControlID and ExpandControlID is the link button at the top, so I won't be able to close/open one at a time.

Thanks for helping me finding a solution.
Anne
0
 
LVL 15

Accepted Solution

by:
rajeeshmca earned 2000 total points
ID: 33584047
Hello try with the following sample

aspx page
-----------

<form id="form1" runat="server">
        <asp:ScriptManager ID="Sc1" runat="server">
        </asp:ScriptManager>
        <div>
            <table style="white-space: nowrap;">
                <tr>
                    <td style="text-indent;" abbr>
                    </td>
                </tr>
            </table>
            <asp:LinkButton ID="Lb1" runat="server" Text="Open">
            </asp:LinkButton>
            <asp:Panel ID="Panel1" runat="server">
                Panel1
            </asp:Panel>
            <cc1:CollapsiblePanelExtender ID="TestColl1" runat="server" TargetControlID="Panel1"
                CollapseControlID="Dummy" ExpandControlID="Dummy" Collapsed="false">
            </cc1:CollapsiblePanelExtender>
            <asp:Panel ID="Panel2" runat="server">
                Panel2
            </asp:Panel>
            <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2"
                CollapseControlID="Dummy" ExpandControlID="Dummy" Collapsed="false">
            </cc1:CollapsiblePanelExtender>
            <input type="button" id="Dummy" runat="server" style="display: none;" />
        </div>
    </form>

.vb page
-----------

Protected Sub Lb1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Lb1.Click

        If TestColl1.Collapsed = False Then
            TestColl1.Collapsed = True
            Me.TestColl1.ClientState = "false"
            CollapsiblePanelExtender1.Collapsed = False
            Me.CollapsiblePanelExtender1.ClientState = "true"
        Else
            TestColl1.Collapsed = False
            Me.TestColl1.ClientState = "true"
            CollapsiblePanelExtender1.Collapsed = True
            Me.CollapsiblePanelExtender1.ClientState = "false"
        End If
       

    End Sub
0
 

Author Closing Comment

by:AnneF
ID: 33592361
Thank you very much for your help
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question