Creating a custom WebUITypeEditor

Creating a custom WebUITypeEditor

October 27, 2009 0 Comments

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.

The purpose of this post is to show how you can create a custom WebUITypeEditor. There are a lot of cases, where you would need to extend some base controls and implement a custom logic requiring to get some id or other value from a custom web editor.

This post will show how you can create a custom WebUITypeEditor (selector) for a custom user control. I will use RadTreeView control bound to Sitefinity's CmsSiteMap source. I will return the page's ID as a property value of type Guid. In one of my next posts I will show how to resolve this value and display a page link.

 

First, you should create a user control and in its template you should add Telerik's RadTreeView control.

 

<%@ 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 of this control you need to hook on the NodeDataBound event as you will have to disable the NavigateUrl of each item. Otherwise, when you click on a node, a new page will be opened.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Telerik.Cms.Web; 
using Telerik.Web.UI; 
 
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 = ""
        } 
    } 

 

Now that you have completed the template you should create your WebEditor. You should create a custom class that inherits from the WebUITypeEditor of type Guid. You should then implement an abstract class for WebUITypeEditor<Guid>, thus getting the selected Page's id. You should add a new property Template which will be used to specify the template path. To access the RadTreeView control from the template you have to create a control reference. In the CreatechildControls you should create an instance of the CmsManager and Instantiate your template. Afterwards, you should create the RadTreeView nodes using the LoadNodes method .

using System; 
using System.Web.UI; 
using Telerik.Cms; 
using Telerik.Cms.Web.UI; 
using Telerik.Framework.Web; 
using Telerik.Web.UI; 
 
/// <summary> 
/// Summary description for PageIDWebEditor 
/// </summary> 
public class PageIDWebEditor : WebUITypeEditor<Guid> 
    public PageIDWebEditor() 
    { 
    } 
 
    public override Guid Value 
    { 
        get 
        { 
            Guid pageId = Guid.Empty; 
            if (TreeView.SelectedNode != null
                pageId = new Guid(TreeView.SelectedNode.Value); 
            if (pageId != Guid.Empty) 
                return ((ICmsPage)manager.GetPage(pageId)).ID; 
            return Guid.Empty; 
        } 
        set 
        { 
            this.ViewState["selectedPage"] = value; 
             
        } 
    } 
 
    // TEMPLATE PATH  
    public string Templte 
    { 
        get 
        { 
            object o = this.ViewState["Template"]; 
            if (o == null
                return ("~/CustomControls/PageIDWebEditor.ascx"); 
            return (string)o; 
        } 
        set 
        { 
            this.ViewState["Template"] = value; 
        } 
    } 
 
    // CONTROL REFERENCE TO RADTREEVIRE CONTROL 
    protected virtual RadTreeView TreeView 
    { 
        get 
        { 
            return this.Controls[0].FindControl("RadTreeView1"as RadTreeView; 
        } 
    } 
 
    protected override void CreateChildControls() 
    { 
        base.CreateChildControls(); 
        this.manager = new CmsManager(); 
        this.template = ControlUtils.GetTemplate<SelectorTemplate>(this.Templte); 
        this.template.InstantiateIn(this); 
        RadTreeNode root = new RadTreeNode(); 
        root.Value = Guid.Empty.ToString(); 
        root.Text = "AllPages"
        root.Expanded = true
        TreeView.Nodes.Add(root); 
        this.LoadNodes(root); 
    } 
    //HELPER METHOD FOR LOADING OUR NODES 
    private void LoadNodes(RadTreeNode root) 
    { 
            ICmsPage sPage = null
            CmsManager manager = new CmsManager(); 
            foreach (ICmsPage page in manager.GetPages(new Guid(root.Value))) 
            { 
                RadTreeNode node = new RadTreeNode();           
                node.Value = page.ID.ToString(); 
                node.Expanded = true
                node.Text = page.MenuName; 
                node.ToolTip = page.MenuName; 
                root.Nodes.Add(node);          
            } 
             
    } 
    
    public class SelectorTemplate : ITemplate 
    { 
        public void InstantiateIn(Control container) 
        { 
        } 
    } 
 
    private ITemplate template; 
    private CmsManager manager; 
 

 

Finally, you should create a property and declare the WebEditor.

 [WebEditor("PageIDWebEditor, App_Code")] 
    public Guid PageID 
    { 
        get 
        { 
            object obj = this.ViewState["PageID"]; 
            if (obj == null
                return Guid.Empty; 
            return (Guid)obj;  
        } 
        set 
        { 
            this.ViewState["PageID"] = value; 
        } 
    } 
progress-logo

The Progress Guys

View all posts from The Progress Guys on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
d12fcc0bdb669b804e7f71198c9619a7
5 Questions Automakers Should Ask to Improve Asset Uptime
Download Whitepaper
 
SF_MQ_WCM
2018 Gartner Magic Quadrant Web Content Management (WCM)
Download Whitepaper
 
What-Serverless-Means-For-Enterprice-Apps-Kinvey
What Serverless Means for Enterprise Apps
Watch Webinar