locked
Using Accordion control RRS feed

  • Question

  • User1955412872 posted

    Hi, 

    I am using the Accordion control (code behind is vb.net). 

    When the user selects an item I need to be able to get an ID so I can update it in the database. I have searched for a solution, but all the events people suggest using are not part of the control.

    The only events available are:

    DataBinding, Disposed, Init, ItemCommand, ItemCreated, ItemDataBound, Load, PreRender & Unload.

    How can I get the identity of the currently selected item in the accordion control?

    Thanks.

    Monday, July 8, 2019 4:21 PM

All replies

  • User475983607 posted

    What item are you referring to?  If you mean which accordion link was last clicked, then use a little jQuery to set a hidden field.

    $('.accordionLink')click(function(){
       $('#<%=myHiddenField.ClientID%>').val($(this).text)); });

    On post back just fetch the hidden field value.

    string selectedTitle = myHiddenField.Value

    Use the browser dev tools to test and debug your code.

    Monday, July 8, 2019 5:32 PM
  • User-719153870 posted

    Hi GDFoster,

    If your 'item' refers to several headers that are included in Accordion.

    You can see that when Accordion is rendered to html, there is a hiddenfield named "Accordion1_AccordionExtender_ClientState", which has a value attribute, which is the ID of the item you are looking for.

    You can monitor Accordion items through jquery, and when they are clicked, place the value of Accordion 1_Accordion Extender_ClientState in a self-created hiddenfield, just as mgebhard said.

    You can refer to below codes:

    ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".accordionHeader").on("click",function () {
                    //alert($("#Accordion1_AccordionExtender_ClientState").val());
                    $('#myHiddenField').val($("#Accordion1_AccordionExtender_ClientState").val());
                });
                $(".accordionHeaderSelected").on("click",function () {
                    //alert($("#Accordion1_AccordionExtender_ClientState").val());
                    $('#myHiddenField').val($("#Accordion1_AccordionExtender_ClientState").val());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:Accordion ID="Accordion1" runat="Server"
                    SelectedIndex="0"
                    HeaderCssClass="accordionHeader"
                    HeaderSelectedCssClass="accordionHeaderSelected"
                    ContentCssClass="accordionContent"
                    AutoSize="None"
                    FadeTransitions="true"
                    TransitionDuration="250"
                    FramesPerSecond="40"
                    RequireOpenedPane="false"
                    SuppressHeaderPostbacks="true">
                    <Panes>
                        <ajaxToolkit:AccordionPane runat="server">
                            <Header>AAAA</Header>
                            <Content>aaaa</Content>
                        </ajaxToolkit:AccordionPane>
                        <ajaxToolkit:AccordionPane runat="server">
                            <Header>BBBB</Header>
                            <Content>bbbb<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></Content>
                        </ajaxToolkit:AccordionPane>
                        <ajaxToolkit:AccordionPane runat="server">
                            <Header>CCCC</Header>
                            <Content>cccc</Content>
                        </ajaxToolkit:AccordionPane>
                    </Panes>
                </ajaxToolkit:Accordion>
                <asp:HiddenField ID="myHiddenField" runat="server" />
            </div>
            <div>
                <br />
                <br />
                Now The ID of Acoordion Item ID is:<asp:Label ID="Label1" runat="server" Text="0"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Get ID" OnClick="Button1_Click" />
            </div>
        </form>
    </body>
    </html>

    CS:

    protected void Button1_Click(object sender, EventArgs e)
            {
                Label1.Text = myHiddenField.Value;
            }

    Here is result of my demo:

    Best Regard,

    Yang Shen

    Tuesday, July 9, 2019 9:54 AM