Customizing the main forum DHTML menu

[page=tutorial pageNum=1]
To customize the DHTML menu, you need to locate the menu file first. The menu is set in both

1. ~/App_Templates/<theme name>/Regular.master - where the root items are defined. Root items mean the ones that you see laying out horizontally on each page without having to mouse over.
2. ~/js/menu/forumMenu.js - where the sub items are defined. Sub items are the items that you see appear after you mouse over the root item

There is one sub item defined in the master page, that is the search box. If you need to make change to the search box, go to the master page. For all other sub items, you will want to open up the menu js file.

Let's see an example:

Bring "Photo Galleries" and "Calendars" out of the "Forum Menu" dropdown and make them primary buttons.  

There are 2 steps to achieve the above effect

1. remove both items from the js menu file
2. add both items to the regular.master master page

To remove the items, open up the js menu file, and look for

           
             if (ForumMenuGalleryActive) {           
                 var Photoitem = new Telerik.Web.UI.RadMenuItem(); Mainitem.get_items().add(Photoitem);            
                 
                 Photoitem.set_text(ForumMenuPhotoText); Photoitem.set_navigateUrl(urlBase + 'gallery.aspx');           
                 Photoitem.set_imageUrl(menuImgURL + 'menuGallery.gif');           
             }           
                        
             if (ForumMenuCalendarActive) {           
                 var Calitem = new Telerik.Web.UI.RadMenuItem(); Mainitem.get_items().add(Calitem);            
                 
                 Calitem.set_text(ForumMenuCalendarText); Calitem.set_navigateUrl(urlBase + 'calendar.aspx');           
                 Calitem.set_imageUrl(menuImgURL + 'menuCal.gif');                          
             }           
 

Comment out the entire section (/* ... */).

Then, open up Regular.master and add both items in:

           
 <telerik:RadMenuItem Value="gal" text='<%# langString("galGalleryTitleDesc") %>' ImageUrl='<%# "~/" + pageThemeImageUrl + "menuGallery.gif" %>' NavigateUrl="~/gallery.aspx" />           
 <telerik:RadMenuItem Value="cal" text='<%# langString("calendarTitle") %>' ImageUrl='<%# "~/" + pageThemeImageUrl + "menuCal.gif" %>' NavigateUrl="~/calendar.aspx" />            
 

That's it. Both Gallery and Calendar will appear as root items from now on.

[/page][page=tutorial pageNum=2]
Lets look at another example

Move the "My Public Profile"button to the "User Control Panel" drop down.

The steps are:

1. Remove it from the master page
2. add it to the js menu file

To remove it, you can simply set the item's "visible" to false. Like this:

<telerik:RadMenuItem Value="publicprofile" text='<%# langString("menuProfTitle") %>' ImageUrl='<%# "~/" + pageThemeImageUrl + "menuPProfile.gif" %>' visible="false" />

And you will look for this section in the js file

            if(UserCPitem) {           
                 var EditProfileitem = new Telerik.Web.UI.RadMenuItem();            
                 var HideForumitem = new Telerik.Web.UI.RadMenuItem();            
                 var Subscriptionitem = new Telerik.Web.UI.RadMenuItem();            
                 var PMitem = new Telerik.Web.UI.RadMenuItem();            
                 var Contactitem = new Telerik.Web.UI.RadMenuItem();            
                            
                 UserCPitem.get_items().add(EditProfileitem); EditProfileitem.set_text(ForumMenuEditProfileText); EditProfileitem.set_navigateUrl(urlBase + 'editprofile.aspx'); EditProfileitem.set_imageUrl(menuImgURL + 'menuProfile.gif');           
                 UserCPitem.get_items().add(HideForumitem); HideForumitem.set_text(ForumMenuHideForumText); HideForumitem.set_navigateUrl(urlBase + 'myforums.aspx'); //HideForumitem.set_imageUrl(menuImgURL + 'menuFilter.gif');            
                 if (ForumMenuSubscriptionActive) {UserCPitem.get_items().add(Subscriptionitem);Subscriptionitem.set_text(ForumMenuSubscriptionText); Subscriptionitem.set_navigateUrl(urlBase + 'subscription.aspx'); Subscriptionitem.set_imageUrl(menuImgURL + 'menuSubscription.gif');}           
                 UserCPitem.get_items().add(PMitem);PMitem.set_text(ForumMenuPMText); PMitem.set_navigateUrl(urlBase + 'pm.aspx'); PMitem.set_imageUrl(menuImgURL + 'menuPM.gif');            
                 UserCPitem.get_items().add(Contactitem);Contactitem.set_text(ForumMenuContactText); Contactitem.set_navigateUrl(urlBase + 'address.aspx'); Contactitem.set_imageUrl(menuImgURL + 'menuContact.gif');                                        
             }

