New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Mega Drop-Down RadMenu Bind to Xml DataSource

How to

Implement Mega Drop-Down Menu like the on-line demo and bind it to an xml file using RadSiteMap control.  (included both C# and VB version of the code)

Solution

Binding an already existing xml file to a Mega Drop-Down menu is much easier than creating the DataSource in the markup. Therefore, we decided to provide an example how this could be implemented using an xml file and the RadSitemap control. This example also demonstrates how a custom attribute (ImagePosition) can be applied to the xml file and then used in the code behind. The current example provides the position of the image (the value 1 assigns the position at the last place while the value of 0 assigns the position of the image at the first place).    

<div id="MegaDropDown">
    <telerik:RadMenu ID="RadMenu1"  runat="server" OnDataBound="RadMenu1_DataBound">
    </telerik:RadMenu>
</div>
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        RadMenu1.LoadContentFile("menu.xml");
        RadMenu1.DataBind();
    }
}

protected void RadMenu1_DataBound(object sender, EventArgs e)
{
    RadMenu menu = (RadMenu)sender;
    foreach (RadMenuItem item in menu.Items)
    {
        RadSiteMap sm = new RadSiteMap();
        PopulateSiteMap(sm, null, item);

        //sitemap settings to have the menu items appear in columns 

        SiteMapLevelSetting rootLevelSetting = new SiteMapLevelSetting(0);
        rootLevelSetting.ListLayout.RepeatColumns = 3;
        rootLevelSetting.ListLayout.RepeatDirection = SiteMapRepeatDirection.Vertical;
        sm.LevelSettings.Add(rootLevelSetting);
        item.Items.Clear();
        RadMenuItem childItem = new RadMenuItem();



        Panel catWrapper = new Panel();
        //catWrapper.CssClass = "Wrapper";
        catWrapper.Width = Unit.Pixel(450);
        catWrapper.Controls.Add(sm);

        if ((item.Attributes["ImagePosition"] != null) && (item.Attributes["GroupImageUrl"] != null))
        {
            Image img1 = new Image();
            img1.ImageUrl = item.Attributes["GroupImageUrl"];
            catWrapper.Controls.AddAt(int.Parse(item.Attributes["ImagePosition"]), img1);
        }


        childItem.Controls.Add(catWrapper);
        item.Items.Add(childItem);
    }
}

