|
RadControls version
|
RadMenu for ASP.NET AJAX
(Telerik.Web.UI v2007.3.1425)
|
| .NET version |
2.0
|
| Visual Studio version |
VS 2005
|
| programming language |
JavaScript
|
| browser support |
all browsers supported by RadMenu for ASP.NET AJAX
|
PROJECT DESCRIPTION
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) |
| { |
| currentItem.focus(); |
| |
| currentItem.open(); |
| } |
| } |
| |
| //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; |
| |
| break; |
| } |
| } |
| |
| return foundItem; |
| } |
Attached, is a sample project which fully illustrates the approach.