The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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;
}
}
}
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.