DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Using the DNNTree Control

The DNNTree control will display items in an expandable tree. This is a very complex and customizable control and has extensive documentation that is provided to fully explore it's features. The example at http://webcontrols.dotnetnuke.com shows how the control can be used to dynamically build a file manager (you can download the source here). This is a brief introduction to the control to show how easy it is to get it up and running. In this example the control will be used to create a list of websites that you can click on to take you to the particular site.

Here are the steps to implement this web control in your own modules. This works with the full version of Visual Studio 2005 and also Visual Web Developer Express.

If you haven't already performed this step, you will want to add the DNN web controls to your Visual Studio toolbox:

  1. Right-Click on the Toolbox in Visual Studio and select Choose Items...

     
  2. Use the Browse button to browse to DotNetNuke.WebControls.dll (in the /bin folder of your DotNetNuke installation) and click the OK button.
  3. The DotNetNuke web controls will now appear in your toolbox:

     
  4. Drag the DNNTree control from the toolbox and drop it on to your DotNetNuke User Control  (See my tutorial Creating a  Super-Simple DotNetNuke module for information on how to create a DotNetNuke User Control). In the properties for the control, change the ID property to "MyDNNTree".

     
  5. Under the properties, change the CollapsedNodeImage to  "../../../Images/Plus.gif" and ExpandedNodeImage to "../../../Images/Minus.gif"

     
  6. When you look at the page in source view the code should read like this:

     
  7. In the code behind, ensure that your User Control  has this line toward the top:  Inherits Entities.Modules.PortalModuleBase. Next, add the following code:
      

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    If Not Page.IsPostBack Then
    MyDNNTree.ImageList.Add("../../../Images/folder.gif")
    MyDNNTree.ImageList.Add("../../../Images/file.gif")
    PopulateTree()
    End
    If
    End
    Sub

    Private
    Sub PopulateTree()
    MyDNNTree.TreeNodes.Clear()
    Dim index As Integer = 0
    Dim objNode As TreeNode = New TreeNode("Tutorials")
    objNode.NavigateUrl = "http://www.adefwebserver.com/DotNetNukeHELP/"
    objNode.ToolTip = "DotNetNuke Tutorial Series"
    objNode.ImageIndex = eImageType.Folder
    objNode.ClickAction = eClickAction.Navigate
    objNode.HasNodes = True
    MyDNNTree.TreeNodes.Add(objNode)
    index = objNode.TreeNodes.Add()
    objNode = objNode.TreeNodes(index)
    objNode.Text = "DotNetNuke 4"
    objNode.ToolTip = "DotNetNuke 4 Tutorials"
    objNode.ImageIndex = eImageType.Folder
    objNode.ClickAction = eClickAction.Expand
    PopulateChildrenTreeNodes(objNode)
    End
    Sub

    Private
    Sub PopulateChildrenTreeNodes(ByVal objParent As TreeNode)
    Dim index As Integer = 0
    Dim objTreeNode As TreeNode
    index = objParent.TreeNodes.Add()
    objTreeNode = objParent.TreeNodes(index)
    objTreeNode.Text = "Super-Simple Module (DAL+)"
    objTreeNode.NavigateUrl = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_ShowMeThePages/"
    objTreeNode.ImageIndex = eImageType.Page
    objTreeNode.ClickAction = eClickAction.Navigate
    index = objParent.TreeNodes.Add()
    objTreeNode = objParent.TreeNodes(index)
    index += 1
    objTreeNode.Text = "Super-Fast Super-Easy Module (DAL+)"
    objTreeNode.NavigateUrl = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_Things4Sale/"
    objTreeNode.ImageIndex = eImageType.Page
    objTreeNode.ClickAction = eClickAction.Navigate
    index = objParent.TreeNodes.Add()
    objTreeNode = objParent.TreeNodes(index)
    index += 1
    objTreeNode.Text = "Create a full complete Module"
    objTreeNode.NavigateUrl = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_Module4/"
    objTreeNode.ImageIndex = eImageType.Page
    objTreeNode.ClickAction = eClickAction.Navigate
    End
    Sub

    Public
    Enum eImageType
    Folder
    Page
    End Enum

 

  1. Switch back to design view and click on the DNNTree control. In the properties for the DNNTree control, click on the yellow lazerbolt to show the events for the control

     
  2. We see that there are events that we can wireup a method to. Type "MyDNNTree_PopulateOnDemand" for the PopulateOnDemand event and click away from the box.

     
  3. Visual Studio switches to code view and your method is all ready for your custom code. Add "PopulateChildrenTreeNodes(e.Node)" to the method so it appears like this:

    Protected Sub MyDNNTree_PopulateOnDemand(ByVal source As Object, ByVal e As DotNetNuke.UI.WebControls.DNNTreeEventArgs) Handles MyDNNTree.PopulateOnDemand
    PopulateChildrenTreeNodes(e.Node)
    End Sub

     

  4. Save the page and Build the page. Notice that the tool tips appear when you hover your mouse over the folders.

     
  5. You can download the code here.

This example is so simple it really does not do the control justice. However, you can see that the control is just as easy to use as a Microsoft Atlas control. In addition, all of the web controls work with ASP.NET 1.1 and DotNetNuke 3. This is yet another example of why web development is faster and easier when you use the DotNetNuke Framework.

Also see:
The ADefWebserver DotNetNuke HELP WebSite

Comments

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (41)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out