Using the MultiPage Control with the TreeView

The ComponentArt MultiPage control integrates with the ComponentArt Menu and TreeView controls to provide paging without requiring you to write any code. This topic shows how to use a TreeView to navigate among pages in a MultiPage control.

You can connect a ComponentArt TreeView to a MultiPage by setting just two properties in the TreeView:

  • Use the TreeView's MultiPageId property to point it to the ID of the MultiPage it should control (for example, MultiPageId="MultiPage1").
  • Match the TreeView node's PageViewId property to the PageView's id property.  For example, give the PageView an id such as <ComponentArt:PageView id="Connection_Settings".... Then, point the TreeView node to that page using PageViewId="Connection_Settings".

The figure below shows the page that you create with this procedure. Note that we've added optional ItemLooks, styles and ASP.NET controls to the pages to illustrate the rich interfaces that you can create.

 

To use a TreeView to select pages in a MultiPage control

  1. Add an ASP.NET page called multipgtree.aspx to your project.
  2. In design view, add an HTML table to the page with one row and two cells.
  3. From the Toolbox, drag a ComponentArt TreeView control and drop it in the left table cell.
  4. Configure the TreeView as shown in the code below. The most important properties and values are highlighted.
    <ComponentArt:TreeView id="TreeView1"
      MultiPageId="MultiPage1"
      SiteMapXmlFile="treemultidata.xml" runat="server"
      Height="250px" Width="140px"
      KeyboardEnabled="False" CssClass="TreeView"
      NodeCssClass="TreeNode" SelectedNodeCssClass="SelectedTreeNode"
      HoverNodeCssClass="HoverTreeNode" LineImageWidth="19"
      LineImageHeight="20" DefaultImageWidth="16" DefaultImageHeight="16"
      ImagesBaseUrl="images/" NodeLabelPadding="3"
      ParentNodeImageUrl="folder.gif"
      ExpandedParentNodeImageUrl="folder_open.gif"
      LeafNodeImageUrl="file.gif"
      ShowLines="True" LineImagesFolderUrl="images/lines/">
    </ComponentArt:TreeView>
  5. Using Windows Explorer, copy the TreeView image files into your project. By default, the folder images are in
    \live_examples\multipage\features\multipage_treeview\images.
  6. In HTML view, just before the closing </head> tag, provide design content for the TreeView and MultiPage controls by inserting the following style sheet information.
    <style>								
    .TreeView
    {
      background-color:White;
      padding-top:4px;
      padding-left:1px;
      border: #7C7C94 1px solid;
      cursor:default;
    }
    .TreeNode
    {
      font-family: tahoma;
      font-size: 11px;
      padding-top:2px;
      padding-bottom:1px;
      padding-left: 3px;
      padding-right: 3px;
    }
    .HoverTreeNode
    {
      font-family: tahoma;
      font-size: 11px;
      text-decoration:underline;
      padding-top:2px;
      padding-bottom:1px;
      padding-left: 3px;
      padding-right: 3px;
      cursor: default;
    }
    .SelectedTreeNode
    {
      font-family: tahoma;
      font-size: 11px;
      background-color: gray;
      color:white;
      padding-top:2px;
      padding-bottom:1px;
      padding-left: 3px;
      padding-right: 3px;
      cursor: default;
    }
    .MultiPage
    {
      background-color:White;
      border: 1px solid #919B9C;
      width:398px;
      height:250px;
      padding:10px;
      z-index:98;
    }
    .PageContent
    {
      font-family:MS Sans Serif, Verdana;
      font-size:10px;
    }
    .PageHeader
    {
      font-size:22px;
      font-weight:bold;
      letter-spacing:-0.2mm;
      font-family: verdana;
      color: #3F3F3F;
      margin-top:0px;
      margin-bottom:0px;
    }
    </style>
    
  7. Add an XML file to your project called treemultidata.xml and insert the following content:
    <siteMap>
       <siteMapNode Text="Select by Page" Expanded="true" Selectable="false">
           <siteMapNode Text="Page 1" PageViewId="Web_Site_Settings" ID="n1" />
           <siteMapNode Text="Page 2" PageViewId="Connection_Settings" />
           <siteMapNode Text="Page 3" PageViewId="Logging_Settings" />
       </siteMapNode>
    </siteMap>
  8. In design view, drag a ComponentArt MultiPage control from the Toolbox and drop in into the table cell on the right. Make sure the ID value of the MultiPage is MultiPage1.
  9. In HTML view, configure the MultiPage control with three PageView controls and some ASP.NET content for each. You can use the follow markup:
    <ComponentArt:MultiPage id="MultiPage1" CssClass="MultiPage" runat="server">
      <ComponentArt:PageView id="Web_Site_Settings" CssClass="PageContent" 
        runat="server">
        <span class="PageHeader">Page 1</span>
        <br>
        <br>
        <font color="blue">Web Site Settings</font><br>
        <br>
        <table cellspacing="0" cellpadding="3" border="0">
          <tr>
            <td class="PageContent" width="90">Description:
            </td>
            <td class="PageContent">
              <asp:TextBox id="TextBox1" Text="Default Web Site" width="180" 
               runat="server" /></td>
            <td class="PageContent"></td>
          </tr>
          <tr>
            <td class="PageContent" width="90">IP Address:
            </td>
            <td class="PageContent">
              <asp:DropDownList ID="DropDownList1" width="180" Runat="server">
                <asp:ListItem Value="All Unassigned">All Unassigned</asp:ListItem>
                <asp:ListItem Value="188.160.141.24">188.160.141.24</asp:ListItem>
                <asp:ListItem Value="188.160.141.25">188.160.141.25</asp:ListItem>
                <asp:ListItem Value="188.160.141.26">188.160.141.26</asp:ListItem>
              </asp:DropDownList>
            </td>
            <td class="PageContent">
              <asp:Button id="Button1" Text="Advanced..." runat="server" /></td>
          </tr>
          <tr>
            <td class="PageContent" width="90">TCP Port:
            </td>
            <td class="PageContent">
              <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td>
                    <asp:TextBox id="TextBox2" Text="80" runat="server" width="50" /></td>
                  <td class="PageContent" width="50">SSL Port:
                  </td>
                  <td align="right" width="50">
                    <asp:TextBox id="TextBox3" Text="" runat="server" width="50" /></td>
                </tr>
              </table>
            </td>
            <td class="PageContent"></td>
          </tr>
        </table>
      </ComponentArt:PageView>
      <ComponentArt:PageView id="Connection_Settings" CssClass="PageContent" 
       runat="server">
        <span class="PageHeader">Page 2</span>
        <br>
        <br>
        <font color="blue">Connection Settings</font><br>
        <br>
        <table cellspacing="0" cellpadding="3" border="0">
          <tr>
            <td class="PageContent">
              Connection Timeout:    
              <asp:TextBox id="TextBox4" Text="900" runat="server" width="80" />
              seconds
            </td>
          </tr>
          <tr>
            <td class="PageContent">
              <asp:CheckBox id="CheckBox1" Text="HTTP Keep-Alives Enabled" Checked="true" 
               runat="server" />
            </td>
        </table>
      </ComponentArt:PageView>
      <ComponentArt:PageView id="Logging_Settings" CssClass="PageContent" runat="server">
        <span class="PageHeader">Page 3</span>
        <br><br><font color="blue">
          Logging Settings</font><br><br>Active Log Format: <br>
         <asp:DropDownList ID="DropDownList2" Width="250" Runat="server">
          <asp:ListItem Value="W3C Extended Log File Format">W3C Extended Log File Format
          </asp:ListItem>
          <asp:ListItem Value="Microsoft IIS Log File Format">Microsoft IIS Log File Format
          </asp:ListItem>
          <asp:ListItem Value="NCSA Common Log File Format">NCSA Common Log File Format
          </asp:ListItem>
        </asp:DropDownList> <asp:Button id="Button2" Text="Properties..." runat="server" />
      </ComponentArt:PageView>
    </ComponentArt:MultiPage>
  10. Build and browse the page. Select a node on the TreeView to display the corresponding page in the MultiPage control.

See Also

PageViewId Property | MultiPageId Property

Copyright © 2010 ComponentArt Inc. All rights reserved.