This post will show you how to create custom navigation menu for your website, where you can specify which pages you want to see and which not. There are many cases where you want to have two level navigation or several navigational menus. Each time you will have to do some coding over the menu so that it will start showing the appropriate items/nodes.
In this post I am creating a custom class that inherits from WebUITypeEditor.
First I am going to build WebUITypeEditor using RadTreeView control which supports multiple selection. This seems to be the most appropriate control to achieve my goal. I will bind the control to a list containing all pages by using the CmsManager.GetPages() method. Then I will return the ID of each node to my property as a Guid array.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Cms.Web.UI;
using Telerik.Web.UI;
using Telerik.Framework.Web;
using Telerik.Cms;
using System.Collections;
using System.Web.UI;
using Telerik.Cms.Web;
/// <summary>
/// Summary description for DynamicMenuBuilderWebUITypeEditor
/// </summary>
public class DynamicMenuBuilderWebUITypeEditor : WebUITypeEditor<Guid[]>
{
public DynamicMenuBuilderWebUITypeEditor()
{
}
public override Guid[] Value
{
get
{
Guid pageId = Guid.Empty;
List<Guid> selectedIds = new List<Guid>();
foreach (RadTreeNode node in TreeView.SelectedNodes)
{
if (node != null)
{
CmsSiteMapNode smNode = (CmsSiteMapNode)SiteMap.Provider.FindSiteMapNode("~/" + node.FullPath + ".aspx");
ICmsPage cmsPage = manager.GetPage(smNode.CmsPage.ID) as ICmsPage;
pageId = cmsPage.ID;
selectedIds.Add(pageId);
}
}
return selectedIds.ToArray();
}
set
{
this.ViewState["selectedPage"] = value;
base.ChildControlsCreated = false;
}
}
public string Templte
{
get
{
object o = this.ViewState["Template"];
if (o == null)
return ("~/CustomControls/PageIDWebEditor.ascx");
return (string)o;
}
set
{
this.ViewState["Template"] = value;
}
}
protected override void CreateChildControls()
{
base.CreateChildControls();
this.manager = new CmsManager();
this.template = ControlUtils.GetTemplate<SelectorTemplate>(this.Templte);
this.template.InstantiateIn(this);
var manager = new CmsManager();
IList allPages = manager.GetPages();
TreeView.MultipleSelect = true;
TreeView.DataSource = allPages;
TreeView.DataTextField = "MenuName";
TreeView.DataFieldParentID = "ParentID";
TreeView.DataFieldID = "ID";
TreeView.DataNavigateUrlField = "StaticUrl";
TreeView.DataBind();
}
protected virtual RadTreeView TreeView
{
get
{
return this.Controls[0].FindControl("RadTreeView1") as RadTreeView;
}
}
public class SelectorTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
}
}
private ITemplate template;
private CmsManager manager;
}
My Selector template is shown below. I declared there a RadTreeView instance:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PageIDWebEditor.ascx.cs" Inherits="CustomControls_PageIDWebEditor" %>
<asp:Label runat="server" ID="Label1" Text="Select a page from the tree" />
<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Black"/>
In the code behind I have to disable the NavigateUrl as otherwise when a node is selected a postback will appear, which will clear the selected nodes collection.
public partial class CustomControls_PageIDWebEditor : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
RadTreeView1.NodeDataBound += new Telerik.Web.UI.RadTreeViewEventHandler(RadTeerView1_NodeDataBound);
}
void RadTeerView1_NodeDataBound(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
{
foreach (RadTreeNode node in RadTreeView1.GetAllNodes())
{
node.NavigateUrl = "";
}
}
}
My selector is ready and now I need a custom control. The custom control will inherit from the well know CompositeControl class. This custom control does not need a template, because the SiteMenu will be dynamically generated.
I need a ViewState property from where I will call the WebUITypeEditor. I will use the built-in GuidArrayConverter, so that I will not have to create a custom DictionaryConverter for my property that is not just a simple string
[WebEditor("DynamicMenuBuilderWebUITypeEditor, App_Code")]
[TypeConverter("Telerik.Framework.Utilities.GuidArrayConverter, Telerik.Framework")]
public Guid[] PageIDs
{
get
{
object obj = this.ViewState["PageIDs"];
if (obj != null)
return (Guid[])obj;
return new Guid[0];
}
set
{
this.ViewState["PageIDs"] = value;
}
}
I will override CreateChildControls() where I will dynamically create a RadMenu control and List of all selected pages. Then, I will bind the menu to this list similar to the way that is used in the custom selector to populate the RadTreeView control.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using Telerik.Cms.Web.UI;
using System.ComponentModel;
using Telerik.Web.UI;
using Telerik.Cms;
/// <summary>
/// Summary description for DynamicMenuBuilder
/// </summary>
public class DynamicMenuBuilder : CompositeControl
{
public DynamicMenuBuilder()
{
}
protected override void CreateChildControls()
{
base.CreateChildControls();
RadMenu menu = new RadMenu();
var Manager = new CmsManager();
List<ICmsPage> selectedPages = new List<ICmsPage>();
foreach (Guid g in PageIDs)
{
ICmsPage p = Manager.GetPage(g, false) as ICmsPage;
if (p != null)
{
selectedPages.Add(p);
}
}
menu.DataSource = selectedPages;
menu.DataTextField = "MenuName";
menu.DataFieldParentID = "ParentID";
menu.DataFieldID = "ID";
menu.DataNavigateUrlField = "StaticUrl";
menu.DataBind();
Controls.Add(menu);
}
[WebEditor("DynamicMenuBuilderWebUITypeEditor, App_Code")]
[TypeConverter("Telerik.Framework.Utilities.GuidArrayConverter, Telerik.Framework")]
public Guid[] PageIDs
{
get
{
object obj = this.ViewState["PageIDs"];
if (obj != null)
return (Guid[])obj;
return new Guid[0];
}
set
{
this.ViewState["PageIDs"] = value;
}
}
}