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.
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=x.x.x.x, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<
telerik:RadMenu
ID
=
"QuickLaunchRadMenu"
runat
=
"server"
DataSourceID
=
"QuickLaunchSiteMap"
Skin
=
"Windows7"
/>
<
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.
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.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
Skin
=
"Windows7"
EnableRoundedCorners
=
"true"
EnableShadows
=
"true"
Style
=
"position: absolute; top: 34px; left: 10px; width: 100%;"
>
<
Items
>
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.
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();
}
}
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"
/>
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.
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 (@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.