Adding a Page Selector to Sitefinity Custom Control

Once you get used to Sitefinity, you’ll notice that there are quite a few built-in features that are very handy for editing content, rather than the RadEditor itself (Telerik’s own WYSIWYG editor). For instance, there is an internal page selector when adding links within RadEditor, within the Lists module, and many other of the pre-configured Modules. Pages that are already included in your Sitemap can be selected and linked with their GUID, right from any of these different areas. Wouldn’t it be nice to add that to a custom control you have created? A quick and easy way to add it to any custom control can be done!

If you aren’t familiar with creating your own custom controls, there are tons of tutorials on Sitefinity’s site, and also posted here. I’d recommend becoming familiar with overrides, templating your own controls, and adding them to the toolbox before trying to configure one based on the simple page-selector being shown here.

To start, add a web control to your project. We’ll be demonstrating a simple way to add a selector to an Image tag added on the front end of the control.


<asp:HyperLink ID="GMSImageLink" runat="server">
<asp:Image ID="GMSImage" runat="server" />


public partial class Custom_UserControls_TestControl : System.Web.UI.UserControl, INamingContainer
protected void Page_Load(object sender, EventArgs e)
GMSImage.ImageUrl = Image;
GMSImageLink.NavigateUrl = NavigateUrl;

private string _Image;

[WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]
public string Image { get { return this._Image; } set { this._Image = value; } }

private Guid m_pageId;
[WebDisplayName("Starting Page ID")]
[DisplayName("Starting Page ID")]
[Description("The system ID of the starting page for the menu")]
[TypeConverter("Telerik.Cms.Web.UI.GuidTypeConverter, Telerik.Cms")]
[WebEditor("Telerik.Cms.Web.UI.DhlIdEditor, Telerik.Cms")]
[DefaultValue(typeof(Guid), "00000000-0000-0000-0000-000000000000")]
public Guid PageId
get { return this.m_pageId; }
set { this.m_pageId = value; }

private string m_StartUrl;
/// Gets or sets a value indicating the URL to start the
[WebDisplayName("Page Link")]
[DisplayName("Page link")]
[Description("The URL of the Page you are linking to")]
[WebEditor("Telerik.Cms.Web.UI.DhlUrlEditor, Telerik.Cms")]
public string NavigateUrl
get { return this.m_StartUrl; }
set { this.m_StartUrl = value; }

Posted in, C-Sharp, C#, Sitefinity