DotNetNuke 5.4 Cookbook

Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS Create and customize your own DotNetNuke website with blog, forums, newsletters, wikis and many more popular website features Learn custom module development and rich content management with sample code and tips Provides samples of styling and skinning a DotNetNuke portal Offers advanced programming tips combining DNN with AJAX and JQuery Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

Read more about this book

(For more resources on DotNetNuke, see here.)

Showing data in a Treeview

A Treeview control is used when you have information arranged in a hierarchy like the organizational chart of a company. The Treeview control will show each level in the hierarchy with an icon to drill-down or expand to the next level.

Getting ready

To follow along with this recipe you must have completed the following recipes:

• Deploying a module as a standalone package
• Displaying a Datagrid with filter controls
• Adding web controls to your Toolbox

The Treeview control requires that the employees in the Employee table have been assigned to managers. Here is the data that was used in this recipe:

In this example, the employees are arranged in a simple two-level hierarchy. If your ManagerNo is 0 it means you are a manager. Otherwise the manager number on your record is the ItemID of your manager. So John Smith is a manager (his ManagerNo=0) and he manages Kevin Jones and Amy Roe (as their ManagerNo is John Smith's ItemID).

How to do it...

1. Launch the Development Tool and load the Employee project.
2. In the Solution Explorer, look under the references and make sure your project includes a reference to DotNetNuke.WebUtility.dll.
3. Double-click to open the ViewEmployee.ascx file.
4. Start by adding a new register directive at the top of the file:

   <%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" 
                namespace="DotNetNuke.UI.WebControls" %>

5. Next, we'll create a simple tree control by placing the following code at the bottom of the file, right after the paging control:

   <dnn:PagingControl ID="ctlPagingControl" runat="server">
   </dnn:PagingControl>
   <br />
   
   <DNN:DnnTree ID="treeManager" runat="server" 
       CollapsedNodeImage="~imagesplus.gif" 
       ExpandedNodeImage="~imagesminus.gif">
   </DNN:DnnTree>

6. Next, open the ViewEmployee.ascx.vb file.
7. Look at the top of the file and make sure the following imports are there:

   Imports System.Data.SqlClient
   Imports DotNetNuke.UI.WebControls

8. We must create a procedure to populate the tree control with records from the database. Find the Private Methods region at the top of the file and add the following new procedures:

   #Region "Private Methods"
   
   Private Sub PopulateTreeControl()
   
       ' set the images to use for the nodes
       treeManager.ImageList.Add("..imagesicon_hostusers_16px.gif")
       treeManager.ImageList.Add("..imagesicon_users_16px.gif")
   
       ' reset the tree control
       treeManager.TreeNodes.Clear()
   
       Dim objParentNode As TreeNode
   
       ' get the list of all managers and create a parent node for each 
                                                                    one
   
       Dim objEmployeeController As New EmployeeController
       Dim drMgr As SqlDataReader
       drMgr = objEmployeeController.GetManagersDR(ModuleId)
   
       If drMgr.HasRows Then
      Do While drMgr.Read()
   
          objParentNode = New TreeNode()
   
          objParentNode.Text = drMgr("EmpLastName") + ", " + 
                                                   drMgr("EmpFirstName")
          objParentNode.ImageIndex = 0 ' manager image
          objParentNode.ClickAction = eClickAction.Expand ' when click 
                                                    on a manager, expand
          objParentNode.HasNodes = True
          treeManager.TreeNodes.Add(objParentNode)
   
          PopulateEmployeeNodes(objParentNode, drMgr("ItemId"))
      Loop
   
       End If
   
       drMgr.Close()
   
   End Sub
   
   Private Sub PopulateEmployeeNodes(ByRef objParentNode As TreeNode, 
                                          ByVal ParentItemId As Integer)
   
       Dim objChildNode As TreeNode
   
       ' get the list of all employee with the given manager
   
       Dim objEmployeeController As New EmployeeController
       Dim colEmployees As ArrayList
       Dim objEmployeeInfo As EmployeeInfo
       Dim TotalRecords As Integer
       colEmployees = objEmployeeController.GetEmployeesByFilter
                     (ModuleId, ParentItemId, -1, 0, 1000, TotalRecords)
   
       If colEmployees.Count > 0 Then
      ' add a node to the parent that was passed
   
      For intEmp = 0 To colEmployees.Count - 1
          objEmployeeInfo = CType(colEmployees(intEmp), EmployeeInfo)
          objChildNode = New TreeNode(objEmployeeInfo.EmpLastName + ", " 
                                         + objEmployeeInfo.EmpFirstName)
          objChildNode.ImageIndex = 1 ' employee image
          objParentNode.TreeNodes.Add(objChildNode)
      Next intEmp
   
       End If
   
   End Sub
   
   #End Region

9. What we are doing here is calling a new GetManagersDR function for the first level of the tree, then calling the GetEmployeesByFilter function to get the list of employees for each manager.
10. Next, we need to call these new procedures when the page loads, so scroll down to the Page_Load procedure and add the following code inside the IsPostBack check:

    If Page.IsPostBack = False Then
    
        If Not Request.QueryString("PageRecords") Is Nothing Then
       ddlRecordsPerPage.SelectedValue = 
                                   Request.QueryString("PageRecords")
        End If
    
        BindManagerDropDown()
        BindSalaryDropDown()
    
        BindData()
    
        PopulateTreeControl()
    End If

11. Next, open the EmployeeController.vb file.
12. The last step is to create the new GetManagersDR function. This is just like the GetManagers function, but this the function returns the list of managers as a DataReader. Add the following code to the bottom of the Public Methods region:

    Public Function GetManagersDR(ByVal ModuleId As Integer) As 
          SqlDataReader
        Return DataProvider.Instance().GetManagers(ModuleId)
    End Function
    
    #End Region

    Unlock access to the largest independent learning library in Tech for FREE!

    Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

    Renews at €14.99/month. Cancel anytime

    START FREE TRIAL
13. Select Save All from the File menu.
14. To check the results, build and deploy the module to a development portal for testing.
15. Go to the ACME Employee page to see the list of employees in a tree control.

    

How it works...

In this recipe we saw the tasks to organize database records in a hierarchy tree control:

• We placed the control in the .ascx file
• We defined the images to use for the expand and collapse indicators
• In the code behind file we changed the Page_Load procedure to populate the tree
• We created a PopulateTreeControl procedure with two parts:
  • Query the database for the employee managers
  • For each manager add them to the tree and query the database for the employees they manage

Using a TabStrip to separate content

There are many times when you have a lot of information to display, but not enough space on the page. The TabStrip control maximizes the available space by separating the content into tabs and displaying one tab at a time.

To demonstrate this control we're going to take the five fields of the Edit Employee page and split them onto two different tabs.

Getting ready

To follow along with this recipe you must have completed the following recipes:

• Adding web controls to your Toolbox
• Deploying a module as a standalone package

How to do it...

1. Launch the Development Tool and load the Employee project.
2. In the Solution Explorer, look under the references and make sure your project includes a reference to DotNetNuke.WebUtility.dll.
3. Double-click to open the EditEmployee.ascx file.
4. Make sure the following register directive is at the top of the file:

   <%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" 
                namespace="DotNetNuke.UI.WebControls" %> 

5. We will replace the existing HTML table containing the employee fields with a TabStrip control table holding the name fields under the first tab and the information fields under the second tab. Replace the existing HTML table with the following highlighted code:

   <%@ Control language="vb" Inherits="ACME.Modules.Employee.EditEmployee" AutoEventWireup="false 
             Explicit="True" Codebehind="EditEmployee.ascx.vb" %>
   <%@ Register TagPrefix="dnn" TagName="Label" 
                Src="~/controls/LabelControl.ascx" %>
   <%@ Register TagPrefix="dnn" TagName="TextEditor" 
                Src="~/controls/TextEditor.ascx"%>
   <%@ Register TagPrefix="dnn" TagName="Audit" 
                Src="~/controls/ModuleAuditControl.ascx" %>
   <%@ Register tagprefix="DNN" assembly="DotNetNuke.WebControls" 
                namespace="DotNetNuke.UI.WebControls" %>  
   
   <DNN:DNNTabStrip 
       ID="tsEmployee" 
       runat="server" 
       TabRenderMode="All"
       CssTabContainer="LoginTabGroup"
       CssContentContainer="LoginContainerGroup" 
       DefaultContainerCssClass="LoginContainer"
       DefaultLabel-CssClass="LoginTab"
       DefaultLabel-CssClassHover="LoginTabHover"
       DefaultLabel-CssClassSelected="LoginTabSelected" 
       visible="true" >
       <dnn:DNNTab Label-Text="Employee Name" ID="tab1">
           <table width="650" cellspacing="0" cellpadding="0" border="0" 
                  summary="Edit Table">
               <tr valign="top">
                   <td class="SubHead" width="125"><dnn:label 
                       id="lblEmpFirstName" runat="server" 
                       controlname="lblEmpFirstName" suffix=":">
                                                    </dnn:label>
                   </td>
                   <td>
                   <asp:TextBox ID="txtEmpFirstName" runat="server">
                   </asp:TextBox>
                   <asp:RequiredFieldValidator ID="valEmpFirstName" 
                              resourcekey="valEmpFirstName.ErrorMessage" 
                                     ControlToValidate="txtEmpFirstName"
                   CssClass="NormalRed" Display="Dynamic" 
                     ErrorMessage="<br>EmpFirstName is required" 
                       Runat="server" />
                   </td>
               </tr>
   
               <tr valign="top">
                   <td class="SubHead" width="125"><dnn:label 
                                      id="lblEmpLastName" runat="server" 
                                controlname="lblEmpLastName" suffix=":">
                                                   </dnn:label>
                   </td>
                   <td>
                   <asp:TextBox ID="txtEmpLastName" runat="server">
                   </asp:TextBox>
                   <asp:RequiredFieldValidator ID="valEmpLastName" 
                              resourcekey="valEmpLastName.ErrorMessage" 
                              ControlToValidate="txtEmpLastName"
                   CssClass="NormalRed" Display="Dynamic" 
                     ErrorMessage="<br>EmpLastName is required" 
                       Runat="server" />
                   </td>
               </tr>
           </table>
       </dnn:DNNTab>
       <dnn:DNNTab Label-Text="Information" ID="tab2">
           <table width="650" cellspacing="0" cellpadding="0" border="0" 
                  summary="Edit Table">
           
           <tr valign="top">
               <td class="SubHead" width="125"><dnn:label 
                   id="lblManagerNo" runat="server" 
                   controlname="lblManagerNo" suffix=":">
                                               </dnn:label>
               </td>
               <td>
               <asp:TextBox ID="txtManagerNo" runat="server">
               </asp:TextBox>
               <asp:RequiredFieldValidator ID="valManagerNo" 
                                resourcekey="valManagerNo.ErrorMessage" 
                                        ControlToValidate="txtManagerNo"
               CssClass="NormalRed" Display="Dynamic" 
                        ErrorMessage="<br>ManagerNo is required" 
                        Runat="server" />
               </td>
           </tr>
   
           <tr valign="top">
               <td class="SubHead" width="125"><dnn:label 
                   id="lblHireDate" runat="server" 
                   controlname="lblHireDate" suffix=":">
                                                   </dnn:label>
               </td>
               <td>
               <asp:TextBox ID="txtHireDate" runat="server">
               </asp:TextBox>
               <asp:RequiredFieldValidator ID="valHireDate" 
                                 resourcekey="valHireDate.ErrorMessage" 
                                 ControlToValidate="txtHireDate"
               CssClass="NormalRed" Display="Dynamic" 
                 ErrorMessage="<br>HireDate is required" 
                   Runat="server" />
               </td>
           </tr>
   
           <tr valign="top">
               <td class="SubHead" width="125"><dnn:label id="lblSalary" 
                      runat="server" controlname="lblSalary" suffix=":">
                                                            </dnn:label>
               </td>
               <td>
               <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
               <asp:RequiredFieldValidator ID="valSalary" 
                                   resourcekey="valSalary.ErrorMessage" 
                                   ControlToValidate="txtSalary"
               CssClass="NormalRed" Display="Dynamic" 
                 ErrorMessage="<br>Salary is required" Runat="server" />
               </td>
           </tr>
              
           </table>
       </dnn:DNNTab>
   </dnn:DNNTabStrip>
   <br /><br />
   
   <p>
       <asp:linkbutton cssclass="CommandButton" id="cmdUpdate" 
                       resourcekey="cmdUpdate" runat="server" 
                       borderstyle="none" text="Update">
       </asp:linkbutton>&nbsp;
       <asp:linkbutton cssclass="CommandButton" id="cmdCancel" 
                       resourcekey="cmdCancel" runat="server" 
                       borderstyle="none" text="Cancel" 
                       causesvalidation="False">
       </asp:linkbutton>&nbsp;
       <asp:linkbutton cssclass="CommandButton" id="cmdDelete" 
                       resourcekey="cmdDelete" runat="server" 
                       borderstyle="none" text="Delete" 
                       causesvalidation="False">
       </asp:linkbutton>&nbsp;
   </p>
   <dnn:audit id="ctlAudit" runat="server" />

The appearance of the tab strip is controlled by the styles we apply to it (CssTabContainer, CssContentContainer, DefaultLabel-CssClass, DefaultLabel-CssClassHover, and DefaultLabel-CssClassSelected). In this example we used the same styles as the DNN Login page so we have a similar look and feel. The styles are defined in the /portals/_default/default.css by default.

6. Select Save All from the File menu.
7. To check the results, build and deploy the module to a development portal for testing.
8. Go to the ACME Employee page and click on the edit icon (the little pencil) next to an employee to display the Edit Employee page.
9. When you edit the employee record you will see the fields have been separated into two separate tabs. Clicking on Employee Name displays the first tab with the name fields:

   

10. Clicking on Information reveals the remaining fields:

    

How it works...

In this recipe we saw the tasks to use a TabStrip control:

• We placed the control in the .ascx file
• We separated the existing content onto separate tabs