KB Article K18112
Visible to All Users

Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar

Description:
This article demonstrates how the ASPxNavBar control can be used within a SharePoint application's default.master page instead of the standard SharePoint Quick Launch menu control.

Answer:
You can enhance the display and functionality of a SharePoint master page's Quick Launch by replacing the standard AspMenu control with the DevExpress ASPxNavBar control.

In this scenario, the ASPxNavBar control will be added to the same navigation manager container and bound to the same data source as the AspMenu control, within the default.master page.
Registering the ASPxNavBar control
Based upon the How to integrate a DevExpress web control into a SharePoint page KB article, you should perform the following actions to make the ASPxNavBar control available within the default.master page of your SharePoint application:

  1. Register the ASPxNavBar's related assemblies (DevExpress.Web.v8.2 and the DevExpress.Data.v8.2) in the GAC.
  2. Add the following SafeControl entries to the application's Web.Config file:
XML
<SafeControl Assembly="DevExpress.Web.v8.2, Version=8.2.4.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1" Namespace="DevExpress.Web.ASPxNavBar" TypeName="*" Safe="True" /> <SafeControl Assembly="DevExpress.Data.v8.2, Version=8.2.4.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1" Namespace="DevExpress.Data" TypeName="*" Safe="True" />
  1. Insert the following @Register directive into the default.master page:
ASPx
<%@ Register Assembly="DevExpress.Web.v8.2, Version=8.2.4.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1" Namespace="DevExpress.Web.ASPxNavBar" TagPrefix="dxnb" %>
  1. Register a HttpHandler Module.
    Registering HttpHandler Module makes its features available for the DevExpress controls.
    See the How to manually register a HttpHandler Module topic for more information.
    Modifying the master page's Quick Launch markup
  2. Within the opened default.master page, find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.
  3. In the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu.
  4. Comment or remove the AspMenu's markup, and insert the ASPxNavBar control's markup instead (pay attention to the DataSourceID property's setting defined):
ASPx
<%-- <SharePoint:AspMenu id="QuickLaunchMenu" DataSourceId="QuickLaunchSiteMap" runat="server" Orientation="Vertical" StaticDisplayLevels="2" ItemWrap="true" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0" SkipLinkText="" > <LevelMenuItemStyles> <asp:MenuItemStyle CssClass="ms-navheader"/> <asp:MenuItemStyle CssClass="ms-navitem"/> </LevelMenuItemStyles> <LevelSubMenuStyles> <asp:SubMenuStyle CssClass="ms-navSubMenu1"/> <asp:SubMenuStyle CssClass="ms-navSubMenu2"/> </LevelSubMenuStyles> <LevelSelectedStyles> <asp:MenuItemStyle CssClass="ms-selectednavheader"/> <asp:MenuItemStyle CssClass="ms-selectednav"/> </LevelSelectedStyles> </SharePoint:AspMenu> --%> <dxnb:ASPxNavBar id="QuickLaunchNavBar" runat="server" DataSourceID="QuickLaunchSiteMap"> </dxnb:ASPxNavBar>
  1. Find the parent SPNavigationManager control whose ID is QuickLaunchNavigationManager, and modify its QuickLaunchControlId property to refer to the ASPxNavBar control's ID.
    <Sharepoint:SPNavigationManager
        id="QuickLaunchNavigationManager"
        runat="server"
        QuickLaunchControlId="QuickLaunchNavBar"
        ContainedControl="QuickLaunch"
        EnableViewState="false">
        …
  2. Save the file and open a site page to see the results of your changes.
    See Also:
    SC question: Using the ASPxNavBar as the main navigation for sharepoint
    KB article: Applying an AutoFormat to a DevExpress web control integrated into a SharePoint page
    KB article: How to manually register a HttpHandler Module
    KB article: Adding the ASPxNavBar onto the SharePoint 2010 master page

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.