10 min read

DotNetNuke 5.4 Cookbook

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:

DotNetNuke 5.4 Cookbook

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

  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.

    DotNetNuke 5.4 Cookbook

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" />
  6. 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.

  7. Select Save All from the File menu.
  8. To check the results, build and deploy the module to a development portal for testing.
  9. 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.
  10. 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:

    DotNetNuke 5.4 Cookbook

  11. Clicking on Information reveals the remaining fields:

    DotNetNuke 5.4 Cookbook

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

 


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here