+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Implementing a mega drop-down menu

Implementing a mega drop-down menu

6 posts, 0 answered
  1. Kwinten Volckaert
    Kwinten Volckaert avatar
    41 posts
    Registered:
    01 Mar 2005
    12 Mar 2010
    Link to this post
    I was looking to implement the following as menu :
    http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx

    Does anyone have any idea how this can be best implemented with SiteFinity?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Mar 2010
    Link to this post
    Hi Kwinten Volckaert,

    As far as I see it the code of the sample is provided on the demo website. Generally it will be difficult to work with dynamic pages and create such a menu, because the RadMenuItem template will be changed every time you want to add a new page and some of the SiteMapNodes will be overlapped. You could work with separated datasource and expose properties for the content that will be added to the ItemTemplate of each RadMenuItem.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Gratian
    Gratian avatar
    1 posts
    Registered:
    17 Sep 2010
    30 Sep 2010
    Link to this post
    Hi,
    I am also interested in implementing the mega drop-down menu and this is one of the main issues regarding the website.
    If there is any blog post or tutorial on how it could be developed as a custom control on sitefinity it would be great.
    Thanks.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 Sep 2010
    Link to this post
    Hello Gratian,

    You can bind RadMenu control to a SiteMapDataSource.. Then on ItemDataBound event  add a child RadMenuItem to the item being bound and Instantiate custom ItemTemplate in the child Item.

    Here is a sample

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SitemapDataSource1" MaxDataBindDepth="1">
    </telerik:RadMenu>

    protected void Page_Load(object sender, EventArgs e)
       {
           RadMenu1.ItemDataBound += new Telerik.Web.UI.RadMenuEventHandler(RadMenu1_ItemDataBound);
       }
     
       void RadMenu1_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e)
       {
           RadMenuItem childItem = new RadMenuItem();
           e.Item.Items.Add(childItem);
           MenuItemTemplate menuItemTemplate = new MenuItemTemplate();
           menuItemTemplate.InstantiateIn(childItem);
       }
     
       class MenuItemTemplate : ITemplate
       {
           #region ITemplate Members
     
           public void InstantiateIn(Control container)
           {
               RadMenuItem parentItem = (RadMenuItem) container.Parent;
               HtmlGenericControl div = new HtmlGenericControl("div");
               div.ID = "TextDiv";
               div.InnerText = parentItem.Text + " item template";
               //add the div to the container controls
               container.Controls.Add(div);
     
               SiteMapDataSource sitemapDataSource2 = new SiteMapDataSource();
               sitemapDataSource2.ID = parentItem.Text + "dataSource";
               sitemapDataSource2.StartingNodeUrl = parentItem.NavigateUrl;
               //add the SiteMapDataSource control to the container controls collection
               container.Controls.Add(sitemapDataSource2);
                
               RadSiteMap radSitemap = new RadSiteMap();
               radSitemap.ID = parentItem.TabIndex + "siteMap";
               radSitemap.DataSource = sitemapDataSource2;
               radSitemap.DataBind();
               //add the RadSiteMap control to the container controls collection
               container.Controls.Add(radSitemap);
     
           }
     
           #endregion
       }




    Sincerely yours,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Gratian
    Gratian avatar
    9 posts
    Registered:
    05 Nov 2010
    23 Nov 2010
    Link to this post
    Hi Ivan,
    I tried the solution you gave me and at the first glimpse it was "the solution" then i tried it on our website and it was a disaster.
    So .. what i did. I used the SiteMenu form UserControls in sitefinity and added the code to that control.
    The problem is that i have some pages that are group pages and for those i get an error because the navigateurl isn't available (hideUrlForGroups is set to true).
    My problem is that i have to get the websites structure and also i have to check what node i am at so i can use different templates (i would like to transform this in a sitefinity control - which allows the user to choose the template for main pages - and the templates are sorting the child based on categories, tags or adding a normal page list near another control - like a login control).

    So the question ... can you give me a suggestion on how i could do what i want or how could i stop the normal behavior of the radmenu for some items and render what i want.

    Thanks,
    Gratian.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Nov 2010
    Link to this post
    Hi Gratian,

    You can  take a look at this article which shows how to add templates at runtime which will allow you to change the appearance of a single RadMenuItem. Generally you can populate the ItemTemplate with different controls . Mega Drop Down structure is useful when you have static menu or menu that will not be changed on a daily basis.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
6 posts, 0 answered