Solved

Ajax collapsible panel not collapsing

Posted on 2010-08-31
7
909 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now