Category Archives: SiteMapDataSource

SiteMapDataSource

Is it possible to confgure a databound asp.net menu as a vertical accordion menu?

Is it possible to confgure a databound asp.net menu as a vertical accordion menu?

I’m using the standard asp:menu control. My sitemap is quite large, with at least six layers of submenus. While a treeview can represent it, my clients don’t like it.

They want these fancy accordion menus that they see. My problem is that all the examples I see for those show manually created UL lists. That’s unfeasible for me.

The off-the-shelf menu control allows you to drill down, but only by shooting off each submenu to the side; they fly off the screen with users who either have smaller screens or have larger ones but absolutely refuse to maximize their browser windows.  I
need to make this menu look and act like an accordion menu in only one column.

Is this even possible? 

I’m posting my source code to give you more context.

Thanks

<%@ Page Title="Redacted" Language="VB" MasterPageFile="~/MasterPage.master" %>

<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <meta charset="utf-8" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <h2>Sample Page</h2>
<p>Typical content goes here.</p> <%--
The menu is bound to the sitemapdatasource.
Making a manual UL that I need to update as the sitemap changes is not feasible.
I need to be able to adapt the menu control so that it is a vertical accordion menu.
--%> <asp:SiteMapDataSource ID="sdsSitemap" runat="server" /> <asp:Menu ID="Menu1" runat="server" DataSourceID="sdsSitemap"></asp:Menu> </asp:Content>

Hi,

Thank you for posting in ASP.NET forum.

As far as I know, you can use Accordion | jQuery UI to create a vertical accordion menu.

You could follow this link to create a vertical accordion menu through this plugin:

Using jQueryUI Accordion to create a vertical menu

If you want standard asp:menu control to create a vertical accordion menu, you may need some javascript code and css styles to imitate its behaviour.

Regards,

George.

Thanks for responding. I looked up that myself and found that the jQuery Accordion does not work off-the-shelf with an ASP.NET Menu.

Sorry for the bold and underline, but I want to make something absolutely clear:

I have an asp.net menu control that is databound to a sitemapdatasource; this is not a manual object.

All the examples I see on the web deal with manually populated UL lists.  And yes, the ASP.Net Menu renders as an UL list, but even so, the jQuery accordion won’t touch it.

I searched the jQuery forums, and because the majority are of the HTML and PHP types, they suggested I go to an ASP.NET forum for help, where folks are more familiar with… ASP.NET.

I still need help on this, but it needs to work with a databound asp:menu object. 

Thank you.

To make things a little more concrete, here is set of real code with redacted content.  I
bolded and italicized the relevant code-block.

<%@ Master Language="VB" %>

<!DOCTYPE html>
<script runat="server">
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="CSS_Styles/Product_Subpage.css" rel="stylesheet" type="text/css" />
    <title>Redacted</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="div_Frame">
        <div id="div_Header">
            <p><img src="~/images/Logos/snv_logo.gif" alt="Redacted" style="height: 2em; width: auto" runat="server" />
                Redacted</p>            
        </div>
        <div id="div_Menu">
            <asp:SiteMapDataSource ID="smdsRoot" runat="server" />
            <asp:Menu ID="mvRoot" runat="server" DataSourceID="smdsRoot" Orientation="Horizontal"
                StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" ItemWrap="True" StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="StaticMenuStyle" />
                <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            </asp:Menu>
        </div>
        <div id="div_Middle">
            <div id="div_Nav_L">
                <h2>Product Pages</h2>
                <asp:SiteMapDataSource ID="smdsProducts1" runat="server" StartingNodeUrl="~/Products/products.aspx"
                    ShowStartingNode="False" />
                <asp:Menu ID="menu_Left" runat="server" DataSourceID="smdsProducts1" 
                    ItemWrap="True" Width="10em">                                        
                </asp:Menu>
            </div>
            <div id="div_Body_R">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="div_Spacer" style="width: 100%">
        </div>
        <div id="div_Footer">
            <p>Redacted</p>
        </div>
    </div>
    </form>
</body>
</html>

Hi,

Thanks for your information.

I’m afraid there is no way to make asp:menu display as a vertical accordion menu since I haven’t find any property or method to achieve the goal.

As I mentioned in my previous reply, you can use Jquery accordion control. In this case, you need to read data from that product page and output data into HTML page.

In addition, I found a server control that you can use to display menu as a vertical accordion menu:

ASP.NET AJAX Control Toolkit – Accordion

The sample below may be helpful:

Horizontal and Vertical Accordion

Regards,

George.

I independently looked up the AJAX toolkit and encountered other issues the client doesn’t want.

I have abandoned this line of inquiry and am now focusing on the asp.net treeview control databound to the sitemapdatasource.

The only issue with that is that the "selectednodechanged" event is not triggering — only nodeexpanded and collapsed triggers.

In any case, that’s a different topic.