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.

4 comments for “Hierarchical Data and DNNTreeView

  1. May 30, 2013 at 6:35 pm

    Don’t forget to add the Dotnetnuke.web.dll to your project or it won’t see the treeview.

    • Cliff Richardson
      May 30, 2013 at 7:01 pm

      Thanks, Scott!

    • August 1, 2013 at 8:25 am

      Thanks for the post. I added followed the instructions in post “Build a Compiled DotNetNuke Module using the Visual Studio Starter Kit” and above.
      But when I try to add tag VS keep telling me:
      “Warning 102 Element ‘DnnTreeView’ is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.

      Any help will be welcome.

      • August 6, 2013 at 2:43 pm

        Luis, I’m having this problem, too. The project still seems to run okay for me, I just can’t get rid of that particular error message in Visual Studio 2012. When I find a solution I’ll let you know. So far, every solution I’ve found online doesn’t resolve my issue.

Leave a Reply