Nested Repeater Control with Link Buttons

Question

I am trying to create a drop down menu with nested repeaters and link buttons.

<asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <asp:LinkButton ID="LinkButton_Category" runat="server" Text='<%#Eval("cat") %>'
                    OnCommand="LinkButton_Category_Command" CommandName="Category" 
                    CommandArgument='<%#Eval("catid") %>'></asp:LinkButton>
                <asp:Repeater ID="Repeater2" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>

                    <ItemTemplate>
                        <li>
                            <asp:LinkButton ID="LinkButton_UseClass" runat="server" Text='<%#Eval("useclass") %>'
                            OnCommand="LinkButton_UseClass_Command" CommandName="UseClass" 
                            CommandArgument='<%#Eval("UcId") %>'></asp:LinkButton>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>

When the first link button is clicked (with Id - 'LinkButton_Category'), the command argument is used as an input to populate the second link buttons( with Id - 'LinkButton_UseClass'). I need to implement this in a drop down menu manner with scroll up and down feature. Any help will be greatly appreciated. I could populate the link buttons, but need help with the scrolling feature. The link button that is clicked have to stay open until the next item is clicked.

EDIT

Code for implementing the slide down menu using JQuery

$(document).ready(function () { 
   $("#nav li").click( function () { 
      var sibling = $(this).find("a").next(); 
      sibling.show(); 
   }, 
   function () { 
      var sibling = $(this).find("a").next(); 
      sibling.hide(); 
   });
});

screen shot - i want only one of them to stay open at a time. when i click on any one of them, any previously expanded list has to close.

Not sure what the question is. Are you asking how to add a dropdown list? — Shai Cohen, Mar 04 '13 at 17:07
i am looking for a slide down menu using linkbuttons and repeater. I was able to populate the link buttons but they dont stay open when clicked. — developerhere, Mar 05 '13 at 06:24
Can you add the code for the slide menu to your question? Also, if you can add a screenshot of the page, it can help us to understand exactly what you are trying to achieve. — Shai Cohen, Mar 05 '13 at 15:15
@ShaiCohen: i tried to implement the slide down menu using jquery. Here is the code i used: $(document).ready(function () { $("#nav li").click( function () { var sibling = $(this).find("a").next(); sibling.show(); }, function () { var sibling = $(this).find("a").next(); sibling.hide(); }); }); I am at a loss on how to add a screen shot. I am kind of new here. — developerhere, Mar 05 '13 at 16:01
I added the JQuery code to your question. Not a problem re the screen shot. Here's how you do it: Once you save the screenshot to your computer, click the "edit" link underneath your question. Then put the cursor where you want to add the screenshot. Press 'Ctrl + G' and a diaglog box will appear that will allow you to choose the file to upload. You can also reference this question on meta for more info: [How to upload an image to a post?](http://meta.stackexchange.com/questions/75491/how-to-upload-an-image-to-a-post) — Shai Cohen, Mar 05 '13 at 16:55
i have added the screen shot. I need just one of the list to stay open at a time. Any previously expanded list has to close when any other list is expanded. The main 'li' and the sub 'li' are populated using data source bound to repeaters. — developerhere, Mar 06 '13 at 12:34

Shai Cohen · Answer 1 · 2013-03-07T17:03:54.277

I believe this is what you are looking for:

    $(document).ready(function () {
        $("#nav li").each(function (index) {
            var sibling = $(this).find("a").next();
            sibling.hide();
        });
        $("#nav li").click(function () {
            $("#nav li").each(function (index) {
                var sibling = $(this).find("a").next();
                sibling.hide();
            });
            var sibling = $(this).find("a").next();
            sibling.show();
        });
    });

EDIT

Here is the output of the repeater:

<body>
    <form id="form1" runat="server">
    <div id="nav">
    <ul>
        <li><a href="#">Alpha</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a href="#">Numeric</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
    </ul>
    </div>
    </form>
</body>

If I give the id="nav" to the outer ul, the sub list doesnot stay open. They close as soon as i click on them.If I give the id="nav" to the inner ul, the inner and the outer lists stay open at the same time. (same as the original problem).what to do? — developerhere, Mar 07 '13 at 14:17
Strange. I have the sample code at work. I'll be there in about an hour and get back to you. — Shai Cohen, Mar 07 '13 at 15:23

Nested Repeater Control with Link Buttons

1 Answers1