Hierarchical Data and DNNTreeView

Recently, after upgrading to DotNetNuke 6 I had to switch from the ASP TreeView control to the DNNTreeView control.  The transition was not as smooth as I would have expected, mainly because of the lack of documentation.  Hence, I’m documenting my steps here.

The new DNNTreeView control is part of a suite of controls from Telerik.  The controls were added to make a more robust DotNetNuke CMS and I’ve been very impressed with them so far.  It’s just the lack of documentation that’s the problem.  Once you piece together how they work they really are much nicer controls.

This sample uses DotNetNuke 6, the DNNTreeView, and the generic list for data.

1. Register the namespace at the top of your page

<%@ Register TagPrefix=”dnnui” Namespace=”DotNetNuke.Web.UI.WebControls” Assembly=”DotNetNuke.Web” %>

2. Create an instance of the DNNTreeView control on your page.  I’m not covering styling here, but if you scroll the intellisense list you’ll several styling properties.

<dnnui:DnnTreeView runat=”server” ID=”tvMain”>
</dnnui:DnnTreeView>

3. Build your generic list.   This tutorial doesn’t cover building generic list data, but it does use the standard DNN generic lists.  So, if you’re familiar with that, and you should be if you’re this far into DNN coding, then you’re all set.  For this example your dataset should be built as hierarchical data.

4. Add the code to bind your data to the tree

Private Sub BindTree(Optional ByVal fFolderID As Int64 = 0)
tvMain.Nodes.Clear()

Dim treeNode = New Telerik.Web.UI.RadTreeNode()
treeNode.Text = “Folders”
treeNode.Value = 0

Dim oFolders As New {Namespace}.{ControllerClass}
Dim colFolders As List(Of {Namespace}.{InfoClass})
colFolders = oFolders.{GetDataMethod()}

BuildFolderTree(colFolders, treeNode, fFolderID)

tvMain.Nodes.Add(treeNode)

tvMain.DataBind()

If fFolderID = 0 Then
tvMain.Nodes(0).Selected = True
tvMain.SelectedNode.Expanded = True
End If
End Sub

4. Add the code to recursively add nodes to the tree.  Using the hierarchical data this create the root nodes and child nodes.

Private Sub BuildFolderTree(ByVal list As IEnumerable(Of {Namespace.InfoClass), _
ByVal parentNode As Telerik.Web.UI.RadTreeNode, Optional ByVal fFolderID As Int64 = 0)

Dim nodes = list.Where(Function(x) If(parentNode Is Nothing, x.ParentID = 0, x.ParentID = Integer.Parse(parentNode.Value)))

For Each node As Namespace.InfoClass In nodes
Dim newNode As New Telerik.Web.UI.RadTreeNode(node.Folder, node.FolderID)

If parentNode Is Nothing Then
tvMain.Nodes.Add(newNode)
Else
parentNode.Nodes.Add(newNode)
End If

BuildFolderTree(list, newNode)
Next
End Sub

This is one of the major changes between the standard control and the Telerik control.  Instead of parentNode.ChildNodes.Add it’s now parentNode.Nodes.Add(newNode)

 

ADDENDUM: If you’re getting the dreaded Element ‘{name}’ is not a known element.  This can occur if there is a compilation error in the Web site, or the web.config is missing. error, see this post on a possible solution.