Expand to navigated MenuItem when RadMenu is used as a Navigation control

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 09 Apr 2008 Link to this post


    RadControls version RadMenu for ASP.NET AJAX
    (Telerik.Web.UI v2007.3.1425)
    .NET version

    Visual Studio version

    VS 2005
    programming language

    browser support

    all browsers supported by RadMenu for ASP.NET AJAX

    In some cases RadMenu could be used as a Navigation control for a Web Site. Apart from the Breadcrumb functionality that could be implemented, the user may not be visually aware of which item from the menu was clicked in the previous page.

    For this purpose, we can create a Web User Control which contains the RadMenu and which will serve as the Navigation control. We put it in each page we want to be able to navigate to. Please note that the pages should reside in the same directory for this approach to work properly.

    The last selected item could be selected and expanded automatically when each page loads. This could be done by parsing the URL to get the page name. Then search through the items of the RadMenu in order to find the item with the same NavigateUrl and then select and expand it.

    The approach described above could be used in conjunction with the Breadcrumb functionality for a better user experience.

    Below is the javascript code needed to implement the approach (we should hook to the RadMenu's client OnClientLoad event):

        function OnClientLoad(menu) 
            var pathname = window.location.pathname; 
            var url = pathname.substring(pathname.lastIndexOf('/') + 1); 
            var currentItem = FindItemByUrl(menu, url); 
            if (currentItem) 
        //Searches for an item which has its  
        //NavigateUrl property set to the specified url. 
        function FindItemByUrl(menu, url) 
            var items = menu.get_allItems(); 
            var itemsCount = items.length; 
            var foundItem = null
            for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) 
                var item = items[itemIndex]; 
                var navigateUrl = item.get_navigateUrl(); 
                if (navigateUrl == url) 
                    foundItem = item; 
            return foundItem; 

    Attached, is a sample project which fully illustrates the approach.
Back to Top