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.
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;
#endregion
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);
OnRadTreeViewNodeSelected(args);
}
#region Event Invokers
protected
virtual
void
OnRadTreeViewNodeSelected(EventArgs<
object
> eventArgs)
{
if
(RadTreeViewNodeSelected !=
null
)
{
RadTreeViewNodeSelected(
this
, eventArgs);
}
}
#endregion
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()
{
AddServices();
ExtendMenu();
ExtendToolStrip();
ExtendRadTreeView();
// extend the RadTreeView
AddViews();
}
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"
);
WorkItem.UIExtensionSites[UIExtensionSiteNames.MainRadTreeView].Add<RadTreeNode>(environmentNode);
RadTreeNode environmentGeneralNode =
new
RadTreeNode(
"General"
);
environmentGeneralNode.Tag =
"Environment.General"
;
environmentNode.Nodes.Add(environmentGeneralNode);
RadTreeNode environmentHelpNode =
new
RadTreeNode(
"Help"
);
environmentHelpNode.Tag =
"Environment.Help"
;
environmentNode.Nodes.Add(environmentHelpNode);
RadTreeNode environmentStartupNode =
new
RadTreeNode(
"Startup"
);
environmentStartupNode.Tag =
"Environment.Startup"
;
environmentNode.Nodes.Add(environmentStartupNode);
// Extend the RadTreeView to contain an "HTML Designer" section.
RadTreeNode htmlDesignerNode =
new
RadTreeNode(
"HTML Designer"
);
WorkItem.UIExtensionSites[UIExtensionSiteNames.MainRadTreeView].Add<RadTreeNode>(htmlDesignerNode);
RadTreeNode htmlDesignerGeneralNode =
new
RadTreeNode(
"General"
);
htmlDesignerGeneralNode.Tag =
"HTMLDesigner.General"
;
htmlDesignerNode.Nodes.Add(htmlDesignerGeneralNode);
RadTreeNode htmlDesignerHelpNode =
new
RadTreeNode(
"CSS"
);
htmlDesignerHelpNode.Tag =
"HTMLDesigner.CSS"
;
htmlDesignerNode.Nodes.Add(htmlDesignerHelpNode);
RadTreeNode htmlDesignerStartupNode =
new
RadTreeNode(
"CSS Styling"
);
htmlDesignerStartupNode.Tag =
"HTMLDesigner.CSSStyling"
;
htmlDesignerNode.Nodes.Add(htmlDesignerStartupNode);
}
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);
}
Once all of this is set up, the application looks as follows.
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.