locked
Open collapsible panel programmatically RRS feed

  • Question

  • User402879011 posted

    Hi,


    I have webpage which has a drop down at the top with four options. There are four collapsible panels related to each choice in the drop down. For now when a the drop down is changed, it's related Title Panel becomes visible and I have a button that opens the collapsible panel.


    What I really want to happen is when the drop down is changed its related collapsible panel automatically opens without having press the button manually. I hope I am explaining this ok. I am using Visual Studio 2008 with asp.net and vb.


    If nobody can help me could someone at least let me know if this is possible and would the code for this be vb or asp?


    Thank you for the help,

    Orla

    Wednesday, June 24, 2009 10:03 AM

Answers

  • User1335925338 posted

    Hi Orla,

    Please use this method:

    var cpe = $find("cpe");
    cpe.set_Collapsed(false);
    cpe.set_Collapsed(true);
    //cpe is the CollapsiblePanelExtender’s BehaviorID


     

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 29, 2009 5:04 AM
  • User-925286913 posted

    If you can;t use behaviour ID, then use the ID.

    var cpe = $find("<%CollapsiblePanel1.ClientID%>");  
    cpe.set_Collapsed(false);  
    cpe.set_Collapsed(true); 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 29, 2009 9:20 AM
  • User1335925338 posted

    Hi Orla,

    Do you need to handle the DropDownList’s onSelectedChanged event at the code-behind?

    If not, please set the AutoPostBack with “false”, otherwise, the Page would be refreshed and the client side function can not make any sense.

    If yes, we need to set the CollapsiblePanel’s ClientState property with “true” or “false” in the server side event instead of using the client method.

    Please refer to these threads carefully:
    http://forums.asp.net/p/1249797/2313059.aspx#2313059
    http://forums.asp.net/p/1254736/2333629.aspx#2333629
    http://forums.asp.net/p/1255502/2337686.aspx#2337686
    http://forums.asp.net/p/1284648/2481847.aspx#2481847

    Have my reply helped?

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 2, 2009 5:04 AM

