Solved

Ajax collapsible panel not collapsing

Posted on 2010-08-31
7
931 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
  • 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

713 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