Locked[FAQ]Customizing the main forum DHTML menu

Author
APGvNext Sam
vNext Dev
  • Total Posts : 13221
  • Joined: 2001/05/23 00:00:00
  • Status: offline
2008/07/07 16:26:57 (permalink) 3.x

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]
post edited by Samuel - 2009/04/11 20:06:00
#1

2 Replies Related Threads

    ScottB
    License Holder
    • Total Posts : 967
    • Status: offline
    Re:Customizing the main forum DHTML menu 2008/07/09 11:48:40 (permalink)
    This modification works really well.  What do I change to make the Gallery and Calendar buttons show for Guests?   As written they only show when logged in. 

    Thanks,
    #2
    APGvNext Sam
    vNext Dev
    • Total Posts : 13221
    • Joined: 2001/05/23 00:00:00
    • Status: offline
    Re:Customizing the main forum DHTML menu 2008/07/09 14:48:49 (permalink)
    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
    post edited by Samuel - 2009/04/13 16:54:00
    #3
    Jump to:
    © 2019 APG vNext Commercial Version 5.5