This topic provides steps on varioius settings that could be made when working with navigation controls.

The Navigation Overview topic provides information about the available navigation controls in Sitefinity. In case you want to implement something that is missing, you can access the code, located in <project folder>/Sitefinity/UserControls. The code is available both in C# and VB but the toolbox contains only the C# controls. If you are a VB fan, you have to manually edit the web.config to substitute the C# control with the respective one for VB.

Additional information about adding controls to the toolbox from web.config could be found in the section "Uploading User Controls Manually" in the User Manual.

Persisting the State of the Cookie

By default, the RadPanelBar resets its state when the user is redirected to a different page. This does not seem appropriate for some cases since users want items that were clicked to stay open. The RadPanelBar has a property called PersistStateInCookie. If the property is set to true, RadPanelBar will remember its state after it redirects.

 Figure 1

This property is not exposed to SitePanelbar, but the whole RadPanelbar is. To change the property, add a SitePanelBar controls and click on Edit to edit the properties. In the Misc section, find PanelBar, and click Edit in order to edit the properties of the original RadPanelBar contained inside. There, you can find the PersistStateInCookie property.

     Figure 2

Setting the Group Page Display       

Sitefinity has two types of pages – group and normal. Group pages do not have any content, and serve only one purpose – to redirect to their first child page. 

For more on Pages, see Pages Overview

SitePanelbar can behave in two ways when there are group pages in the hierarchy – it either redirects to the first child page, or only expands and shows the child pages of a group page. This behavior is controlled by a property called HideUrlForGroupPages. It is false by default. When set to true, clicking a group page will cause SitePanelBar only to expand without redirecting you anywhere.

Figure 3

Highlighting Selected Tabs and Menus

One useful feature of the navigation controls would be to indicate which is the currently selected page. A common way to do that is using the breadcrumb (SiteMapPath) control. However, in order to highlight the selected item in the menu, the styles should also be changed. SiteTabstrip and SiteMenu controls provide that functionality by exposing a CSS class for the selected item:

SiteMenu.ascx.cs	Copy Code
public partial class UserControls_SitemapMenu : System.Web.UI.UserControl {  ...  #regionData Fields    ...    private string selectedItemCssClass = "selectedItem";  #endregion  ... }

When the SelectedItemCssClass property is set for the SiteMenu control, then CSS could be applied to style the selected item. This could be done in a skin created for the control, or in CSS. In SiteMenu, this is done in the handler for the ItemDataBound event. Look at the following code:

SiteMenu.ascx.cs

Copy Code

public void RadMenu1_ItemDataBound(object sender, RadMenuEventArgse) {  ...  CmsSiteMapNode node2 = SiteMap.CurrentNode as CmsSiteMapNode;  if (node2 != null && node2.ParentNode != null)  {     while (node2.ParentNode != SiteMap.RootNode)     {         RadMenuItem item2 = this.RadMenu1.FindItemByUrl(this.ResolveUrl(node2.Url));         if (item2 != null)            item2.CssClass = this.selectedItemCssClass;         node2 = node2.ParentNode as CmsSiteMapNode;     }    ...    if (item != null)    {       // here you can set the style for the top-level item      item.CssClass = this.selectedItemCssClass;    } } }

SiteTabstrip does not have such a property (SelectedItemCssClass), but the selected tab could still be highlighted. For the purpose, look at the code in the Page_Load event handler. There is a commented field which designates where should the setting of styles be inserted:

SiteTabstrip.ascx.cs

Copy Code

protected void Page_Load(object sender, EventArgse) {  if (this.ShowOnlyFirstLevel)  {    ...    CmsSiteMapNode node2 = SiteMap.CurrentNode as CmsSiteMapNode;    if (node2 != null && node2.ParentNode != null)    {      ...          Tab item = this.RadTabstrip1.FindTabByUrl(this.ResolveUrl(node2.Url));      if (item != null)      {       // here you can set the style for the top-level item       item.Selected = true;      }    }   ... }

Just set the CssClass property of the item, and then apply CSS, or alternatively, set styling information through code:

Color Red	Copy Code
item.ForeColor = Color.Red;

or

Selected Item	Copy Code
item.CssClass = "Selected"

The final result should be similar to this in Figure 4:

 Figure 4

Displaying Different Parts of the SiteMap

Every navigation control contains a SiteMapDataSource control. This control uses the default Sitefinity SiteMap provider to retrieve data about the structure of the site. The SiteMapDataSource control has properties controlling what part of the Site Map is shown. These properties have been exposed for all navigation controls, and you can set them in Page Edit mode in Sitefinity.

Sample scenario:

Problem: How to display only child pages of the current page in a PanelBar Solution:

Solution: 

Let’s say that you have created the structure as shown:

 Figure 5

There is a root-level page, containing two child pages, one of them itself containing a child page. When in DocTest, you want to display only Child1, Child2 and SubChild. When in Child2, you want to display only SubChild.

1. Edit the template that all pages use, and drop a SitePanelbar on it.

   

     Figure 6

    

2. Click the Edit link to edit the properties of the SitePanelbar. Set StartFromCurrentNode to true, and ShowStartingNode to false:

                                                                   Figure 7

    

3. Save the settings, save the template, and view the result in different pages:

   DocTest:

    

    

    Figure 8

   Child2:

    

    

    Figure 9 

You can achieve the same functionality for all navigation controls in Sitefinity. They all expose the SiteMapDataSource properties. Additionally, there is the StartingNodeOffset property that specifies how deep after the starting node to start looking for child items.

See Also

© 2002-2008 Telerik. All Rights Reserved.