Telerik blogs

Changing the look of the built-in navigation in a SharePoint site can often take quite a while and quickly turn into an annoying thing to do. The UI results are also often times not exactly what you had in mind. That is why many people decide to completely replace the default Quick Launch menu with a custom or third-party ASP .NET AJAX control. This blog post is going to show you how to easily customize the default SharePoint navigation or implemented a custom one in a separate Web Part with Telerik’s AJAX ASP .NET Menu.

How to Replace the Quick Launch SharePoint Menu with RadMenu

  1. First of all, use the SharePoint installer of Telerik’s controls for ASP.NET AJAX which will add all the necessary SafeControl and http handler/module definitions in the web.config of your SharePoint site.

  2. After that launch you office SharePoint designer and open the default.master of your SharePoint site. Check it out and add the register for the appropriate version of Telerik controls that you are using. 
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=x.x.x.x, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
     
  3. In the next step you should comment or delete the default QuickLaunchMenu mark up and add the RadMenu in the same ContentPlaceHolder that is bound to the same DataSourceID:
    <telerik:RadMenu ID="QuickLaunchRadMenu" runat="server" DataSourceID="QuickLaunchSiteMap"
      Skin="Windows7" />

  4. The last but not least step is to find the SPNavigationManager control with id QuickLaunchNavigationManager, and alter its QuickLaunchControlId property to point to our Telerik Menu's id.
    <sharepoint:spnavigationmanager id="QuickLaunchNavigationManager" runat="server"
     quicklaunchcontrolid="QuickLaunchRadMenu" containedcontrol="QuickLaunch" enableviewstate="false">

Here is a sample image of what the SharePoint navigation looks like now:

You can easily achieve the custom SharePoint navigation as described above with any other control that will be able to read the same hierarchical DataSource. Such Telerik controls are our ASP.NET TreeView, PanelBar (as used in our SharePoint demos website), and SiteMap.

Creating a Visual Web Part that contains a RadMenu

In some cases an easy and fast way to implement custom SharePoint navigation it is to use RadMenu as a separate web part. It can be included with all the desired images and styles that will make it look exactly as you’d like it to.

The great advantage of such navigation is that you can arrange each specific link to the other pages according to your custom needs, including adding icons, directly from the mark up without the need to follow lots of configuration and permissions.

  • First of all you should make sure that the references of Telerik.Web.UI and Telerik.Web.UI.Skins are included to the Web Part. You should also add a register for Telerik controls on the page: 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
  • Using RadMenu, Telerik’s ASP .NET Navigation control is just as easy as always – you declare the items according to the desired hierarchical scenario and by applying the desired text, skin, rounded corners, animation, shadows, access navigation key or any other of its properties.
    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Windows7"
    EnableRoundedCorners="true" EnableShadows="true"
    Style="position: absolute; top: 34px; left: 10px; width: 100%;">
    <Items>

  • If you want to use custom icons, you have to be careful and place them in a specific separate folder and relate each one of them with a “~/_layouts” prefix. The NavigationURL of the nodes to the destination page should be also carefully defined as in the code below:

Image of the folders in the application

 

<Items>
<telerik:RadMenuItem ImageUrl="~/_layouts/Images/RadMenuVisualWebPart/11new.gif" NavigateUrl="~/SitePages/SPListUserControl.aspx" Text="New" AccessKey="w" />


You can review and download the web part for such scenario from here.

Bind your RadMenu to a SharePoint List

 Our Menu for ASP.NET AJAX can be also bound to a SharePoint List by loading its nodes as presented in the following code:

void LoadSchedulerData()
        {
            using (var site = new SPSite("http://websitename"))
            {
                using (var web = site.OpenWeb())
                {
                    var list = web.Lists["SharepointNodes"];
                    RadMenuToSPList.DataSource = list.Items.GetDataTable();
                    RadMenuToSPList.DataTextField = "Title";
                    RadMenuToSPList.DataFieldID = "ID";
                    RadMenuToSPList.DataNavigateUrlField="NavigateURL";
                    RadMenuToSPList.DataFieldParentID = "ParentID";
                    RadMenuToSPList.DataBind();                         
                }
            }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                LoadSchedulerData();
            }
        }

Visual Web Part with RadMenu control bound to SPSiteMapProvider

Another interesting pretty easy way to create navigation in your SharePoint web site is by using the control bound to a SPSiteMapProvider. It provides the SiteMapNode objects that constitute the global content portion of the breadcrumb, which represents objects in the site hierarchy. It can be related with a DataSourceID to RadMenu:

<telerik:RadMenu DataSourceID="SiteMap" runat="server" Skin="Vista" ID="RadMenu1">
</telerik:RadMenu>
<asp:SiteMapDataSource SiteMapProvider="SPSiteMapProvider" ShowStartingNode="true" id="SiteMap" runat="server" />

Wrap Up

Hope this was a useful piece of information and will shorten your time to reach the desired look of your SharePoint site.  Please feel free to go on and ask questions or add more information on the topic in the comments below.

About RadMenu and RadControls for ASP.NET AJAX

RadMenu and 70+ other controls are part of RadControls for ASP.NET AJAX, a comprehensive set of controls and 4 ready-to-use web parts (Editor, Grid, ListView and Scheduler) helping you build slick and easy-to-customize SharePoint farm solutions more quickly.  All RadControls and web parts work seamlessly in a SharePoint 2010/2013 environment and officially pass the MSOCAF validation test. Check out the demos or download a free trial.

 

 


Plamen Zdravkov
About the Author

Plamen Zdravkov

Plamen Zdravkov (@pa4oZdravkov) is a Principle Software Engineer for Kendo UI at Progress and is into the art of web development for over a decade now. He loves working with JavaScript and .NET web technologies and through the years took active part in the evolution of the Telerik ASP.NET AJAX, Kendo UI for jQuery and ASP.NET MVC component libraries—first as a Support Officer and later as a developer. Nowadays he leads the development of Kendo UI for Vue and Telerik UI for ASP.NET Core component libraries.

Comments

Comments are disabled in preview mode.