So first, you define a new variable as  new Telerik.Web.UI.RadMenuItem(); and then add it to the UserCPitem.get_items() collection.

Like this:

            if(UserCPitem) {           
                 var EditProfileitem = new Telerik.Web.UI.RadMenuItem();            
                 var HideForumitem = new Telerik.Web.UI.RadMenuItem();            
                 var Subscriptionitem = new Telerik.Web.UI.RadMenuItem();            
                 var PMitem = new Telerik.Web.UI.RadMenuItem();            
                 var Contactitem = new Telerik.Web.UI.RadMenuItem();            
                 var PublicProfileItem = new Telerik.Web.UI.RadMenuItem();            
                            
                 UserCPitem.get_items().add(EditProfileitem); EditProfileitem.set_text(ForumMenuEditProfileText); EditProfileitem.set_navigateUrl(urlBase + 'editprofile.aspx'); EditProfileitem.set_imageUrl(menuImgURL + 'menuProfile.gif');           
                 UserCPitem.get_items().add(HideForumitem); HideForumitem.set_text(ForumMenuHideForumText); HideForumitem.set_navigateUrl(urlBase + 'myforums.aspx'); //HideForumitem.set_imageUrl(menuImgURL + 'menuFilter.gif');            
                 if (ForumMenuSubscriptionActive) {UserCPitem.get_items().add(Subscriptionitem);Subscriptionitem.set_text(ForumMenuSubscriptionText); Subscriptionitem.set_navigateUrl(urlBase + 'subscription.aspx'); Subscriptionitem.set_imageUrl(menuImgURL + 'menuSubscription.gif');}           
                 UserCPitem.get_items().add(PMitem);PMitem.set_text(ForumMenuPMText); PMitem.set_navigateUrl(urlBase + 'pm.aspx'); PMitem.set_imageUrl(menuImgURL + 'menuPM.gif');            
                 UserCPitem.get_items().add(Contactitem);Contactitem.set_text(ForumMenuContactText); Contactitem.set_navigateUrl(urlBase + 'address.aspx'); Contactitem.set_imageUrl(menuImgURL + 'menuContact.gif');                                        
                 UserCPitem.get_items().add(PublicProfileItem);PublicProfileItem.set_text('My Public Profile'); PublicProfileItem.set_navigateUrl(urlBase + 'showprofile.aspx?memid=' + forumMenuParams.id); PublicProfileItem.set_imageUrl(menuImgURL + 'menuPProfile.gif');                                        
             }

So again, make sure you know where the items are located - if it is a root menu item, it is in Regular.master; if it is a sub item which you want to see appear under a root item, it is in the js menu file.

Why do I put sub items in the js menu file? The reason is ASP.NET is not a very fast framework to render HTML elements. It makes everything an object and an object is huge in terms of the data it contains, compared to value type variables. So, if I put everything under the menu in Regular.master, it will affect the server side rendering performance. When the items are created and placed in a js file, the client browser takes care of generating these items, and this can mean a lot to performance when you are running a huge community (a lot of active users).
[/page]

[pager=tutorial total=2]

To show the Gallery and Calendar to Guests, open up Regular.master.vb

Look for

  
             ForumMenu.FindItemByValue("mainmenu").Visible = True  
             ForumMenu.FindItemByValue("login").Visible = True  
             ForumMenu.FindItemByValue("register").Visible = True  
 

Add to the section

  
             ForumMenu.FindItemByValue("gal").Visible = True  
             ForumMenu.FindItemByValue("cal").Visible = True  
 

The entire section now reads:

  
             ForumMenu.FindItemByValue("mainmenu").Visible = True  
             ForumMenu.FindItemByValue("login").Visible = True  
             ForumMenu.FindItemByValue("register").Visible = True  
             ForumMenu.FindItemByValue("gal").Visible = True  
             ForumMenu.FindItemByValue("cal").Visible = True  
 

Update to Version 3.4

for Photo Gallery menu item, you will need to use

             ForumMenu.FindItemByValue("photo").Visible = True

instead of

            ForumMenu.FindItemByValue("gal").Visible = True