Main + Side menus with TabStrip and Menu controls?

[Ian]

Hi,

I have my site layout in a web.sitemap file as I want a common place to store my site layout that can then be used in a number of controls throughout my application. I want to create a site navigation system that has a tabbed main menu (horizontal - 1 level deep) in my top navigation banner and a sub-menu (all sub levels for selected item in main menu, either in an expanded treeview or multilevel bulleted list) in a sidebar.

I made a start on trying to do this but got messed up quite quickly. I bound a the sitemap file to a RadSiteMapDataSource and used this to bind to a RadTabStrip, but I wasn't able to restrict the tab navigation to the top level nodes only - I got a set of nested tabs (see attached image).

Sitemap code:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode>
        <siteMapNode url="" title="Menu 1"  description="Menu 1">
            <siteMapNode url="" title="Sub Menu A"  description="Sub Menu A" />
            <siteMapNode url="" title="Sub Menu B"  description="Sub Menu B" />
            <siteMapNode url="" title="Sub Menu C"  description="Sub Menu C" />
        </siteMapNode>
        <siteMapNode url="" title="Menu 2"  description="Menu 2">
            <siteMapNode url="" title="Sub Menu D"  description="Sub Menu D" />
            <siteMapNode url="" title="Sub Menu E"  description="Sub Menu E" />
            <siteMapNode url="" title="Sub Menu F"  description="Sub Menu F" />
        </siteMapNode>
        <siteMapNode url="" title="Menu 3"  description="Menu 3">
            <siteMapNode url="" title="Sub Menu G"  description="Sub Menu G" />
            <siteMapNode url="" title="Nested Menu 1"  description="Nested Menu 1">
                <siteMapNode url="" title="Sub Menu H"  description="Sub Menu H" />
                <siteMapNode url="" title="Sub Menu I"  description="Sub Menu I" />
            </siteMapNode>
        </siteMapNode>
    </siteMapNode>
</siteMap>

Main Tab Menu code:

<telerik:RadSiteMapDataSource ID="TabMenuDataSource" runat="server" ShowStartingNode="False" SiteMapFile="Web.sitemap" />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" DataSourceID="TabMenuDataSource" ShowBaseLine="True" Orientation="HorizontalTop">
</telerik:RadTabStrip>

Can anyone tell me how I can achieve the effect I want? Am I doing this the right way? Is it possible to limit the tabs to the first level of nodes in the sitemap (e.g. Menu 1-3)? How do I have a sidebar menu that displays the sub-menu items for the selected node in the main menu? I tried creating the Side Menu using the code below but it didn't display anything at all:

Side Menu code (doesn't render anything):

<telerik:RadSiteMapDataSource ID="SidebarDataSource" runat="server" ShowStartingNode="false" SiteMapFile="Web.sitemap" StartFromCurrentNode="true"  />

<telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SidebarDataSource" >
</telerik:RadMenu>

I'm sure I've seen this (or something similar) done on a Sitefinity showcase but just can't see how to do it now. Can anyone help?

Thanks, Ian



 

[Peter]

Hi Ian,

You can use approach similar to the Related Menus demo. Attached is a sample with RadTabStrip and RadMenu.


All the best,
Peter
the Telerik team