APNSoft.com - Web Controls, components for ASP.NET
 About Us 
 Articles 
 Products
 Downloads 
 Purchase
 Support

TreeView
Controls Suite 4.5


Overview
Features
Reference Book
Component Parts
Deployment
Defining the Structure
Appearance Customization
Templates
Server-side API
Live Demos




APNSoft TreeView uses XML for defining the structure since XML is the most convenient and widespread format for structured data. The XML Structure consists of elements (items and separators):

<TreeView>
    <item title="About Us" />
    <item title="Products">
        <item title="Menu" />
        <item title="DataGrid" />
        <item title="TreeView" />
        <separator />
        <item title="Customization" />
    </item>
    <item title="Contacts" />
</TreeView>


The code above creates the following TreeView:



Structure elements:
  • <TreeView /> - the root element for entire TreeView Structure File. Does not include attributes.
  • <item /> - one item element. Each item element can include other elements. Available attributes:

    • AutoPostBackOnItemClick - specifies a value indicating whether the control causes a postback to the server when the item is clicked.
    • Checked - specifies a value indicating whether the item is checked.
    • ClientSideOnItemClick - specifies the client-side code to be launched when the item is clicked. Can include variables $ComponentID$, $ItemID$ and $Title$. Each variable is replaced to the corresponding value.
    • href, target - the URL and target the browser is directed to when a user clicks the Item. The href attribute can include variables $ComponentID$, $ItemID$ and $Rnd$. Each variable is replaced to the corresponding value. The $Rnd$ displays a random number. It can be used as an additional parameter to avoid page caching in browser.
    • icon - specifies the name of item's icon image. The icon image displayed at the left side of the item. The icon images must be located in the Skin Folder as specified by the SkinFolder property.
    • iconOpen - specifies the name of the icon for expanded item.
    • iconWidth, iconHeight - one Item's icon image width and height. Attributes are optional. Control automatically calculates Width and Height of each icon.
    • id - specifies a unique identifier for the element. The attribute is required. If the id attribute is not specified, the component will automatically set it for each item (id="itm1", id="itm2", etc.).
    • opened - specifies a value indicating whether the item is opened (expanded).
    • selected - specifies a value indicating whether the item is selected.
    • Template - specifies the path to item's template file.
    • title - specifies the text (caption) displayed for the item. Can include HTML formatting by using of square brackets ("[" and "]") instead of standard corner brackets ("<" and ">"). Double square brackets ("[[" and "]]") are used to show single square brackets.

  • <separator /> - element for horizontal separator. Available attributes:

    • id - specifies a unique identifier for the element. The attribute is required. If the id attribute is not specified, the component will automatically set it for each separator (id="spr1", id="spr2", etc.).
    • width - specifies the width in pixels.

TreeView element examples:

<item id="i1" title="Home" />
<item id="i1" title="Home" href="~/Default.aspx?ItemID=$ItemID$&amp;Rnd=$Rnd$" />
<item title="Google" href="http://www.google.com" target="_blank" />
<item title="JavaScript" ClientSideOnItemClick="alert('The $Title$ ($ItemID$) is clicked!');" />
<item title="Folder" icon="IconFolder.gif" iconOpen="IconFolderOpen.gif" />
<item title="TV Schedule" Template="~/Templates/Template.ascx" />
<separator width="120" />

Attention! Element names and attributes are case-sensitive. Be careful when you're typing in your data.





Applying the XML Structure or Data Source:

You can save the XML definition structure as a file and bind the TreeView by specifying the StructureFileURL property. APNSoft TreeView has support to use the Web.sitemap file as a standard TreeView structure.

<APNSoft:APNSoftTreeView id="myTreeView" runat="server"
    StructureFileURL = "~/Structures/TreeView.xml" />


You can also apply the XML Document with structure by using the DataSource property. If the TreeView loads structure from the database, you should set the DataSource property to specify a source of data and call the DataBind() method. To create an appropriate table in the SQL Server, use the following SQL command:

CREATE TABLE [dbo].[Items](
    [id] [nvarchar](20) NOT NULL,
    [pid] [nvarchar](20) NULL,
    [Type] [nvarchar](10) NOT NULL CONSTRAINT [DF_Items_Type] DEFAULT ('item'),
    [title] [nvarchar](250) NULL,
    [href] [nvarchar](250) NULL,
    [target] [nvarchar](100) NULL,
    [icon] [nvarchar](100) NULL,
    [iconOpen] [nvarchar](100) NULL,
    [iconWidth] [tinyint] NULL,
    [iconHeight] [tinyint] NULL,
    [AutoPostBackOnItemClick] [bit] 
        NOT NULL CONSTRAINT [DF_Items_AutoPostBackOnItemClick] DEFAULT ((0)),
    [ClientSideOnItemClick] [nvarchar](250) NULL,
    [selected] [bit] NOT NULL CONSTRAINT [DF_Items_selected] DEFAULT ((0)),
    [Checked] [bit] NOT NULL CONSTRAINT [DF_Items_Checked] DEFAULT ((0)),
    [opened] [bit] NOT NULL CONSTRAINT [DF_Items_opened] DEFAULT ((0)),
    [Template] [nvarchar](255) NULL
)


You can also build up TreeView at runtime. APNSoft TreeView provides an extremely rich and powerful server-side API allowing developer to add, remove or edit TreeView elements and element collections. You can programmatically control any item at runtime by using two classes TreeViewElement and TreeViewElementCollection.





© 2003-2024 APNSoft. All rights reserved.    Terms of use.