private static void PopulateSiteMap(RadSiteMap sm, RadSiteMapNode node, RadMenuItem item)
{
    if (node == null)
    {
        foreach (RadMenuItem child in item.Items)
        {
            node = new RadSiteMapNode(child.Text, child.NavigateUrl);
            sm.Nodes.Add(node);
            if (child.Items.Count > 0)
            {
                PopulateSiteMap(sm, node, child);
            }
        }
    }
    else
    {
        foreach (RadMenuItem child in item.Items)
        {
            node.Nodes.Add(new RadSiteMapNode(child.Text, child.NavigateUrl));
            if (child.Items.Count > 0)
            {
                PopulateSiteMap(sm, node, child);
            }
        }
    }
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        RadMenu1.LoadContentFile("menu.xml")
        RadMenu1.DataBind()
    End If
End Sub

Protected Sub RadMenu1_DataBound(sender As Object, e As EventArgs) Handles RadMenu1.DataBound
    Dim menu As RadMenu = DirectCast(sender, RadMenu)
    For Each item As RadMenuItem In menu.Items
        Dim sm As New RadSiteMap()
        PopulateSiteMap(sm, Nothing, item)

        'sitemap settings to have the menu items appear in columns 

        Dim rootLevelSetting As New SiteMapLevelSetting(0)
        rootLevelSetting.ListLayout.RepeatColumns = 3
        rootLevelSetting.ListLayout.RepeatDirection = SiteMapRepeatDirection.Vertical
        sm.LevelSettings.Add(rootLevelSetting)
        item.Items.Clear()
        Dim childItem As New RadMenuItem()



        Dim catWrapper As New Panel()
        'catWrapper.CssClass = "Wrapper";
        catWrapper.Width = Unit.Pixel(450)
        catWrapper.Controls.Add(sm)

        If (item.Attributes("ImagePosition") IsNot Nothing) AndAlso (item.Attributes("GroupImageUrl") IsNot Nothing) Then
            Dim img1 As New Image()
            img1.ImageUrl = item.Attributes("GroupImageUrl")
            catWrapper.Controls.AddAt(Integer.Parse(item.Attributes("ImagePosition")), img1)
        End If


        childItem.Controls.Add(catWrapper)
        item.Items.Add(childItem)
    Next
End Sub

Private Shared Sub PopulateSiteMap(sm As RadSiteMap, node As RadSiteMapNode, item As RadMenuItem)
    If node Is Nothing Then
        For Each child As RadMenuItem In item.Items
            node = New RadSiteMapNode(child.Text, child.NavigateUrl)
            sm.Nodes.Add(node)
            If child.Items.Count > 0 Then
                PopulateSiteMap(sm, node, child)
            End If
        Next
    Else
        For Each child As RadMenuItem In item.Items
            node.Nodes.Add(New RadSiteMapNode(child.Text, child.NavigateUrl))
            If child.Items.Count > 0 Then
                PopulateSiteMap(sm, node, child)
            End If
        Next
    End If
End Sub
<?xml version="1.0" encoding="utf-8" ?>
<Menu>
    <Group>
        <Item Text="Products" GroupImageUrl="~/Img/interior.png" ImagePosition="1" >
            <Group>
                <Item Text="Furniture">
                    <Group>
                        <Item Text="Tables and Chairs" />
                        <Item Text="Sofas" />
                        <Item Text="Occasional Furniture" />
                        <Item Text="Childerns Furniture" />
                        <Item  Text="Beds" />
                    </Group>
                </Item>
                <Item Text="Decor">
                    <Group Flow="Vertical">
                        <Item Text="Bed Linen" />
                        <Item Text="Throws" />
                        <Item Text="Curtains and Blinds" />
                        <Item  Text="Rugs" />
                        <Item Text="Carpets" />
                    </Group>
                </Item>
                <Item Text="Storage">
                    <Group Flow="Vertical">
                        <Item Text="Wall Shelving" />
                        <Item Text="Kids Storage" />
                        <Item Text="Baskets" />
                        <Item Text="Multimedia Storage" />
                        <Item Text="Floor Shelving" />
                        <Item Text="Toilet Roll Holders" />
                        <Item Text="Storage Jars" />
                        <Item Text="Drawers" />
                        <Item Text="Boxes" />
                    </Group>
                </Item>
                <Item Text="Lights">
                    <Group Flow="Vertical" OffsetX="-26">
                        <Item Text="Ceiling" />
                        <Item Text="Table" />
                        <Item Text="Floor" />
                        <Item Text="Shades" />
                        <Item Text="Wall Lights" />
                        <Item Text="Spotlights" />
                        <Item Text="Push Light" />
                        <Item Text="String Lights" />
                    </Group>
                </Item>
            </Group>
        </Item>
        <Item Text="Stores"  GroupImageUrl="~/Img/world.gif" ImagePosition="0">
            <Group>
                <Item Text="Stores">
                    <Group>
                        <Item Text="Canada" />
                        <Item Text="Europe" />
                        <Item Text="Australia" />
                        <Item Text="India" />
                        <Item  Text="United Kingdom" />
                        <Item  Text="United States" />
                        <Item Text="Philippines" />
                        <Item  Text="Middle East" />
                        <Item  Text="New Zealand" />
                        <Item Text="Malaysia" />
                    </Group>
                </Item>
            </Group>
        </Item>
    </Group>
</Menu>
div#MegaDropDown 
{
   margin: 0;
   padding: 20px 0 0 0;
   width: 880px;
   height: 352px;
   background-image: url('Img/main_back.jpg');
   background-repeat: no-repeat; 
}
div.RadSiteMap .rsmLink, 
div.RadSiteMap .rsmTemplate
{
    padding: 0;
}

.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmItem {
    list-style:disc inside none;
}

div.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmLink, 
div.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmTemplate
{
    padding-left: 0;
}

div.RadMenu .rmGroup .rmText {
    margin:0 0 0 4px;
    padding: 8px 0 0 10px;
}

div.RadMenu_Sitefinity ul.rmRootGroup, 
div.RadMenu_Sitefinity div.rmRootGroup
{
    background: none;
    border: 0;
    height: 100%;
    padding-left: 20px;
}

div.RadMenu_Sitefinity .rmHorizontal .rmItem
{
    padding: 0;
}

div.RadMenu .rmItem {
    position: static;
}

div.RadMenu_Sitefinity .rmLink .rmText,
div.RadMenu_Sitefinity .rmFocused .rmText
{
    line-height: 57px;
    color: #FFF;
    text-transform: uppercase;
}

div.RadMenu_Sitefinity .rmLink:hover,
div.RadMenu_Sitefinity .rmFocused,
div.RadMenu_Sitefinity .rmSelected,
div.RadMenu_Sitefinity .rmExpanded
{
    background: transparent url('Img/RootBg.png') repeat-x 0 0;
}

* html div.RadMenu_Sitefinity .rmLink:hover,
* html div.RadMenu_Sitefinity .rmFocused,
* html div.RadMenu_Sitefinity .rmSelected,
* html div.RadMenu_Sitefinity .rmExpanded
{
    background: #FFF;
    filter: alpha(opacity=70);
}

div.RadMenu_Sitefinity .rmSelected .rmText,
div.RadMenu_Sitefinity .rmLink:hover .rmText,
div.RadMenu_Sitefinity .rmExpanded .rmText
{
    color: #555;
}

div.RadMenu_Sitefinity .rmHorizontal .rmItem a.rmLink .rmText
{
    border:0 none;
}
In this article