All replies

  • User-925286913 posted

    Refer to: http://www.asp.net/learn/videos/video-89.aspx 

    Wednesday, June 24, 2009 10:37 AM
  • User-925286913 posted

    Refer to:

    http://forums.asp.net/t/1117371.aspx 

    Wednesday, June 24, 2009 10:48 AM
  • User402879011 posted

     Thanks a lot for the link, looks like exactly what I needed!

    Orla

    Thursday, June 25, 2009 9:42 AM
  • User402879011 posted

    Hi,


    I looked at the link again that you sent me but it doesnt seem to be exactly what I need. They use the behaviorId and then assign an onclick event to the object they want. However I can't use this for my project. I need to, in effect, use an if statement that says if the "Option 1" in the drop down is chosen then option 1 collapsible panel collapses/expands, if "Option 2" in the drop down is chosen then option 2 collapsible panel collapses/expands. I tried putting in an if statement using javascript but it doesnt seem to work. Here is an example:



    if (ddUnit.SelectedValue = "Air Cooled")
         {
             $find("Collapse3")._doOpen();
         }
     

    Any more help would be great, I can't seem to find any forum with this problem.

    Orla

    Friday, June 26, 2009 9:25 AM
  • User1335925338 posted

    Hi Orla,

    Please use this method:

    var cpe = $find("cpe");
    cpe.set_Collapsed(false);
    cpe.set_Collapsed(true);
    //cpe is the CollapsiblePanelExtender’s BehaviorID


     

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 29, 2009 5:04 AM
  • User-925286913 posted

    If you can;t use behaviour ID, then use the ID.

    var cpe = $find("<%CollapsiblePanel1.ClientID%>");  
    cpe.set_Collapsed(false);  
    cpe.set_Collapsed(true); 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 29, 2009 9:20 AM
  • User402879011 posted

     Hi, Thanks for the tips, I have tried both ways but it still doesnt seem to work. What I have now is:

     

    <head>

    <

    script type="text/javascript">

     

    function

    openAir() {

     

    if

    (document.forms[0].ddUnit.value == "Air Cooled")

     

    {

    var cpe = $find("Collapse3.ClientID%>");

     

    cpe.set_Collapsed(false);

    cpe.set_Collapsed(true);

    }

    }

    </script>

    </head>

    <body>

     

    <

    asp:DropDownList ID="ddUnit" runat="server" AutoPostBack = "true" OnChange ="openAir">

     

    <

    asp:ListItem>Air Cooled</asp:ListItem>

     

    <asp:ListItem>Water Cooled</asp:ListItem>

     

    </

    asp:DropDownList>

     

    </body>

     I am not getting an error but it doesn't seem to be playing throught the javascript function at all. I put a red mark next to the if statement and played but when I changed the drop down nothing happened.

    Any help would be great with this, I am lost on this error,

    Orla

     

    Wednesday, July 1, 2009 4:52 AM
  • User-925286913 posted

    Why are you making CollapsiblePanel Collapsed and Expanded at the same time.

    This will not product any effect as Panel is expanding and then Collapsing.

    Make it collapse or expand on based on condition:

    <script type="text/javascript"> function openAir()
    {
        var cpe = $find("<%=Collapse3.ClientID%>");
       
        if (document.forms[0].ddUnit.value == "Air Cooled")
        {
            cpe.set_Collapsed(false);
        }
        else
        {
            cpe.set_Collapsed(true);
        }
    }
    </script>

    <asp:DropDownList ID="ddUnit" runat="server" AutoPostBack="true" OnChange="openAir">
        <asp:ListItem>Air Cooled</asp:ListItem>
        <asp:ListItem>Water Cooled</asp:ListItem>
    </asp:DropDownList>

    Wednesday, July 1, 2009 8:40 AM
  • User-925286913 posted

    Minimized version:

    <script type="text/javascript"> function openAir()
    {
        var cpe = $find("<%=Collapse3.ClientID%>");
        cpe.set_Collapsed(!(document.forms[0].ddUnit.value == "Air Cooled"));
    }
    </script>

    <asp:DropDownList ID="ddUnit" runat="server" AutoPostBack="true" OnChange="openAir">
        <asp:ListItem>Air Cooled</asp:ListItem>
        <asp:ListItem>Water Cooled</asp:ListItem>
    </asp:DropDownList>

    Wednesday, July 1, 2009 8:41 AM
  • User402879011 posted

    Sorry that was a mistake, I fixed that so it is like yours but still nothing happens. I did all the ways that have been mentioned and it still doesn't seem to work. I have searched the internet for other forums and tried different ways but nothing is working. Is there something I am missing that I don't know about or is just these two things I need, the javascript function and the drop down list "onchange" event?


    Thanks a lot,

    Orla

    Thursday, July 2, 2009 4:32 AM
  • User1335925338 posted

    Hi Orla,

    Do you need to handle the DropDownList’s onSelectedChanged event at the code-behind?

    If not, please set the AutoPostBack with “false”, otherwise, the Page would be refreshed and the client side function can not make any sense.

    If yes, we need to set the CollapsiblePanel’s ClientState property with “true” or “false” in the server side event instead of using the client method.

    Please refer to these threads carefully:
    http://forums.asp.net/p/1249797/2313059.aspx#2313059
    http://forums.asp.net/p/1254736/2333629.aspx#2333629
    http://forums.asp.net/p/1255502/2337686.aspx#2337686
    http://forums.asp.net/p/1284648/2481847.aspx#2481847

    Have my reply helped?

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 2, 2009 5:04 AM
  • User402879011 posted

    I don't know how but its working!Thank you so much, I couldn't have figured this out without your help!


    Orla

    Thursday, July 2, 2009 6:09 AM
  • User1467224549 posted

    Hi Zhi-Qiang

    I have read all the links you specified for this problem above but not able to get solution to my problem. Would be grateful if you could help. 

    You have specified that panel change their state while in postback seems like that is what is happening. In the 3rd level of the nested gridview, I have checkboxes once I click them the entire panel collapses. I tried to add the onclick and get the client id of the collapsible panel but its always null as the panel would be rendered only dynamically.  If could change the state of the collapsiblepanel to false it wont collapse back or i am also open if i could open and close the panel on some button click or image click within the gridview. Till now I am not able to get any solution.

     

    Ques 1. I am pasting only excerpts of my panel code (limited length here) within which I have 3 levels. The collapsible panel works fine till level 2 but when I am clicking on level 3 it shows for a second and collapses back to level 2. The collapsible doesnt work on panel pnlUserAccess below.

    Ques 2. Can I make collapsible panel work on particular button click or image click?. As when I just put to to 2 levels I have to edit within the gridview and as soon as I click on the checkbox to edit the panel collapses.. I need to just give it a tree view style of appearance.

    Ques 3. Can I also make the collapsible panel enable on read mode and disable on edit mode (if there is no possiblity for Ques 2)

    Any ideas on how to make it work. Just to be more specific on the code. Thanks so much.

    <asp:Panel ID="pnlAccessRight" runat="server">            
            <asp:GridView ID="gvAccessRight" runat="server" BorderStyle="None">
                 <Columns>
                           <asp:TemplateField>                        
                               <ItemTemplate>                          
                                   <asp:Label ID="lblAccessLevel"></asp:Label>                              
                               </ItemTemplate>                          
                           </asp:TemplateField>
                           <asp:TemplateField>
                           <ItemTemplate>
                          <asp:Panel ID="pnlInnerAccessRight">

                           <%# Eval("AccessLevelName")%></asp:Panel>                                           
                        <asp:Panel ID="pnlAccessGroup" runat= "server" BorderStyle="Dotted">                     
                        <asp:GridView ID="gvAccessGroup" runat="server" BorderStyle="None">
                       <Columns>
                           <asp:TemplateField>
                           <ItemTemplate>
                            <asp:Panel ID="pnlUserAccess" runat="server" BorderStyle="Groove">                      
                             <asp:GridView ID="gvUserAccessRight" runat="server" BorderStyle="None" />
                       <Columns>
                   </Columns>
                   </asp:GridView>
                   </asp:Panel>
                    <asp:CollapsiblePanelExtender ID="cpUserAcess" runat="server" TargetControlID="pnlUserAccess" ExpandControlID="pnlAccessGroup" 
                         CollapseControlID="pnlAccessGroup" CollapsedSize ="0" Collapsed="true"   AutoCollapse="False" AutoExpand="true" ScrollContents="false"   
                         ImageControlID="imgCollapsible"   ExpandedImage="../Pictures/Expand_Button_white_Down.jpg"
                         CollapsedImage="../Pictures/expand_button_white.jpg"   ExpandDirection="Vertical">
                         </asp:CollapsiblePanelExtender>                                                                                
                           </ItemTemplate>
                           </asp:TemplateField>                                            
                   </Columns>
                   </asp:GridView>
                   </asp:Panel>
                    <asp:CollapsiblePanelExtender ID="cpUserGroup" runat="server" TargetControlID="pnlAccessGroup" ExpandControlID="pnlInnerAccessRight" 
                         CollapseControlID="pnlInnerAccessRight" CollapsedSize ="0" Collapsed="true"   AutoCollapse="False" AutoExpand="true" ScrollContents="false"   
                         ImageControlID="imgCollapsible"   ExpandedImage="../Pictures/Expand_Button_white_Down.jpg"
                         CollapsedImage="../Pictures/expand_button_white.jpg"   ExpandDirection="Vertical">
                     </asp:CollapsiblePanelExtender> 
                           </ItemTemplate>                       
                           </asp:TemplateField>                     
                   </Columns>
                   </asp:GridView>       
            </asp:Panel>

    Monday, August 2, 2010 4:20 AM
  • User402879011 posted


    Tuesday, August 3, 2010 5:29 AM
  • User402879011 posted

    Hi,

     

    I don't know if I can help you but I fixed my problem and I have collapsible panels working from button clicks. Here is an example of how I would structure a collapsible panel and the VB to collapse or expand. You could have one button expand it and then hide it to show another which will collapse it again. Hope it is some help to you.

     

     

    <script type="text/javascript">

     

    function openCollapsiblePanel() {

     

        var objExtender = $find("<%=pnlUserAccess.ClientID%>");

     

     

     

        $get("HiddenField1").value = "false";

     

     

     

    }

    </script>

     

    <asp:HiddenField ID="HiddenField1" runat="server" />

     

    <asp:Panel ID="pnlUserAccessTitle" runat="server">

    </asp:Panel>

     

    <asp:Panel ID="pnlUserAccess" runat="server">

    </asp:Panel>

                                                <cc1:CollapsiblePanelExtender ID="cpUserAccess" runat="server"                                                CollapseControlID="pnlUserAccessTitle" Collapsed="True" EnableViewState="true" ExpandControlID="pnlUserAccessTitle" SuppressPostBack="true" TargetControlID="pnlUserAccess">

    </cc1:CollapsiblePanelExtender>

     

    ‘Page_Load (VB.Net)

    ‘Hide on page load

     Me.Button1.Attributes.Add("onclick", "openCollapsiblePanel")

     

    Me.HiddenField1.Value = True

    Me.cpUserAccess.ClientState = Me.HiddenField1.Value

     

    ‘On button/ image click.

    ‘Expand on button click:

    Me.HiddenField1.Value = False

    Me.cpUserAccess.ClientState = Me.HiddenField1.Value

     

     

    Tuesday, August 3, 2010 5:37 AM
  • User1467224549 posted

     I wish I could do that.. But I am not able to get the client id of the panel inside panel inside panel... The problem here is nested gridview. The panels inside the parent gridview are only  created  on rowbound event and not before that.. I event went inside those events to trap the client id of the panel and change the client state from there but could not :( no solution yet..Frown

    Friday, August 6, 2010 4:55 AM
  • User178261500 posted

    Try this:

          Protected Sub btn_Collapse(ByVal sender As Object, ByVal e As EventArgs)
                ' Expand
                Me.CollapsiblePanelExtender1.Collapsed = False
                Me.CollapsiblePanelExtender1.ClientState = "false"
                ' Collapse
                ' Expand
                Me.CollapsiblePanelExtender1.Collapsed = True
                Me.CollapsiblePanelExtender1.ClientState = "true"
          End Sub

     

    Tuesday, August 10, 2010 5:00 PM