Using the DNNMenu Control

The DNNMenu 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. In this example the control will be used to create a list of websites that you can click on to take you to a 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 DNNMenu 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 "MyDNNMenu".
   
    
5. Under the properties for the control, change set the ChildArrowImage property to  "../../../Images/Fwd.gif".
   
    
6. When you look at the page in source view the code should read like this (In the example below the Orientation has been set to "Horizontal". You can leave this blank):
   
    
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
   myDNNMenu.ImageList.Add("../../../Images/folder.gif")
   myDNNMenu.ImageList.Add("../../../Images/file.gif")
   PopulateTree()
   End If
   End Sub
   
   Private Sub PopulateTree()
   myDNNMenu.MenuNodes.Clear()
   Dim index As Integer = 0
   Dim objNode As MenuNode = New MenuNode("Tutorials")
   objNode.NavigateUrl = "http://www.adefwebserver.com/DotNetNukeHELP/"
   objNode.ToolTip = "DotNetNuke Tutorial Series"
   objNode.ImageIndex = eImageType.Folder
   objNode.ClickAction = eClickAction.Navigate
   objNode.HasNodes = True
   myDNNMenu.MenuNodes.Add(objNode)
   index = objNode.MenuNodes.Add()
   objNode = objNode.MenuNodes(index)
   objNode.Text = "DotNetNuke 4"
   objNode.ToolTip = "DotNetNuke 4 Tutorials"
   objNode.ImageIndex = eImageType.Folder
   objNode.ClickAction = eClickAction.Expand
   PopulateChildrenMenuNodes(objNode)
   End Sub
   
   Private Sub PopulateChildrenMenuNodes(ByVal objParent As MenuNode)
   Dim index As Integer = 0
   Dim objMenuNode As MenuNode
   index = objParent.MenuNodes.Add()
   objMenuNode = objParent.MenuNodes(index)
   objMenuNode.Text = "Super-Simple Module (DAL+)"
   objMenuNode.NavigateURL = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_ShowMeThePages/"
   objMenuNode.ImageIndex = eImageType.Page
   objMenuNode.ClickAction = eClickAction.Navigate
   index = objParent.MenuNodes.Add()
   objMenuNode = objParent.MenuNodes(index)
   index += 1
   objMenuNode.Text = "Super-Fast Super-Easy Module (DAL+)"
   objMenuNode.NavigateURL = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_Things4Sale/"
   objMenuNode.ImageIndex = eImageType.Page
   objMenuNode.ClickAction = eClickAction.Navigate
   index = objParent.MenuNodes.Add()
   objMenuNode = objParent.MenuNodes(index)
   index += 1
   objMenuNode.Text = "Create a full complete Module"
   objMenuNode.NavigateURL = "http://www.adefwebserver.com/DotNetNukeHELP/DNN_Module4/"
   objMenuNode.ImageIndex = eImageType.Page
   objMenuNode.ClickAction = eClickAction.Navigate
   End Sub
   
   Public Enum eImageType
   Folder
   Page
   End Enum

8. Switch back to design view and click on the DNNMenu control. In the properties for the DNNMenu control, click on the yellow lazerbolt to show the events for the control
   
    
9. We see that there are events that we can wireup a method to. Type "MyDNNMenu_PopulateOnDemand" for the PopulateOnDemand event and click away from the box.
   
    
10. Visual Studio switches to code view and your method is all ready for your custom code. Add "PopulateChildrenMenuNodes(e.Node)" to the method so it appears like this:

    Protected Sub MyDNNMenu_PopulateOnDemand(ByVal source As Object, ByVal e As DotNetNuke.UI.WebControls.DNNMenuEventArgs) Handles myDNNMenu.PopulateOnDemand
    PopulateChildrenMenuNodes(e.Node)
    End Sub

     

11. Save the page and Build the page.
    
     
12. 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