Custom accordion : The Official Microsoft ASP.NET Forums

Reply

Custom accordion

Sep 03, 2010 10:43 AM|LINK

Hi,

I would like to make a custom accordion, in which I have 2 panes, but where you couldn't open the second one until you clicked a validation button in the first one that would open the second...

I tried to just make a button that would hide the first pane but I cant get to make it work... :(

<head runat="server">
    <title>Page test</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
              

        function pageLoad()
        {
            hideAccordionPane(paneNo);
        }
 

        // hides pane 1
        function hideAccordionPane(paneNo)
        {
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneNo).header.style.display="none";
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneNo).content.style.display="none";
        }
    </script>
</head>

<asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="hideAccordionPane(0)" />

Thanks for help

Geoffrey Dechanet-Andrews

Reply

Re: Custom accordion

Sep 06, 2010 05:50 AM|LINK

Hi,

G3off
but where you couldn't open the second one until you clicked a validation button in the first one that would open the second...

I guess you did not set the ValidationGroup for the controls in the first panel. And I think it will reslove the problem and we don't need the scripts which you are trying.

Specifying Validation Groups
http://msdn.microsoft.com/en-us/library/ms227424.aspx

If that's not the case, please post the full markups of your page and let me reproduce the issue.

Reply

Re: Custom accordion

Sep 06, 2010 07:17 AM|LINK

Thanks Jerry for your reply, but I forgot to tell that I don't want the page to Postback, I want it to be fully client-side.

I managed to make a button open a second pane and hide first one, but what I would like, is to open second pane only after checking form in Pane 1, and if there's errors, hilight fields.

I tried with this, but it doesn't work, it only opens second pane without checking..

<script type="text/javascript">
function hideAccordionPane(paneNo)
        {
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneNo).header.style.display="none";
            $find('AccordionCtrl_AccordionExtender').get_Pane(paneNo).content.style.display="none";
        }
function check()
        {
            var msg = "";
           

            if (document.getElementById('<%= TextBox_name.ClientID %>').value == "")
            {
                alert('error');
		        msg += "Write name\n";
		        document.getElementById('<%= TextBox_name.ClientID %>').style.backgroundColor = "#F3C200";
		       

	        }
           

         

	        if (msg == "")
{
hideAccordionPane(1);
return(true);


	        else
	        {
		        alert(msg);
		        return(false);
	        }
        }
    </script>


[... form]


<asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="check();return false;" />

Geoffrey Dechanet-Andrews

Reply

Re: Custom accordion

Sep 06, 2010 07:48 AM|LINK

Hi,

Would you please post the full markups include the AccordionExtender? I can't reproduce the issue with these code which you post currently.

Reply

Re: Custom accordion

Sep 06, 2010 07:55 AM|LINK

Here it is:

<head runat="server">
    <title>Page test</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />


    <script type="text/javascript">
function changeSelected(idx)
        {
            $find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);
        }
function check()
        {
            var msg = "";
           

            if (document.getElementById('<%= TextBox_name.ClientID %>').value == "")
            {
                alert('hello');
		        msg += "Enter name\n";
		        document.getElementById('<%= TextBox_name.ClientID %>').style.backgroundColor = "#F3C200";
		       

	        }
         

	        if (msg == "")
	        {
	            changeSelected(1);
	            return(true);
	        }
	        else
	        {
		        alert(msg);
		        return(false);
	        }
        }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 568px">
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <br />
        <cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" RequireOpenedPane="false">
            <Panes>
                <cc1:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>
                        Datas</Header>
                    <Content>
                        Nom :<asp:TextBox ID="TextBox_name" runat="server" Style="margin-left: 45px" Width="152px"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="TextBox_name_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="TextBox_name" WatermarkText="enter name">
                        </cc1:TextBoxWatermarkExtender>
                        

                        <br />
                        <br />
                        <asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="check();return false;" />
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        Contract</Header>
                    <Content>
                        blabla
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>
    </div>
    </form>

Geoffrey Dechanet-Andrews

Reply

Re: Custom accordion

Sep 06, 2010 09:47 AM|LINK

Hi,

Here is the code.

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Page test</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function changeSelected(idx) {
            $find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);
        }
        function check() {
            var msg = "";


            if ($find('<%= TextBox_name_TextBoxWatermarkExtender.ClientID %>').get_Text() == "") {
                alert('hello');
                msg += "Enter name\n";
                $get('<%= TextBox_name.ClientID %>').style.backgroundColor = "#F3C200";
            }
            else {
                $get('<%= TextBox_name.ClientID %>').style.backgroundColor = "white";
            }
            if (msg == "") {
                changeSelected(1);
                return (true);
            }
            else {
                alert(msg);
                return (false);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 568px">
        <asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">
        </asp:toolkitscriptmanager>
        <br />
        <asp:accordion id="AccordionCtrl" runat="server" selectedindex="0" headercssclass="accordionHeader"
            contentcssclass="accordionContent" autosize="None" fadetransitions="true" requireopenedpane="false">
            <Panes>
                <asp:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>
                        Datas</Header>
                    <Content>
                        Nom :<asp:TextBox ID="TextBox_name" runat="server" Style="margin-left: 45px" Width="152px"></asp:TextBox>
                        <asp:TextBoxWatermarkExtender ID="TextBox_name_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="TextBox_name" WatermarkText="enter name">
                        </asp:TextBoxWatermarkExtender>
                        

                        <br />
                        <br />
                        <asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="check();return false;" />
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        Contract</Header>
                    <Content>
                        blabla
                    </Content>
                </asp:AccordionPane>
            </Panes>
        </asp:accordion>
    </div>
    </form>
</body>
</html>

Marked as answer by G3off on Sep 06, 2010 10:26 AM

Reply

Re: Custom accordion

Sep 06, 2010 10:11 AM|LINK

Hi, thanks for the bit that finds that my textbox value is "", it works, but the thing is that with this, still, the page reloads in every case, and if the check() fails, rather than highlighting the textbox, it reloads current page and back to begining. If check() is successful, I would like to run changeindex(1), but it doesn't because of reloading...

any idea how to do this ?

Geoffrey Dechanet-Andrews

Reply

G3off

Member

142 Points

65 Posts

Re: Custom accordion

Sep 06, 2010 10:26 AM|LINK

Done, I simply put UseSubmitBehavior="False" on my button, letting me manage all the form validation manually;

thanks alot Jerry

Geoffrey Dechanet-Andrews

Custom accordion RSS

7 replies

G3off

Custom accordion

Jerry Weng -...

Re: Custom accordion

G3off

G3off

Re: Custom accordion

Jerry Weng -...

Re: Custom accordion

G3off

Re: Custom accordion

Jerry Weng -...

Re: Custom accordion

G3off

Re: Custom accordion

G3off

Re: Custom accordion

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft