Telerik blogs

Welcome to the sixth tutorial in my series of tutorials about the Telerik CAB Enabling Kit. This week, we will learn how to use the RadTreeView UIExtensionSite. I will be using a TCEK enabled Smart Client Application as the base for this tutorial. I’ve also create a simple module called the Settings module that I will use in this tutorial.

Adding the RadTreeView UIExtensionSite

To add the RadTreeView UIExtensionSite, the first step you will need to take is to simply drag a RadTreeView onto the ShellLayoutView.cs form. Inside the code-behind, add a property to the RadTreeView so you can access it from the presenter.

internal RadTreeView MainRadTreeView
    get { return _mainRadTreeView; }


In the Infrastructure.Interface project, in UIExtensionSiteNames.cs, add a new string name constant for the UIExtensionSite to use.

public const string MainRadTreeView = "MainRadTreeView";


In the ShellLayoutViewPresenter.cs file, update the OnViewSet() method to register the RadTreeView as a UIExtensionSite.

protected override void OnViewSet()
     // ...
     WorkItem.UIExtensionSites.RegisterSite(UIExtensionSiteNames.MainRadTreeView, View.MainRadTreeView);
     // ...


This is where the RadTreeView gets a little bit different than your average UIExtensionSite. Normally, we would want to setup command invokers on any objects we use with an extension site. In the case of the RadTreeView, we will be using RadTreeNodes to extend it, and RadTreeNodes do not have a click event that we can subscribe to. The Selected event of the actual RadTreeView is what we will actually need to use to detect when a node has been selected. To set this up, you will need to, instead, use an EventPublication. For the event arguments of the event publication, you can simply use a string name in the Tag value of a node to represent which node it is.

#region Event Publications
[EventPublication(EventTopicNames.RadTreeViewNodeSelected, PublicationScope.Descendants)]
public event System.EventHandler<EventArgs<object>> RadTreeViewNodeSelected;
protected override void OnViewSet()
    // ...
    // Subscribe to the selected event so that we are notified when a node is selected
    View.MainRadTreeView.Selected += new System.EventHandler(MainRadTreeView_Selected);
/// <summary>
/// This is called when a node is selected in the RadTreeView.
/// From here, we can signal the CAB event, OnRadTreeViewNodeSelected, with the Tag of the node.
/// </summary>
void MainRadTreeView_Selected(object sender, System.EventArgs e)
    EventArgs<object> args = new EventArgs<object>(View.MainRadTreeView.SelectedNode.Tag);
#region Event Invokers
protected virtual void OnRadTreeViewNodeSelected(EventArgs<object> eventArgs)
    if (RadTreeViewNodeSelected != null)
        RadTreeViewNodeSelected(this, eventArgs);


Extending The RadTreeView UIExtensionSite

In the SettingsModule’s ModuleController.cs file, I’ve extended the base set of methods to include an ExtendRadTreeView() method that gets called from the Run() method.

public override void Run()
    ExtendRadTreeView(); // extend the RadTreeView


In the ExtendRadTreeView() method, I’ve extended the RadTreeView by creating and adding RadTreeNodes with children nodes. Each child node contains a string name Tag that I use to determine which node has been clicked.


private void ExtendRadTreeView()
    // Extend the RadTreeView to contain an "Environment" section.
    RadTreeNode environmentNode = new RadTreeNode("Environment");
    RadTreeNode environmentGeneralNode = new RadTreeNode("General");
    environmentGeneralNode.Tag = "Environment.General";
    RadTreeNode environmentHelpNode = new RadTreeNode("Help");
    environmentHelpNode.Tag = "Environment.Help";
    RadTreeNode environmentStartupNode = new RadTreeNode("Startup");
    environmentStartupNode.Tag = "Environment.Startup";
    // Extend the RadTreeView to contain an "HTML Designer" section.
    RadTreeNode htmlDesignerNode = new RadTreeNode("HTML Designer");
    RadTreeNode htmlDesignerGeneralNode = new RadTreeNode("General");
    htmlDesignerGeneralNode.Tag = "HTMLDesigner.General";
    RadTreeNode htmlDesignerHelpNode = new RadTreeNode("CSS");
    htmlDesignerHelpNode.Tag = "HTMLDesigner.CSS";
    RadTreeNode htmlDesignerStartupNode = new RadTreeNode("CSS Styling");
    htmlDesignerStartupNode.Tag = "HTMLDesigner.CSSStyling";


Finally, I’ve subscribed to the RadTreeViewNodeSelected EventTopic. In the subscription method, I determine which view to show based on the string name provided in the event arguments, then I show it.

[EventSubscription(EventTopicNames.RadTreeViewNodeSelected, ThreadOption.Publisher)]
public void OnRadTreeViewNodeSelected(object sender, EventArgs<object> eventArgs)
    string tagName = (string)eventArgs.Data;
    if (tagName == "Environment.General")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.Environment.General>("Environment.General", WorkspaceNames.RightWorkspace);
    else if (tagName == "Environment.Help")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.Environment.Help>("Environment.Help", WorkspaceNames.RightWorkspace);
    else if (tagName == "Environment.Startup")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.Environment.Startup>("Environment.Startup", WorkspaceNames.RightWorkspace);
    else if (tagName == "HTMLDesigner.General")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.HTMLDesigner.General>("HTMLDesigner.General", WorkspaceNames.RightWorkspace);
    else if (tagName == "HTMLDesigner.CSS")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.HTMLDesigner.CSS>("HTMLDesigner.CSS", WorkspaceNames.RightWorkspace);
    else if (tagName == "HTMLDesigner.CSSStyling")
        ShowViewInWorkspace<RadExtensionSites.SettingsModule.HTMLDesigner.CSSStyling>("HTMLDesigner.CSSStyling", WorkspaceNames.RightWorkspace);


Running the Application

Once all of this is set up, the application looks as follows.

 The RadTreeView UIExtensionSite Demo Application

Clicking on any of the nodes causes the RadTreeViewNodeSelected event to be called and therefor causes the currently visible view to be changed.


Click here to download the source code used in this post.


Comments are disabled in preview mode.