ASPNET TreeView

ComponentOne
TreeView for ASP.NET
Copyright 1987-2010 ComponentOne LLC. All rights reserved.

Corporate Headquarters
ComponentOne LLC
201 South Highland Avenue
3rd Floor
Pittsburgh, PA 15206 USA
Internet:
info@ComponentOne.com
Web site:
http://www.componentone.com
Sales
E-mail: sales@componentone.com
Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)
Trademarks
The ComponentOne product name is a trademark and ComponentOne is a registered trademark of ComponentOne LLC. All
other trademarks used herein are the properties of their respective owners.
Warranty
ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming
normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective
CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After
90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and
handling) to ComponentOne.
Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express
or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was
written. We are not responsible for any errors or omissions. ComponentOnes liability is limited to the amount you paid for the
product. ComponentOne is not liable for any special, consequential, or other damages for any reason.
Copying and Distribution
While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make
copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in
seeing that it is used by licensed users only.
This manual was produced using ComponentOne Doc-To-Help.
Table of Contents
ComponentOne TreeView for ASP.NET Overview ...................................................................... 1
What's New in ComponentOne TreeView for ASP.NET .......................................................................1
Revision History .................................................................................................................................1
Whats New in 2009 v3 .......................................................................................................................1
Installing TreeView for ASP.NET........................................................................................................2
TreeView for ASP.NET Setup Files .....................................................................................................2
System Requirements..........................................................................................................................3
Uninstalling TreeView for ASP.NET ...................................................................................................3
Deploying your Application in a Medium Trust Environment................................................................3
End-User License Agreement...............................................................................................................6
Licensing FAQs..................................................................................................................................6
What is Licensing?..............................................................................................................................6
How does Licensing Work? .................................................................................................................7
Common Scenarios.............................................................................................................................7
Common Scenarios in Mobile Applications ..........................................................................................9
Troubleshooting................................................................................................................................ 11
Technical Support............................................................................................................................. 12
Redistributable Files.......................................................................................................................... 13
About This Documentation ............................................................................................................... 13
Namespaces ..................................................................................................................................... 14
Creating an AJAX-Enabled ASP.NET Project .................................................................................... 15
Adding the C1TreeView Component to a Project................................................................................ 17
Key Features.......................................................................................................................18
TreeView for ASP.NET Quick Start.........................................................................................20
Adding C1TreeView to the Page ........................................................................................................ 20
Creating a TreeView Using the Designer ............................................................................................ 20
Binding C1TreeView to an XML File................................................................................................. 23
TreeView for ASP.NET Top Tips............................................................................................25
Design-Time Support............................................................................................................28
C1TreeView Smart Tag ..................................................................................................................... 28
C1TreeViewNodeBinding Collection Editor ....................................................................................... 30
C1TreeView Context Menu............................................................................................................... 31
TreeView Designer Form .................................................................................................................. 32
Exploring the TreeView Designer Form ............................................................................................. 33
TreeView Structure ..............................................................................................................37
TreeView Elements ..............................................................................................................37
TreeView Creation...............................................................................................................38
Static TreeView Creation................................................................................................................... 38
Dynamic TreeView Creation ............................................................................................................. 39
Data Source TreeView Creation......................................................................................................... 42
TreeView Behavior ..............................................................................................................42
Animation........................................................................................................................................ 42
Expand and Collapse Animation Effects............................................................................................. 42
Expand and Collapse Transitions....................................................................................................... 44
Expand and Collapse Duration .......................................................................................................... 46
Check Boxes..................................................................................................................................... 46
iii
Drag and Drop Nodes....................................................................................................................... 47

Load on Demand.............................................................................................................................. 47
Node Selection ................................................................................................................................. 48
Node Navigation .............................................................................................................................. 49
TreeView Appearance...........................................................................................................49
Visual Styles ..................................................................................................................................... 50
Custom Visual Styles......................................................................................................................... 51
Templates......................................................................................................................................... 52
Client-Side TreeView ...........................................................................................................52
Client-Side Properties........................................................................................................................ 52
Client-Side Methods.......................................................................................................................... 52
Client-Side Events............................................................................................................................. 52
TreeView for ASP.NET Samples .............................................................................................56
TreeView for ASP.NET Task-Based Help .................................................................................56
Adding Collapse and Expand Animation Effects................................................................................. 56
Binding C1TreeView to a Site Map .................................................................................................... 59
Preventing C1TreeViewNode from Losing its Selected State ................................................................ 61
Load and Save C1TreeView through XML......................................................................................... 62
Save the Tree as an XML .................................................................................................................. 62
Load an Existing XML TreeView into your Project............................................................................. 62
Designer Tasks ................................................................................................................................. 63
Deleting a C1TreeViewNode ............................................................................................................. 63
Renaming the TreeViewNode in the Designer..................................................................................... 65
Adding a Child Node ........................................................................................................................ 66
Inserting a Node ............................................................................................................................... 68
Adding, Inserting, and Removing Nodes Dynamically ........................................................................ 69
Add a Node Dynamically.................................................................................................................. 69
Insert a Node Dynamically ................................................................................................................ 73
Remove a Node Dynamically ............................................................................................................ 76
Displaying Static Data....................................................................................................................... 79
Retrieving the full node path using the OnMouseOver Event ............................................................... 80
iv
ComponentOne TreeView for

ASP.NET Overview
Create highly sophisticated navigational systems in your ASP.NET applications
with ComponentOne TreeView for ASP.NET. The C1TreeView controls easy
to use designers, support for Cascading Style Sheets (CSS) and templates, and
built-in animation effects gives you a customizable and flexible treeview control
that is very easy to use. The rich client-side object model enables you to use
client-side events for more client-side interactivity.
- TreeView for
ASP.NET Quick
Start (page 20)
TreeView for ASP.NET is part of ComponentOne Studio for ASP.NET, the

next breed of ASP.NET controls developed on a new client and server side
framework. This new ASP.NET control suite fully exploits the AJAX
framework to enable you to create highly interactive and sophisticated Web
applications with Studio for ASP.NET.
- TreeView
Behavior (page 42)
Getting Started
- TreeView
Elements (page 37)
What's New in ComponentOne TreeView for ASP.NET

This documentation was last revised on February 22, 2010. There were no new features added to
ComponentOne TreeView for ASP.NET.
Tip: A version history containing a list of new features, improvements, fixes, and changes for each product
is available in HelpCentral at http://helpcentral.componentone.com/VersionHistory.aspx.
Revision History
The revision history provides recent enhancements to TreeView for ASP.NET.
What's New in 2009 v3

This documentation was last revised on September 10, 2009.
A new feature has been added to ComponentOne TreeView for ASP.NET in the 2009 v3 release:
New Features
C1TreeView now supports Tri-State checkboxes. To enable tri-state checkboxes set the AllowTriState property to
true. The following image displays how the three different checkbox states visually effect the checkboxes next to
the C1TreeViewNodes:
For more information on tristate checkboxes, see Check Boxes (page 46).
Installing TreeView for ASP.NET

The following sections provide helpful information on installing ComponentOne Studio for ASP.NET:
TreeView for ASP.NET Setup Files

The ComponentOne Studio for ASP.NET installation program will create the following directory: C:\Program
Files\ComponentOne\Studio for ASP.NET. This directory contains the following subdirectories:
bin
Contains copies of all binaries (DLLs, EXEs) in the ComponentOne

Visual Studio ASP.NET package.
Common
Contains support and data files that are used by many of the demo
programs.
C1.Web.UI
Contains files (at least a readme.txt) related to the C1WebUI product.
C1WebUi\VisualStyles
Contains all external file themes.
Samples
Samples for the product are installed in the ComponentOne Samples folder by default. The path of the
ComponentOne Samples directory is slightly different on Windows XP and Windows 7/Vista machines:
Windows XP path: C:\Documents and Settings\<username>\My Documents\ComponentOne Samples
Windows 7/Vista path: C:\Users\<username>\Documents\ComponentOne Samples
The ComponentOne Samples folder contains the following subdirectories:
Common
Contains support and data files that are used by many of the demo
programs.
C1WebUi
Contains a Samples folder for the Visual Studio sample project and a
readme.txt file.
System Requirements
System requirements for ComponentOne Studio for ASP.NET components include the following:
Operating Systems:
Windows 2000
Windows Server 2003
Windows Server 2008
Windows XP SP2
Windows Vista
Windows 7
Web Server:
Microsoft Internet Information Services (IIS) 5.0 or later
Environments:
.NET Framework 2.0 or later

Visual Studio 2005 or Visual Studio 2008
Internet Explorer 6.0 or later
Firefox 2.0 or later
Safari 2.0 or later
Uninstalling TreeView for ASP.NET

To uninstall TreeView for ASP.NET:
1.
Open the Control Panel and select the Add or Remove Programs (Programs and Features in 7/Vista).
2.
Select ComponentOne Studio for ASP.NETand click the Remove button.
3.
Click Yes to remove the program.
Deploying your Application in a Medium Trust Environment

Depending on your hosting choice, you may need to deploy your Web site or application in a medium trust
environment. Often in a shared hosting environment, medium trust is required. In a medium trust environment
several permissions are unavailable or limited, including OleDbPermission, ReflectionPermission, and
FileIOPermission. You can configure your Web.config file to enable these permissions.
Note: ComponentOne controls will not work in an environment where reflection is not allowed.
ComponentOne ASP.NET controls include the AllowPartiallyTrustedCallers() assembly attribute and will work
under the medium trust level with some changes to the Web.config file. Since this requires some control over the
Web.config file, please check with your particular host to determine if they can provide the rights to override
these security settings.
Modifying or Editing the Config File

In order to add permissions, you can edit the exiting web_mediumtrust.config file or create a custom policy file
based on the medium trust policy. If you modify the existing web_mediumtrust.config file, all Web applications
will have the same permissions with the permissions you have added. If you want applications to have different
permissions, you can instead create a custom policy based on medium trust.
Edit the Config File

In order to add permissions, you can edit the exiting web_mediumtrust.config file. To edit the exiting
web_mediumtrust.config file, complete the following steps:
1.
Locate the medium trust policy file web_mediumtrust.config located by default in the
%windir%\Microsoft.NET\Framework\{Version}\CONFIG directory.
2.
Open the web_mediumtrust.config file.
3.
Add the permissions that you want to grant. For examples, see Adding Permissions (page 5).
Create a Custom Policy Based on Medium Trust

In order to add permissions, you can create a custom policy file based on the medium trust policy. To create a
custom policy file, complete the following steps:
1.
Locate the medium trust policy file web_mediumtrust.config located by default in the
%windir%\Microsoft.NET\Framework\{Version}\CONFIG directory.
2.
Copy the web_mediumtrust.config file and create a new policy file in the same directory.
Give the new a name that indicates that it is your variation of medium trust; for example,
AllowReflection_Web_MediumTrust.config.
3.
Add the permissions that you want to grant. For examples, see Adding Permissions (page 5).
4.
Enable the custom policy file on your application by modifying the following lines in your web.config file
under the <system.web> node:
<system.web>
<trust level="CustomMedium" originUrl=""/>
<securityPolicy>
<trustLevel name="CustomMedium"
policyFile="AllowReflection_Web_MediumTrust.config"/>
</securityPolicy>
...
</system.web>
Note: Your host may not allow trust level overrides. Please check with your host to see if you have these rights.
Allowing Deserialization
To allow the deserialization of the license added to App_Licenses.dll by the Microsoft IDE, you should add the
SerializationFormatter flag to security permission to the Web.config file. Complete the steps in the Modifying or
Editing the Config File (page 3) topic to create or modify a policy file before completing the following.
Add the SerializationFormatter flag to the <IPermission class="SecurityPermission"> tag
so that it appears similar to the following:
<NamedPermissionSets>
<PermissionSet
class="NamedPermissionSet"
version="1"
Name="ASP.Net">
<IPermission
class="SecurityPermission"
version="1"
Flags="Assertion, Execution, ControlThread,
ControlPrincipal, RemotingConfiguration, SerializationFormatter"/>
...
</PermissionSet>
</NamedPermissionSets>
Adding Permissions
You can add permission, including ReflectionPermission, OleDbPermission, and FileIOPermission, to the
web.config file. Note that ComponentOne controls will not work in an environment where reflection is not
allowed. Complete the steps in the Modifying or Editing the Config File (page 3) topic to create or modify a
policy file before completing the following.
ReflectionPermission
By default ReflectionPermission is not available in a medium trust environment. ComponentOne ASP.NET
controls require reflection permission because LicenseManager.Validate() causes a link demand for full trust.
To add reflection permission, complete the following:
1.
Open the web_mediumtrust.config file or a file created based on the web_mediumtrust.config file.
2.
Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears similar
to the following:
<SecurityClasses>
<SecurityClass Name="ReflectionPermission"
Description="System.Security.Permissions.ReflectionPermission, mscorlib,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>
...
</SecurityClasses>
3.
Add the following <IPermission> tag after the <NamedPermissionSets> tag so it appears similar
to the following:
<PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net">
<IPermission
class="ReflectionPermission"
version="1"
Flags="ReflectionEmit,MemberAccess" />
...
</PermissionSet>
4.
Save and close the web_mediumtrust.config file.
OleDbPermission
By default OleDbPermission is not available in a medium trust environment. This means you cannot use the
ADO.NET managed OLE DB data provider to access databases. If you wish to use the ADO.NET managed
OLE DB data provider to access databases, you must modify the web_mediumtrust.config file.
To add OleDbPermission, complete the following steps:
1.
2.
Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears similar
to the following:
<SecurityClasses>
<SecurityClass Name="OleDbPermission"
Description="System.Data.OleDb.OleDbPermission, System.Data,
...
</SecurityClasses>
3.
to the following:

<IPermission class="OleDbPermission" version="1"
Unrestricted="true"/>
...
</PermissionSet>
4.
FileIOPermission
By default, FileIOPermission is not available in a medium trust environment. This means no file access is
permitted outside of the application's virtual directory hierarchy. If you wish to allow additional file permissions,
you must modify the web_mediumtrust.config file.
To modify FileIOPermission to allow read access to a specific directory outside of the application's virtual
directory hierarchy, complete the following steps:
1.
2.
Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears
similar to the following:
<SecurityClasses>
<SecurityClass Name="FileIOPermission"
Description="System.Security.Permissions.FileIOPermission, mscorlib,
...
</SecurityClasses>
3.
to the following:
...
<IPermission class="FileIOPermission" version="1"
Read="C:\SomeDir;$AppDir$" Write="$AppDir$" Append="$AppDir$"
PathDiscovery="$AppDir$" />
...
</PermissionSet>
4.
End-User License Agreement

All of the ComponentOne licensing information, including the ComponentOne end-user license agreements, the
ComponentOne licensing model, and frequently asked licensing questions, is available online at
http://www.componentone.com/SuperPages/Licensing/.
Licensing FAQs
This section describes the main technical aspects of licensing. It may help the user to understand and resolve
licensing problems he may experience when using ComponentOne .NET and ASP.NET products.
What is Licensing?
Licensing is a mechanism used to protect intellectual property by ensuring that users are authorized to use
software products.
Licensing is not only used to prevent illegal distribution of software products. Many software vendors, including
ComponentOne, use licensing to allow potential users to test products before they decide to purchase them.
Without licensing, this type of distribution would not be practical for the vendor or convenient for the user.
Vendors would either have to distribute evaluation software with limited functionality, or shift the burden of
managing software licenses to customers, who could easily forget that the software being used is an evaluation
version and has not been purchased.
How does Licensing Work?

ComponentOne uses a licensing model based on the standard set by Microsoft, which works with all types of
components.
Note: The Compact Framework components use a slightly different mechanism for run-time licensing than the
other ComponentOne components due to platform differences.
When a user decides to purchase a product, he receives an installation program and a Serial Number. During the
installation process, the user is prompted for the serial number that is saved on the system. (Users can also enter
the serial number by clicking the License button on the About Box of any ComponentOne product, if available,
or by rerunning the installation and entering the serial number in the licensing dialog.)
When a licensed component is added to a form or web page, Visual Studio obtains version and licensing
information from the newly created component. When queried by Visual Studio, the component looks for
licensing information stored in the system and generates a run-time license and version information, which
Visual Studio saves in the following two files:
An assembly resource file which contains the actual run-time license
A "licenses.licx" file that contains the licensed component strong name and version information
These files are automatically added to the project by Microsoft Visual Studio.
In WinForms and ASP.NET 1.x applications, the run-time license is stored as an embedded resource in the
assembly hosting the component or control by Visual Studio. In ASP.NET 2.x applications, the run-time license
may also be stored as an embedded resource in the App_Licenses.dll assembly, which is used to store all run-time
licenses for all components directly hosted by WebForms in the application. Thus, the App_licenses.dll must
always be deployed with the application.
The licenses.licx file is a simple text file that contains strong names and version information for each of the
licensed components used in the application. Whenever Visual Studio is called upon to rebuild the application
resources, this file is read and used as a list of components to query for run-time licenses to be embedded in the
appropriate assembly resource. Note that editing or adding an appropriate line to this file can force Visual Studio
to add run-time licenses of other controls as well.
Note that the licenses.licx file is usually not shown in the Solution Explorer; it appears if you press the Show All
Files button in the Solution Explorer's toolbox, or from Visual Studio's main menu, select Show All Files on the
Project menu.
Later, when the component is created at run time, it obtains the run-time license from the appropriate assembly
resource that was created at design time and can decide whether to simply accept the run-time license, to throw
an exception and fail altogether, or to display some information reminding the user that the software has not
been licensed.
All ComponentOne products are designed to display licensing information if the product is not licensed. None
will throw licensing exceptions and prevent applications from running.
Common Scenarios
The following topics describe some of the licensing scenarios you may encounter.
Creating components at design time

This is the most common scenario and also the simplest: the user adds one or more controls to the form, the
licensing information is stored in the licenses.licx file, and the component works.
Note that the mechanism is exactly the same for Windows Forms and Web Forms (ASP.NET) projects.
Creating components at run time

This is also a fairly common scenario. You do not need an instance of the component on the form, but would
like to create one or more instances at run time.
In this case, the project will not contain a licenses.licx file (or the file will not contain an appropriate run-time
license for the component) and therefore licensing will fail.
To fix this problem, add an instance of the component to a form in the project. This will create the licenses.licx
file and things will then work as expected. (The component can be removed from the form after the licenses.licx
file has been created).
Adding an instance of the component to a form, then removing that component, is just a simple way of adding a
line with the component strong name to the licenses.licx file. If desired, you can do this manually using notepad
or Visual Studio itself by opening the file and adding the text. When Visual Studio recreates the application
resources, the component will be queried and its run-time license added to the appropriate assembly resource.
Inheriting from licensed components

If a component that inherits from a licensed component is created, the licensing information to be stored in the
form is still needed. This can be done in two ways:
Add a LicenseProvider attribute to the component.

This will mark the derived component class as licensed. When the component is added to a form, Visual
Studio will create and manage the licenses.licx file, and the base class will handle the licensing process as
usual. No additional work is needed. For example:
[LicenseProvider(typeof(LicenseProvider))]
class MyGrid: C1.Win.C1FlexGrid.C1FlexGrid
{
// ...
}
Add an instance of the base component to the form.

This will embed the licensing information into the licenses.licx file as in the previous scenario, and the
base component will find it and use it. As before, the extra instance can be deleted after the licenses.licx
file has been created.
Please note, that C1 licensing will not accept a run time license for a derived control if the run time license is
embedded in the same assembly as the derived class definition, and the assembly is a DLL. This restriction is
necessary to prevent a derived control class assembly from being used in other applications without a design time
license. If you create such an assembly, you will need to take one of the actions previously described create a
component at run time.
Using licensed components in console applications

When building console applications, there are no forms to add components to, and therefore Visual Studio won't
create a licenses.licx file.
In these cases, create a temporary Windows Forms application and add all the desired licensed components to a
form. Then close the Windows Forms application and copy the licenses.licx file into the console application
project.
Make sure the licenses.licx file is configured as an embedded resource. To do this, right-click the licenses.licx file
in the Solution Explorer window and select Properties. In the Properties window, set the Build Action property
to Embedded Resource.
Using licensed components in Visual C++ applications

There is an issue in VC++ 2003 where the licenses.licx is ignored during the build process; therefore, the
licensing information is not included in VC++ applications.
To fix this problem, extra steps must be taken to compile the licensing resources and link them to the project.
Note the following:
1.
Build the C++ project as usual. This should create an exe file and also a licenses.licx file with licensing
information in it.
2.
Copy the licenses.licx file from the app directory to the target folder (Debug or Release).
3.
Copy the C1Lc.exe utility and the licensed dlls to the target folder. (Don't use the standard lc.exe, it has
bugs.)
4.
Use C1Lc.exe to compile the licenses.licx file. The command line should look like this:
c1lc /target:MyApp.exe /complist:licenses.licx /i:C1.Win.C1FlexGrid.dll
5.
Link the licenses into the project. To do this, go back to Visual Studio, right-click the project, select
properties, and go to the Linker/Command Line option. Enter the following:
/ASSEMBLYRESOURCE:Debug\MyApp.exe.licenses
6.
Rebuild the executable to include the licensing information in the application.
Using licensed components with automated testing products

Automated testing products that load assemblies dynamically may cause them to display license dialogs. This is
the expected behavior since the test application typically does not contain the necessary licensing information,
and there is no easy way to add it.
This can be avoided by adding the string "C1CheckForDesignLicenseAtRuntime" to the AssemblyConfiguration
attribute of the assembly that contains or derives from ComponentOne controls. This attribute value directs the
ComponentOne controls to use design time licenses at run time.
For example:
#if AUTOMATED_TESTING
[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime")]
#endif
public class MyDerivedControl : C1LicensedControl
{
// ...
}
Note that the AssemblyConfiguration string may contain additional text before or after the given string, so the
AssemblyConfiguration attribute can be used for other purposes as well. For example:
[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime,BetaVersion")]
THIS METHOD SHOULD ONLY BE USED UNDER THE SCENARIO DESCRIBED. It requires a design
time license to be installed on the testing machine. Distributing or installing the license on other computers is a
violation of the EULA.
Common Scenarios in Mobile Applications

The following topics describe some of the licensing scenarios you may encounter when working with Mobile
components.
Updating or renewing a license

If you renew your subscription, the new license must be installed.
If the Mobile controls are licensed through a Studio subscription, then open the About Box of either an
ASP.NET control or a .NET Windows forms control and update the license by clicking the License button and
entering your serial number.
If the Mobile controls are licensed through a Studio for Mobile Devices subscription, then open the About Box of
the 1.x version of a Mobile control or run the setup again to enter your serial number. Presently, the 2.x versions
of the Mobile controls do not have the option to license or register from the About Box; therefore, it is necessary
to license through another component or the setup.
Licensing 2.x Mobile Controls through the Setup
To enter the serial number (license) through the Studio for Mobile Devices 2.0 setup, follow these steps:
1.
Run the ComponentOne Studio for Mobile Devices 2.0 setup.
2.
Follow the instructions in the setup, and enter the serial number when prompted.
There are cases where the setup may not prompt you. If you have a valid license installed already, or if you are
installing a version of the controls that has already been installed (Maintenance Mode), you will not be prompted
to enter your serial number. If you need to enter your serial number for an install, and the install is running in
Maintenance Mode, you will need to uninstall first. Once you uninstall, run the install again.
If you are still not prompted for a serial number by the time you get to the install screen, you must have a valid
license in the registry on your machine. If you still need to install a new serial number, remove the old license
and then run the setup again. There is a utility available that will remove the old license for you, which can be
found below.
License Remover
The license remover will search for the following licenses on your system: Studio Enterprise, Studio for Mobile
Devices, and individual Studio Mobile product licenses. Any licenses that are found will be populated into a list
so that you can select the ones that you would like to remove. To remove a Studio for Mobile Devices license
with the license remover, follow these steps:
1.
Unzip and run the C1LicBomb.exe.
2.
You will see an app with a list of the installed licenses on your machine. If you see both Studio Enterprise
and Studio for Mobile devices listed, select both for removal, otherwise select the one that you see. If the
new serial number that you wish to enter for Studio for Mobile Devices is not a Studio Enterprise serial
number, you will need to enter your Studio Enterprise serial number again, but this can be done through
any of the About Boxes for C1 controls with the exception of the Mobile Studio About Boxes.
3.
Select any other licenses you wish to remove, then click the Remove Selected Licenses button.
4.
You will be asked if you are sure that you want to delete each key; click OK when you get the dialog box.
5.
There will also be a dialog box to let you know that a particular key was removed successfully; click OK
for that one also.
6.
Now you can close the program and run your Studio for Mobile Devices setup again to enter your new
serial number.
Follow through with the setup, enter your serial number when prompted, and ComponentOne Studio for Mobile
Devices will be licensed on your machine.
Updating a project after renewing a license

Once you have installed a new license, each project must be updated in order to use the new control; rebuilding
the control is not sufficient. It is necessary for the control to regenerate the license embedded in its SupportInfo
property. To do this, it is necessary to force Visual Studio to update the control properties stored in the form. The
10
easiest way to do this is to simply modify a property. The simplest choice is to toggle a Boolean property such as
the Visible property, and then toggle it back to its original value. This results in no changes or side effects in the
control configuration, but it forces the IDE to update SupportInfo and embed the new run-time license.
Instantiating a Mobile control at run time

The Mobile controls behave the same way as other ComponentOne controls when they are created at run time
and not placed on the form at design time. Because the IDE does not have an opportunity to obtain a run-time
license on its own in this case, it is necessary to force the IDE to include a run-time license. To accomplish this,
include at least one instance of the control on a form in the assembly that is instantiated BEFORE the
dynamically created instance is created. Once a control of the same type is licensed, all others on the form are
accepted as licensed.
Troubleshooting
We try very hard to make the licensing mechanism as unobtrusive as possible, but problems may occur for a
number of reasons.
Below is a description of the most common problems and their solutions.
I have a licensed version of a ComponentOne product but I still get the splash screen when I run my
project.
If this happens, there may be a problem with the licenses.licx file in the project. It either doesn't exist, contains
wrong information, or is not configured correctly.
First, try a full rebuild (Rebuild All from the Visual Studio Build menu). This will usually rebuild the correct
licensing resources.
If that fails follow these steps:
1.
Open the project and go to the Solution Explorer window.
2.
Click the Show All Files button on the top of the window.
3.
Find the licenses.licx file and open it. If prompted, continue to open the file.
4.
Change the version number of each component to the appropriate value. If the component does not
appear in the file, obtain the appropriate data from another licenses.licx file or follow the alternate
procedure following.
5.
Save the file, then close the licenses.licx tab.
6.
Rebuild the project using the Rebuild All option (not just Rebuild).
Alternatively, follow these steps:

1.
2.
Click the Show All Files button on the top of the window.
3.
Find the licenses.licx file and delete it.
4.
Close the project and reopen it.
5.
Open the main form and add an instance of each licensed control.
6.
Check the Solution Explorer window, there should be a licenses.licx file there.
7.
For ASP.NET 2.x applications, follow these steps:

1.
2.
Find the licenses.licx file and right-click it.
11
3.
Select the Rebuild Licenses option (this will rebuild the App_Licenses.licx file).
4.
I have a licensed version of a ComponentOne product on my web server but the components still
behave as unlicensed.
There is no need to install any licenses on machines used as servers and not used for development.
The components must be licensed on the development machine, therefore the licensing information will be saved
into the executable (.exe or .dll) when the project is built. After that, the application can be deployed on any
machine, including web servers.
For ASP.NET 2.x applications, be sure that the App_Licenses.dll assembly created during development of the
application is deployed to the bin application bin directory on the web server.
If your ASP.NET application uses WinForms user controls with constituent licensed controls, the runtime
license is embedded in the WinForms user control assembly. In this case, you must be sure to rebuild and update
the user control whenever the licensed embedded controls are updated.
I downloaded a new build of a component that I have purchased, and now I'm getting the splash screen
when I build my projects.
Make sure that the serial number is still valid. If you licensed the component over a year ago, your subscription
may have expired. In this case, you have two options:
Option 1 - Renew your subscription to get a new serial number.
If you choose this option, you will receive a new serial number that you can use to license the new components
(from the installation utility or directly from the About Box).
The new subscription will entitle you to a full year of upgrades and to download the latest maintenance builds
directly from http://prerelease.componentone.com/.
Option 2 Continue to use the components you have.
Subscriptions expire, products do not. You can continue to use the components you received or downloaded
while your subscription was valid.
Technical Support
ComponentOne offers various support options. For a complete list and a description of each, visit the
ComponentOne Web site at http://www.componentone.com/Support.
Some methods for obtaining technical support include:
12
Online Support via HelpCentral

ComponentOne HelpCentral provides customers with a comprehensive set of technical resources in the
form of FAQs, samples, Version Release History, Articles, searchable Knowledge Base, searchable Online
Help and more. We recommend this as the first place to look for answers to your technical questions.
Online Support via our Incident Submission Form

This online support service provides you with direct access to our Technical Support staff via an online
incident submission form. When you submit an incident, you'll immediately receive a response via e-mail
confirming that you've successfully created an incident. This email will provide you with an Issue
Reference ID and will provide you with a set of possible answers to your question from our
Knowledgebase. You will receive a response from one of the ComponentOne staff members via e-mail in
2 business days or less.
Peer-to-Peer Product Forums and Newsgroups

ComponentOne peer-to-peer product forums and newsgroups are available to exchange information, tips,
and techniques regarding ComponentOne products. ComponentOne sponsors these areas as a forum for
users to share information. While ComponentOne does not provide direct support in the forums and
newsgroups, we periodically monitor them to ensure accuracy of information and provide comments
when appropriate. Please note that a ComponentOne User Account is required to participate in the
ComponentOne Product Forums.
Installation Issues
Registered users can obtain help with problems installing ComponentOne products. Contact technical
support by using the online incident submission form or by phone (412.681.4738). Please note that this
does not include issues related to distributing a product to end-users in an application.
Documentation
ComponentOne documentation is installed with each of our products and is also available online at
HelpCentral. If you have suggestions on how we can improve our documentation, please email the
Documentation team. Please note that e-mail sent to the Documentation team is for documentation
feedback only. Technical Support and Sales issues should be sent directly to their respective
departments.ComponentOne documentation is available with each of our products in HTML Help,
Microsoft Help 2.0 (WPF, .NET, ASP.NET and Mobile Device products only), and NetHelp format. The
NetHelp version of the documentation is also available on HelpCentral. If you have suggestions on how
we can improve our documentation, please email the Documentation team. Please note that e-mail sent to
the Documentation team is for documentation feedback only. Technical Support and Sales issues should
be sent directly to their respective departments.
Note: You must create a ComponentOne Account and register your product with a valid serial number to obtain
support using some of the above methods.
Redistributable Files
ComponentOne TreeView for ASP.NET is developed and published by ComponentOne LLC. You may use it
to develop applications in conjunction with Microsoft Visual Studio or any other programming environment that
enables the user to use and integrate the control(s). You may also distribute, free of royalties, the following
Redistributable Files with any such application you develop to the extent that they are used separately on a single
CPU on the client/workstation side of the network:
C1.Web.UI.2.dll
C1.Web.UI.Controls.2.dll
C1.Web.UI.3.dll
C1.Web.UI.Controls.3.dll
Site licenses are available for groups of multiple developers. Please contact Sales@ComponentOne.com for
details.
About This Documentation

Acknowledgements
Microsoft, Windows, Windows Vista, and Visual Studio are either registered trademarks or trademarks of Microsoft
Corporation in the United States and/or other countries.
Firefox is a registered trademark of the Mozilla Foundation.
Safari is a registered trademark of Apple Inc.
ComponentOne
If you have any suggestions or ideas for new features or controls, please call us or write:
Corporate Headquarters
13
ComponentOne LLC
201 South Highland Avenue
3rd Floor
Pittsburgh, PA 15206 USA
412.681.4343
412.681.4384 (Fax)
http://www.componentone.com
ComponentOne Doc-To-Help
This documentation was produced using ComponentOne Doc-To-Help Enterprise.
Namespaces
Namespaces organize the objects defined in an assembly. Assemblies can contain multiple namespaces, which
can in turn contain other namespaces. Namespaces prevent ambiguity and simplify references when using large
groups of objects such as class libraries.
The general namespace for ComponentOne Web products is C1.Web.UI.ControlsThe following code fragment
shows how to declare a C1Menu (which is one of the core Studio for ASP.NET classes) using the fully qualified
name for this class:
Visual Basic
Dim menu As C1.Web.UI.Controls.C1Menu
C#
C1.Web.UI.Controls.C1Menu menu;
Namespaces address a problem sometimes known as namespace pollution, in which the developer of a class library
is hampered by the use of similar names in another library. These conflicts with existing components are
sometimes called name collisions.
Fully qualified names are object references that are prefixed with the name of the namespace where the object is
defined. You can use objects defined in other projects if you create a reference to the class (by choosing Add
Reference from the Project menu) and then use the fully qualified name for the object in your code.
Fully qualified names prevent naming conflicts because the compiler can always determine which object is being
used. However, the names themselves can get long and cumbersome. To get around this, you can use the Imports
statement (using in C#) to define an alias an abbreviated name you can use in place of a fully qualified name.
For example, the following code snippet creates aliases for two fully qualified names, and uses these aliases to
define two objects:
Visual Basic
Imports C1Menu = C1.Web.UI.Controls.C1Menuew
Imports MyMenu = MyProject.Objects.C1Menu
Dim wm1 As C1Menu
Dim wm2 As MyMenu
C#
using C1Menu = C1.Web.UI.Controls.C1Menu;
using MyMenu= MyProject.Objects.C1Menu;
C1Menu wm1;
MyMenu wm2;
If you use the Imports statement without an alias, you can use all the names in that namespace without
qualification provided they are unique to the project.
14
Creating an AJAX-Enabled ASP.NET Project

ComponentOne TreeView for ASP.NET requires you to create an ASP.NET AJAX-Enabled project so that
Microsoft ASP.NET AJAX Extensions and a ScriptManager control are included in your project before the
C1TreeView control is placed on the page. This allows you to take advantage of ASP.NET AJAX and certain
features such as partial-page rendering and client-script functionality of the Microsoft AJAX Library.
When creating AJAX-Enabled ASP.NET projects, Visual Studios 2008 and 2005 both give you the option of
creating a Web site project or a Web application project. MSDN provides detailed information on why you
would choose one option over the other.
If you are using Visual Studio 2008 with .NET Framework 2.0 or .NET Framework 3.0 or if you are using Visual
Studio 2005, you must install the ASP.NET AJAX Extensions 1.0, which can be found at http://ajax.asp.net/.
Additionally for Visual Studio 2005 users, creating a Web application project requires installation of a Visual
Studio 2005 update and add-in, which can be found at http://msdn.microsoft.com/; however, if you have Visual
Studio 2005 SP1, Web application project support is included and a separate download is not required.
If you are using Visual Studio 2008 and .NET Framework 3.5, you can easily create an AJAX-enabled ASP.NET
project without installing separate add-ins because the framework has a built-in AJAX library and controls.
Note: If you are using Visual Studio 2010, see http://www.asp.net/ajax/ for more information on creating an AJAXEnabled ASP.NET Project.
The following table summarizes the installations needed:

Visual Studio Version
Additional Installation Requirements
Visual Studio 2008, .NET Framework 3.5
None
Visual Studio 2008 and .NET Framework 2.0 or 3.0
ASP.NET AJAX Extensions 1.0
Visual Studio 2005 Service Pack 1
http://www.asp.net/ajax/downloads/archive/
Visual Studio 2005
ASP.NET AJAX Extensions 1.0

Visual Studio update and add-in (2 installs for
Web application project support)
The following topics explain how to create both types of projects in Visual Studio 2008 and 2005.
Creating an AJAX-Enabled Web Site Project in Visual Studio 2008

To create a Web site project in Visual Studio 2008, complete the following steps:
1.
From the File menu, select New | Web Site. The New Web Site dialog box opens.
2.
Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you
choose .NET Framework 2.0 or 3.0, you must install the extensions first.
3.
In the list of templates, select AJAX 1.0-Enabled ASP.NET 2.0 Web Site.
4.
Click Browse to specify a location and then click OK.

Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If
you have IIS on your computer, you can specify http://localhost for the server.
A new AJAX-Enabled Web Site is created at the root of the Web server you specified. In addition, a
new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the
15
form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partialpage rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.
Creating an AJAX-Enabled Web Application Project in Visual Studio 2008

To create a new Web application project in Visual Studio 2008, complete the following steps.
1.
From the File menu, select New | Project. The New Project dialog box opens.
2.
Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you
choose .NET Framework 2.0 or 3.0, you must install the extensions first.
3.
Under Project Types, choose either Visual Basic or Visual C# and then select Web. Note that one
of these options may be located under Other Languages.
4.
Select AJAX 1.0-Enabled ASP.NET 2.0 Web Application from the list of Templates in the right
pane.
5.
Enter a URL for your application in the Location field and click OK.
A new Web Forms project is created at the root of the Web server you specified. In addition, a new
Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the
Creating an AJAX-Enabled Web Site Project in Visual Studio 2005

To create a Web site project in Visual Studio 2005, complete the following steps:
1.
From the File menu in Microsoft Visual Studio .NET, select New Web Site. The New Web Site
dialog box opens.
2.
Select ASP.NET AJAX-Enabled Web Site from the list of Templates.
3.
Enter a URL for your site in the Location field and click OK.
Creating an AJAX-Enabled Web Application Project in Visual Studio 2005

To create a new Web application project in Visual Studio 2005, complete the following steps.
16
1.
From the File menu in Microsoft Visual Studio 2005, select New Project. The New Project dialog
box opens.
2.
Under Project Types, choose either Visual Basic Projects or Visual C# Projects. Note that one of
these options may be located under Other Languages.
3.
Select ASP.NET AJAX-Enabled Web Application from the list of Templates in the right pane.
4.
Enter a URL for your application in the Location field and click OK.
5.
Adding the C1TreeView Component to a Project

When you install ComponentOne Studio for ASP.NET, the Create a ComponentOne Visual Studio Toolbox
Tab check box is checked, by default, in the installation wizard. When you open Visual Studio, you will notice a
ComponentOne Studio for ASP.NET Projects tab containing the ComponentOne controls that have
automatically been added to the Toolbox.
If you decide to uncheck the Create a ComponentOne Visual Studio Toolbox Tab check box during installation,
you can manually add ComponentOne controls to the Toolbox at a later time.
To use C1TreeView, add the C1TreeView control to the form or add a reference to the
C1.Web.UI.Controls.C1TreeView assembly in your project.
Manually Adding the Studio for ASP.NET controls to the Toolbox
When you install ComponentOne Studio for ASP.NET, the following C1TreeView component will appear in
the Visual Studio Toolbox customization dialog box:
C1TreeView
To manually add the TreeView for ASP.NET control to the Visual Studio Toolbox:
1.
Open the Visual Studio IDE (Microsoft Development Environment). Make sure the Toolbox is visible
(select Toolbox in the View menu if necessary) and right-click it to open the context menu.
2.
To make the C1TreeView component appear on its own tab in the Toolbox, select Add Tab from the
context menu and type in the tab name, C1TreeView, for example.
3.
Right-click the tab where the component is to appear and select Choose Items from the context menu.
The Choose Toolbox Items dialog box opens.
4.
In the dialog box, select the .NET Framework Components tab. Sort the list by Namespace (click the
Namespace column header) and check the check boxes for the C1TreeView component belonging to
namespace C1.Web.UI.Controls.C1TreeView.
5.
Click OK to close the dialog box.

The C1TreeView control is added Visual Studio Toolbox.
Adding C1TreeView to the Form

To add C1TreeView to a form:
1.
Add it to the Visual Studio toolbox.
2.
Double-click each control or drag it onto your form.
Adding a Reference to the Assembly

To add a reference to the C1.Web.UI.Controls.C1TreeView assembly:
1.
Select the Add Reference option from the Website menu of your Web Site project or from the Project
menu of your Web Application project.
2.
Select the most recent version of the ComponentOne Studio for ASP.NET assembly from the list on the
NET tab or browse to find the C1.Web.UI.Controls.2.dll file and click OK.
17
3.
Select the Form1.vb tab or go to View|Code to open the Code Editor. At the top of the file, add the
following Imports directive (using in C#):
Imports C1.Web.UI.Controls.C1TreeView
Note: This makes the objects defined in the C1.Web.UI.Controls.2 assembly visible to the project. See
Namespaces (page 14) for more information.
Key Features
C1TreeView consists of the following main features:
CSS Styling
C1TreeView includes CSS supported styling so that you can use cascading style sheets to easily style the
C1TreeView control to match the design of your current Web site.
Visual Styles
C1TreeView provides several built-in themes, known as visual styles, that can be easily applied through
the C1TreeView Tasks menu or they can be modified to create a new visual style. For more information
on the visual styles, see Visual Styles (page 50).
Templates
Use built-in template editing to change how the C1TreeView control appears. Templates allow you to
easily add your own elements including text, images, and controls such as buttons to various nodes.
See Templates (page 52) for more information.
Design-time Support
C1TreeView includes extensive design-time support, such as built-in designers and editors, so that you
can create and customize the C1TreeView control with little or no code. See C1TreeView Smart Tag (page
28) and TreeView Designer Form (page 32) for more information.
Data Binding
Bind the C1TreeView control to a data source you can bind to an XMLDataSource or
SiteMapDataSource, or you can even read data from AccessDataSource and create the C1TreeView
hierarchy dynamically. See Binding C1TreeView to an XML File (page 23) for more information on how
to bind an XMLDataSource to the C1TreeView control.
Animation Effects
C1TreeView includes built-in animation effects for the expanded and collapsed nodes in the C1TreeView.
You can specify the type of animation for the C1TreeView by setting the CollapseAnimation or
18
ExpandAnimation properties. See the Animation (page 42) topic for more information on C1TreeViews
animation effects.
Keyboard Support
Add access key support to give the C1TreeView control focus with a chosen key combination. At run
time users can use the keyboard arrow keys to navigate through the node items and the ENTER key to
open a link in a node item.
AJAX Support
Built-in AJAX support lets users interact with C1TreeView without the control performing a postback
operation back to the server.
Set Postbacks
Use the AutoPostBack property to determine whether C1TreeView should perform a postback to the
server each time the end user interacts with the control.
Browser Support
C1TreeView includes support for the Internet Explorer (6.0 or later), Firefox (2 or later), and Safari Web
browsers.
XHTML Compliant
C1TreeView provides complete XHTML compliance. The output that is generated is fully XHTML 1.1
compliant.
Client-Side Object Model

The C1TreeView control's client-side object model is exposed so that you can easily customize the control
with client-side script. See Client-Side TreeView (page 52) for more information.
Draggable nodes
Drag and drop nodes into different locations. See Drag and Drop Nodes (page 47) for more information.
Multiple node selection

You can easily select multiple nodes in C1TreeView by holding the CTRL key while clicking nodes. See
Node Selection (page 48) for more information on selecting multiple nodes.
Check box support

Node items can be implemented as regular check boxes which can be selected or unselected. See Check
Boxes (page 46) for more information.
Node editing
Node editing allows node items to be edited at run time by setting the AllowEdit property to true.
19
TreeView for ASP.NET Quick Start

In this quick start you will learn how to create a root and child items for the C1TreeView control, apply a visual
style, drag-and-drop treeview nodes, enable check boxes, and bind to an XMLDataSource.
Adding C1TreeView to the Page

In this lesson you will learn how to create a new ASP.NET AJAX-Enabled Web site and add a C1TreeView
control to your project.
To begin the Quick Start, complete the following steps:
1.
Begin by creating a new ASP.NET AJAX-Enabled Web Site. Note that as you've created an AJAXEnabled Web site, a ScriptManager control initially appears on the page.
2.
While in Design view navigate to the Visual Studio Toolbox and double-click the C1TreeView icon to
add the C1TreeView control to your page.
The page will appear similar to the following:
Creating a TreeView Using the Designer

This lesson will show you how to create root and child nodes, apply a visual style, and display check boxes next
to the nodes.
20
1.
Select the C1TreeView control and click on the smart tag to open its Tasks menu.
2.
Select Edit TreeView from C1TreeView Tasks menu to open the designer.
3.
Right-click on the C1TreeView item and select Add Child | C1TreeView Node to add the root to the
C1TreeView control. Set the C1TreeViewNode1's Text property to "Book List".
4.
Right-click on Book List and select Add Child to create a child for the root node. Repeat this two more
times. Three child nodes will exist under the Book List.
21
5.
Select the first node under the Book List and set its Text property to "Language Books".
6.
Select the second node under the Book List and set its Text property to "Security Books".
7.
Select the third node under the Book List and set its Text property to "Classic Books".
8.
Right-click on the Classic Books node and select Add Child to create a child for the Classic Books node.
Repeat this to create two C1TreeViewNodes under the Classic Books node.
9.
Select the first node under the Classic Books node and set its Text property to "The Great Gatsby".
10. Select the second node under the Classic Books node and set its Text property to "Catch-22".
11. Right-click on Book List and select Add Child to add to add a child node.
12. Save and run your project and observe the following:
The root node, Book List, isn't expanded since the Expanded property was set to False, by default.
Expand the Book List and notice the child nodes you created.
Notice the visual style is the default visual style.
13. Go back to your project in the design view and open the TreeView Designer Form.
14. Select the C1TreeView item and set the VisualStyle property to Vista.
15. Save and run your project and notice the visual style, Vista, is applied to C1TreeView.
16. Go back to your project in the Design view and open the TreeView Designer Form.
17. Select the C1TreeView item and in the Properties window, set its behavior properties to the following:
AllowDragDrop to True
ShowCheckBoxes to True
18. Click OK to save and close the designer.

19. Run the project and observe the following:
22
Expand the Book List node and notice the check boxes next to each treeview node.
Select any of the treeview nodes and drag it to a new location.
Binding C1TreeView to an XML File

This lesson shows you how to create an XML file through Visual Studio 2005 installed templates, add the XML
Data Source component to the Web site, assign it to the C1TreeView control, and then set the binding for the
C1TreeView.
The final application will appear similar to the following at run time:
To create an XML file, add the XMLDataSource component to the Web site, and then assign it to the
C1TreeView control.
1.
Start a new Web site project.
2.
Create a new Img folder in your project and copy the images from the Control Explorer Sample project
located in ControlExplorer\C1TreeView\Img to your new Img folder.
Note: You may need to save and close your project and reopen it again for new img folder with the graphics
to appear.
3.
Right-click on the App_Data in the Solution Explorer and select Add New Item. The Add New Item
dialog box appears.
4.
Select the XML File and rename it "treeview_structure.xml". The XML file will open.
5.
In the XML view, add the following data to the treeview_structure.xml replacing C1TreeView in each
ImgUrlNode with the name of your project:
<?xml version="1.0" encoding="utf-8" ?>
<root>
<treeviewnode Text="Adobe" ImgUrlNode
="../C1TreeView/Img/OpenedFolder.gif" Value="1"></treeviewnode>
<treeviewnode Text="Bin" ImgUrlNode
<treeviewnode Text="system32" Expanded="true" ImgUrlNodeCollapsed
="../C1TreeView/Img/Folder.gif" ImgUrlNodeExpanded
="../C1TreeView/Img/OpenedFolder.gif" Value="3">
<treeviewnode Text="DirectX" ImgUrlNode
="../C1TreeView/img/OpenedFolder.gif" Value="1"></treeviewnode>
23
<treeviewnode Text="drivers" Expanded="true"

ImgUrlNodeCollapsed="../C1TreeView/Img/Folder.gif" ImgUrlNodeExpanded
="../C1TreeView/Img/OpenedFolder.gif" Value="2">
<treeviewnode Text="disdn" ImgUrlNode
<treeviewnode Text="etc" ImgUrlNode
<treeviewnode Text="UMDF" ImgUrlNode
</treeviewnode>
<treeviewnode Text="Microsoft" ImgUrlNode
</treeviewnode>
</root>
Note: Notice how the <treeviewnode> tags are indented for the child items.
6.
Switch back to the .aspx page and select the Design tab to switch to Design view.
7.
Expand the Data node in the Visual Studio Toolbox and add the XmlDataSource component to the Web
page using a drag-and-drop operation.
8.
Right-click on the XmlDataSource control and select Properties to view its properties in the Properties
window.
9.
In the Properties window, click on the ellipsis button next to the DataFile property to open the Select
XML File dialog box. In the right pane, select the treeview_structure.xml file. Click OK to add it to the
XmlDataSource1.DataFile property.
10. In the Properties window, set the XmlDataSource1.Xpath property to "root/treeviewnode".

11. Double-click on the C1TreeView control from the Visual Studio Toolbox to add it to your page.
12. Open the C1TreeView control's C1TreeView Tasks menu and select XmlDataSource1 from the Choose
Data Source drop-down listbox
13. Click on the Source tab to switch to your source page and add the following DataBinding tags within the
C1TreeView tags.
<DataBindings>
<cc1:C1TreeViewNodeBinding DataMember="treeviewnode"
CollapsedImageUrlField="CollapsedImageUrl"
ExpandedImageUrlField="ExpandedImageUrl" ImageUrlField="ImgUrlNode"
ExpandedField="Expanded" TextField="Text" ValueField="Value" />
</DataBindings>
Note: Two key properties are the DataMember and TextField properties. The DataMember sets the data
member from the XML file to bind to the C1TreeView. The TextField gets the value of the Text property
of a C1TreeViewNode object to which the C1TreeViewNodeBinding object is applied.
14. Toggle back to the Design view and select Edit Bindings from the C1TreeView Tasks menu. The
Bindings Collection Editor appears.
15. Select treeviewnode in the pane to show the binding properties for the C1TreeViewNode.
24
Notice the DataMember, treeviewnode, is added to the C1TreeViewNodeBindingCollection and the

C1TreeViewNodeBinding properties appear in the property grid so you can easily modify the settings for
the treeviewnode object.
16. Close the Bindings Collection Editor dialog box.
17. Select the C1TreeView control and in the Properties window set the ShowCheckBoxes property to True.
18. Save and build your project. Observe that the data from the treeview_structure.xml file is reflected in the
C1TreeView control, and looks similar to the following at run time:
TreeView for ASP.NET Top Tips

The following top tips for TreeView for ASP.NET will help you when you use the C1TreeView control.
Tip 1: Use the AutoCollapse property to automatically collapse nodes that are not on the path of the
currently expanded node.
Setting the AutoCollapse property to True will automatically collapse nodes that are not on the path of the
currently expanded node.
Tip 2: Use the AllowTriState property of C1TreeView to enable tri-state checkboxes.
25
The CheckState property has three values: Checked, UnChecked and Indeterminate. If AllowTriState is set to
True and a node of C1Treeview has child nodes, its CheckState is determined by the CheckState of its children.
There are three cases which are as follows:
Case 1: All Checked property of child nodes are set to true, then the parent nodes Checked property
would be true and the CheckState is being set to Checked automatically.
Case 2: Part of childnodes Checked property are set to true, then the parent nodes Checked property will
be true, but the CheckState property will be Indeterminate.
Case 3: All childnodess Checked properties are set to false, then the parent nodes Checked property will
be false, and the Checkstate property will be UnChecked.
Tip 3: Using AllowDragDrop property, OnClientNodeDragStarted and OnClientNodeDropped events to

control DragDrop operation.
When the AllowDragDrop property is set to True, the C1TreeViewNode will be allowed to drag and drop.
The sample is for demonstrating the drag-and-drop function of C1TreeView. By using the events, only
TreeView2's child node can be dragged and dropped only to TreeView1's 2nd level.
Sample Script
<script type="text/javascript" id="ComponentOneClientScript1">
function C1TreeView2_OnClientNodeDragStarted(sender, eventArgs) {
//to specified which kind of C1TreeViewNode can be drag.
//it can use level of C1TreeViewNode,id,text or etc..
if (eventArgs.get_node().get_level() == 0) {
eventArgs.set_canceled(true);
alert("can't drag root node.");
}
};
</script>
function C1TreeView1_OnClientNodeDropped(sender, eventArgs) {
//to specified which kind of C1TreeViewNode can be dropped.
var dropped = true;
if (eventArgs.get_desObj().get_owner() == null) {
//treeview.
dropped = false;
}
else {
if (eventArgs.get_desObj().get_level() > 0) {
dropped = false;
}
}
if (!dropped) {
alert("only drop to 2nd level.");
}
};
</script>
function C1TreeView1_OnClientNodeDragStarted(sender, eventArgs) {
//to cancel the drag event,use this to prevent dragging
C1TreeView's node
//and it can add dropped node.
};
</script>
26
<cc1:C1TreeView ID="C1TreeView1" runat="server"

VisualStyle="ArcticFox" AllowDragDrop="true"
VisualStylePath="~/C1WebControls/VisualStyles"
onclientnodedropped="C1TreeView1_OnClientNodeDropped"
onclientnodedragstarted="C1TreeView1_OnClientNodeDragStarted">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False"
Expanded="True"
NavigateUrl="javascript:void(0);" NodeIndex="0"
Selected="False"
Text="node1.1">
<Nodes>
Expanded="False"
NavigateUrl="javascript:void(0);"
NodeIndex="0" Selected="False"
Text="node1.1.1">
</cc1:C1TreeViewNode>
</Nodes>
Expanded="True"
Selected="False"
Text="node1.2">
<Nodes>
Expanded="False"
Text="node1.2.1">
</Nodes>
</Nodes>
</cc1:C1TreeView>
<br />
<br />
<cc1:C1TreeView ID="C1TreeView2" runat="server"
VisualStyle="ArcticFox"
VisualStylePath="~/C1WebControls/VisualStyles"
AllowDragDrop="True"
onclientnodedragstarted="C1TreeView2_OnClientNodeDragStarted">
<Nodes>
Expanded="True"
Selected="False"
Text="node2.1">
<Nodes>
Expanded="False"
Text="node2.1.1">
</Nodes>
27
Expanded="True"
Selected="False"
Text="node2.2">
<Nodes>
Expanded="False"
Text="node2.2.1">
</Nodes>
</Nodes>
</cc1:C1TreeView>
Tip 4: Improving your applications page load performance.
To improve your applications page load performance, set the Expanded property to False.
Design-Time Support
The following sections describe how to use C1TreeView's design-time environment to configure the
C1TreeView control.
C1TreeView Smart Tag

The C1TreeView control includes a smart tag in Visual Studio. A smart tag represents a short-cut tasks menu
that provides the most commonly used properties in C1TreeView.
The C1TreeView control provides quick and easy access to the TreeView Designer Form and common
properties through its smart tag.
To access the C1TreeView Tasks menu, click on the smart tag in the upper-right corner of the C1TreeView
control. This will open the C1TreeView Tasks menu.
The C1TreeView Tasks menu operates as follows:
28
Choose Data Source

Clicking on the Choose Data Source item opens a drop-down list where you can choose an existing data
source or select a new data source to bind to.
Configure Data Source

The Configure Data Source item only appears when C1TreeView is bound to an XML data source.
Clicking on the Configure Data Source opens a dialog box where you can indicate the XML data file and
transform file to use and specify an XPath expression.
Refresh Schema
The Refresh Schema item only appears when C1TreeView is bound to a data source. Clicking on the
Refresh Schema item refreshes the designer schema applied by the data source.
Edit TreeView
Clicking on the Edit TreeView item opens the TreeView Designer Form where you can quickly
configure C1TreeView's elements without having to scroll through its Properties window. Here you can
add, remove, and re-order C1TreeViewNodes as well as set a variety of properties defining their
appearance, behavior, and more. For more information on the TreeView Designer Form, see TreeView
Designer Form (page 32).
Edit DataBindings
Clicking on the Edit Databindings item opens the Bindings Collection Editor dialog box where you can
add and remove bindings and edit properties.
VisualStylePath
Displays the default path for the visual style.
UseEmbeddedVisualStyles
When the UseEmbeddedVisualStyles is selected it enables you to use the embedded visual styles.
VisualStyle
Clicking the VisualStyle drop-down arrow enables you to select from different built-in visual styles. See
Visual Styles (page 50) for more information.
About
Clicking on the About item displays the About dialog box, which is helpful in finding the version number
of Treeview for ASP.NET and online resources.
Edit Templates
Clicking on the Edit Templates item switches the C1TreeView control to Template Editing Mode:
In Template Editing Mode, the C1TreeView Tasks menu appears with different options:
29
Display
Selecting the Display drop-down arrow will open a list of template areas that can be customized:
Select a template from this list to open that template to be edited.
End Template Editing

Clicking the End Template Editing item will end Template Editing Mode and return you to the main
C1TreeView Tasks menu.
C1TreeViewNodeBinding Collection Editor

The C1TreeView control includes a collection editor that allows you to add or remove databindings from the
C1TreeViewNodeCollection, as well as specify binding properties.
There are two ways to access the C1TreeViewNodeBinding Collection Editor:
From the C1TreeView Tasks menu:
1.
Click the smart tag in the upper-right corner of the C1TreeView control to open the C1TreeView Tasks
menu.
2.
Select Edit databindings. The Bindings Collection Editor appears.
From the TreeView Designer Form:
30
1.
Click the smart tag in the upper-right corner of the C1TreeView control to open the C1TreeView Tasks
menu.
2.
Select Edit TreeView. The TreeView Designer Form appears.
3.
With the C1TreeView control selected, click the ellipsis button next to the DataBindings property. The
C1TreeViewNodeBinding Collection Editor appears. This dialog box, although it appears slightly
different, is essentially the same as and contains the same properties as the Bindings Collection Editor.
C1TreeView Context Menu

C1TreeView has additional commands available on the context menu that Visual Studio provides for all .NET
and ASP.NET controls.
Right-click anywhere on the C1TreeView control to display the C1TreeView context menu:
31
The context menu commands operate as follows:
Edit TreeView
Clicking on the Edit TreeView item opens the TreeView Designer Form where you can quickly
configure C1TreeView's elements without having to scroll through its Properties window. Here you can
add, remove, and re-order C1TreeViewNodes as well as set a variety of properties defining their
appearance, behavior, and more. For more information on the TreeView Designer Form, see TreeView
Designer Form (page 32).
Edit DataBindings
Clicking on the Edit Databindings item opens the Bindings Collection Editor dialog box where you can
add and remove bindings and edit properties.
Edit Templates
Clicking on the Edit Templates item switches the C1TreeView control to Template Editing Mode.
TreeView Designer Form

The TreeView Designer Form is C1TreeView's designer for editing its properties, as well as the
C1TreeViewNode properties. The TreeView Designer Form is similar to the Properties window as it allows
programmers to modify the control visually. However, it allows you to select a C1TreeViewNode, set its
properties, manipulate the nodes, and then preview the appearance of the C1TreeView control, all within the
form.
In this topic you will become familiar with the TreeView Designer Form's design interface so you can use the
commands within it to edit C1TreeView with minimal effort and time.
32
To open the TreeView Designer Form , click the C1TreeView smart tag and select the Edit TreeView link from
the C1TreeView Tasks menu:
Exploring the TreeView Designer Form

The TreeView Designer Form contains a menu, toolbar, Edit tab, Preview tab, and properties pane.
33
Edit Tab
Click the Edit tab and select the C1TreeView control or the desired C1TreeViewNode for which you would like
to manipulate or adjust the properties.
Preview Tab
Click the Preview tab for a preview of what the C1TreeView control will look like.
34
Properties Pane
The TreeView Designer Form properties pane is almost identical to the Visual Studio Properties window.
Simply select a C1TreeViewNode or the C1TreeView control and set the desired properties here.
Command Buttons
The command buttons are summarized in the following table:
Button
Description
OK
Clicking OK applies the new settings to the C1TreeView control.
Cancel
Clicking Cancel closes the TreeView Designer Form, cancelling the new settings
and applying the default settings to the C1TreeView control.
TreeView Designer Form Menu

The TreeView Designer Form menu contains the following menu items and subitems:
35
Menu Item
File
Edit
Submenu Item
Description
Load from XML
Load the formatting for a C1TreeView control from an .xml file.
Save as XML
Save the current formatting of the C1TreeView control to an

.xml file.
Exit
Closes the TreeView Designer Form.
Insert Item
Inserts a new C1TreeViewNode at the specified place in the list

of nodes.
Add Child
Adds a new C1TreeViewNode as a child of the C1TreeView or of

another C1TreeViewNode.
Cut
Cuts the selected C1TreeViewNode to be moved in the list of

nodes.
Copy
Copies the selected C1TreeViewNode.
Paste
Pastes a C1TreeViewNode at the specified location in the list

of nodes.
Delete
Removes the selected C1TreeViewNode.
Rename
Allows you to change the name of the C1TreeViewNode.
TreeView Designer Form Toolbar

The toolbar for the TreeView Designer Form appears like the following:
The table below describes each button in the toolbar:

Button
36
Name
Description
Move Item Up
Moves the selected C1TreeViewNode up in the list of nodes.
Move Item Down
Moves the selected C1TreeViewNode down in the list nodes.
Move Item Left
Moves the selected C1TreeViewNode to the left in the hierarchy.
Move Item Right
Moves the selected C1TreeViewNode to the right in the hierarchy.
Add Child Item
Inserts a C1TreeViewNode as a child of the C1TreeView control or of

another C1TreeViewNode.
Insert Item
Inserts a C1TreeViewNode at the specified location in the list of

nodes.
Cut
Cuts the selected C1TreeViewNode to be moved in the list of nodes.
Copy
Copies the selected C1TreeViewNode .
Paste
Pastes a C1TreeViewNode at the specified location in the list of

nodes.
Delete
Removes the selected C1TreeViewNode.
TreeView Structure
C1TreeView is a tree type Web control that displays a hierarchical tree structure. A tree structure is used to
represent hierarchical data into a graphical form.
A tree contains one or more elements where each element is a node. A node can be a parent, child, or leaf node.
The description for each type of node is as follows:
Parent node is a node that contains other nodes.
Child node is a node that is contained by another node.
Leaf node is a node that does not contain child nodes.
Like the classic tree structure, the C1TreeView contains one or more nodes that consist of parent, child, and leaf
nodes. The parent, child, and leaf nodes are referred as C1TreeViewNodes.
C1TreeView is drawn like an inverted tree where the root appears first. The C1TreeView can contain one or
more root nodes. If a node has child nodes it can be collapsed or expanded. The ShowExpandCollapse property
allows nodes to be expanded or collapsed when set to true. Each node can have text and an image associated
with it, may be edited, selected, or display check boxes depending upon the property settings for the C1TreeView
and C1TreeViewNode objects. The tree node can be rendered as a hyperlink and have a URL associated with it.
TreeView Elements
Each C1TreeView object includes customizable UI elements for the collapsed, expanded, and non-expanded
elements/nodes as well as special vertical and horizontal lines in the tree. These elements are shown in the
following image and described in the table below:
Item
Description
Expand/Collapse image
The expansion indicator image shown above is the built-in

image used with the Default visual style. To use a different
image for expanding, set the ExpandedImageUrl property
to the path of the image. To use a different image for
collapsing, set the CollapsedImageUrl to the path of the
image. Note that if the CollapsedImageUrl or
ExpandedImageUrl are not specified, the default
expand/collapse image is used instead.
Node image
You can specify an image to display next to the node text

by using the ImageUrl property.
Node text
The node text is the text that appears on the

C1TreeViewNode object. The node text can behave like a
hyperlink when the NavigateUrl property is set or like a
button when the C1TreeViewNode is in selection mode.
When an image and text are used for the C1TreeViwNode
37
the text appears to the right of the image.

Checkbox
Check boxes allow the user to select a node or multiple

nodes at once which is helpful for interfaces like a
newsgroup tree. To enable check boxes set the
ShowCheckBoxes to True.
Hierarchical lines
The ShowLines property is useful when you would like to

see the hierarchical relationship between the objects. By
setting the ShowLines property to True you get a clear
picture of the hierarchical relationship for each object.
The following table describes C1TreeViewNode's main properties used to distinguish the node types:
C1TreeViewNode Property
Description
Nodes
Gets the C1TreeViewNodeCollection for the child nodes.
Text
Gets or sets the text displayed for this C1TreeViewNode.
Value
Gets or sets the value for the C1TreeViewNode.
ShowCheckBoxes
Allow the check box to be shown on the nodes.
ShowLines
Gets or sets a value indicating whether lines connecting

child nodes to parent nodes are displayed.
TreeView Creation
C1TreeViewNodes can be defined on your page or user control by using any of the following methods:
Static creation using declarative syntax
Dynamic creation using a contructor to create new instances of the C1TreeViewNode class.
Data source creation through binding C1TreeView to a SiteMapDataSource, XMLDataSource, or an

AccessDataSource.
Static TreeView Creation

Each node in the Tree is represented by a name/value pair, defined by the text and value properties of treenode,
repectively. The text of a node is rendered, whereas the value of a node is not rendered and is typically used as
additional data for handling postback events.
A static menu is the simplest way to create the treeview structure.
You can use the TreeView Designer Form designer to build the treeview system or you can use declarative
syntax in the .aspx file to specify the nodes.
To display static C1TreeViewNodes using the designer, open the TreeView Designer Form and add
C1TreeViewNodes to the parent. The properties for each C1TreeViewNode can be modified directly in the
designer. For more information about the menu designer, see TreeView Designer Form (page 32).
To display static C1TreeViewNodes using declarative syntax, first nest opening and closing <Nodes> tags
between opening and closing tags of the C1TreeView control. Next, create the treeview structure by nesting
<asp:C1TreeViewNode> elements between opening and closing <Nodes> tags. Each <asp:C1TreeViewNode>
element represents a node in the control and maps to a C1TreeViewNode object.
Declarative syntax can be used to define the C1TreeViewNodes inline on your page.
For example:
38
<cc1:C1TreeView ID="C1TreeView1" runat="server" AllowSorting="False"

AutoCollapse="False"
VisualStyle="Default"
VisualStylePath="~/C1WebControls/C1TreeView/VisualStyles">
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="False"
Text="C1TreeViewNode">
<Nodes>
<cc1:C1TreeViewNode runat="server"
Expanded="False" Text="C1TreeViewNode">
<Nodes>
</Nodes>
</Nodes>
</Nodes>
</cc1:C1TreeView>
Dynamic TreeView Creation

Dynamic treeviews can be created on the server side or client side. When creating dynamic treeview on the server
side, use a constructor to dynamically create a new instance of the C1TreeViewNode class. For client-side, the
CreateInstance constructor can be used to dynamically create a new instance of the C1TreeView control. For
example the follow script creates a new C1TreeView control on the client side:
var aTreeView = C1.Web.C1TreeView.createInstance ();
document.body.appendChild(aTreeView.element);
C1TreeView or C1TreeViewNode contructors can be used to create a new instance of the C1TreeView or
C1TreeViewNode class. Once the nodes are created, they can be added to the Node collection of a new node or
treeview.
For example:
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'create an instance of the class
Dim treeView As New C1TreeView()
PlaceHolder1.Controls.Add(treeView)
If Not Page.IsPostBack Then
Dim P As New C1TreeViewNode()
39
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
treeView.Nodes.Add(P)
Dim Pr1 As New C1TreeViewNode()
Pr1.Text = "Product 1"
Pr1.Value = "Pr1"
Pr1.Expanded = True
P.Nodes.Add(Pr1)
Dim Oview1 As New C1TreeViewNode()
Oview1.Text = "Overview"
Oview1.Value = "Oview1"
Pr1.Nodes.Add(Oview1)
Dim Down1 As New C1TreeViewNode()
Down1.Text = "Downloads"
Down1.Value = "Down1"
Pr1.Nodes.Add(Down1)
Dim Supp1 As New C1TreeViewNode()
Supp1.Text = "Support"
Supp1.Value = "Supp1"
Pr1.Nodes.Add(Supp1)
Pr2.Text = "Products 2"
Pr2.Value = "Pr2"
Pr2.Expanded = True
P.Nodes.Add(Pr2)
End If
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
//create an instance of the class
C1TreeView treeView = new C1TreeView();
PlaceHolder1.Controls.Add(treeView);
40
if (!Page.IsPostBack)
{
C1TreeViewNode P = new C1TreeViewNode();
P.Text = "Products";
P.Value = "PS";
P.Expanded = true;
treeView.Nodes.Add(P);
C1TreeViewNode Pr1 = new C1TreeViewNode();
Pr1.Text = "Product 1";
Pr1.Value = "Pr1";
Pr1.Expanded = true;
P.Nodes.Add(Pr1);
C1TreeViewNode Oview1 = new C1TreeViewNode();
Oview1.Text = "Overview";
Oview1.Value = "Oview1";
Pr1.Nodes.Add(Oview1);
C1TreeViewNode Down1 = new C1TreeViewNode();
Down1.Text = "Downloads";
Down1.Value = "Down1";
Pr1.Nodes.Add(Down1);
C1TreeViewNode Supp1 = new C1TreeViewNode();
Supp1.Text = "Support";
Supp1.Value = "Supp1";
Pr1.Nodes.Add(Supp1);
Pr2.Text = "Products 2";
Pr2.Value = "Pr2";
P.Nodes.Add(Pr2);
}
}
41
Data Source TreeView Creation

TreeView items can be created from a hierarchal datasource control such as an XMLDataSource or
SiteMapDataSource. This allows you to update the treeview items without having to edit code. See Binding
C1TreeView to an XML File (page 23) for more information.
TreeView Behavior
The following topics describe the behavior for the C1TreeView control.
Animation
The following topics detail C1TreeViews animation and transition effects for collapsing and expanding node
items.
Expand and Collapse Animation Effects

You can change how node items expand or collapse by using one of the 27 built-in animation effects. These
animation effects are available through the CollapseAnimation and ExpandAnimation properties. Expand and
collapse animation effects are special visual effects that occur while the nodes expand or collapse. For each
expand or collapse effect you can specify how long the animation lasts by specifying an integer value for the
ExpandDuration and CollapseDuration properties. The duration is measure in milliseconds. By default, the
treeview items expand and collapse without an animation effect.
Typically the animations that scroll in, fade in, fold in, close or drop in are used on collapsing treeview items and
the animations that scroll out, fade out, fold out, open, or drop out, are used on expanding treeview items. To
disable an animation effect for the collapsed nodes or expanded nodes, set the CollapseAnimation or
ExpandAnimation property to None.
The following table lists and defines each animation effect:
Animation Name
Animation Description
None(Default)
Disables animation behavior for the expanding

or collapsing treeview items.
FadeIn
Performs a fade in from the current opacity to

the maximum opacity.
FadeOut
Performs a fade out from the current opacity

to the maximum opacity.
ScrollInFromTop
Scrolls down from the top to bottom.
ScrollInFromRight
Scrolls in from the right end to the left end.
ScrollInFromLeft
Scrolls in from the left end of the treeview to

the right end of the treeview.
ScrollOutToTop
Scrolls out of view from the bottom to the top

of the treeview.
ScrollOutToRight
Scrolls out of view from left to right.
ScrollOutToBottom
Its scrolls out of view from the top down to

the bottom.
42
ScrollOutToLeft
Scrolls from the right side toward the left side

of the menu.
Fold
Folds the treeview.
UnFold
Unfolds the treeview.
OpenVertically
Opens the treeview vertically from the center

of the treeview.
CloseVertically
Closes the treeview vertically from the center

of the menu.
OpenHorizontally
Opens the treeview horizontally from left to

right.
CloseHorizontally
Closes the treeview horizonally from right to

left.
Shake
Moves the treeview back and fourth from left

to right.
Bounce
Moves the treeview nodes up and down.
DropInFromTop
The treeview nodes start moving upward from

its default location to near the top of the
page. The treeview nodes opacity decreases
as it moves further upward away from its
default location.
DropInFromRight
The treeview nodes appear to the far left side

of the treeview control and move toward the
right and stop once it reaches its default
location (the location of its associated parent
treeview item). The moving treeview nodes
opacity increases as it moves closer to its
default location.
DropInFromBottom
Drops downward with the bottom of the

treeview items appearing first. The treeviews
opacity increases as it moves down to meet
with its associated parent treeview item.
DropInFromLeft
The treeview nodes appear to the far right

side of the treeview control and move toward
the left and stop once it reaches its default
location (the location of its associated parent
treeview item). The moving treeview nodes
opacity increases as it moves closer to its
default location.
DropOutToTop
Moves upward from bottom to the top of the

treeview and gradually fades out as its
moving upward.
DropOutToRight
Moves to the right of the parent treeview item

and gradually fades as its moving to the
right.
DropOutToBottom
Drops downward and the opacity of the

treeview gradually decreases as its moving
further down the page.
DropOutToLeft
Drops out toward the left of the parent

treeview and moves toward the left page. The
43
treeviews opacity gradually lessens as it

moves further to the left of the page.
Expand and Collapse Transitions

You can enhance your treeviews appeal by adding transition effects between the expand or collapse animated
states to create a seamless flow between these states. C1TreeView includes thirty-one transition effects that enable
you to make the transitions in the collapse or expand animations more visually compelling. Instead of expanding
treeview items unfolding and collapsing treeview items folding, the expanding treeview items or collapsing
treeview items might bounce in as they are unfolding and bounce out as they are folding. These transitions are
special effects that occur when a treeview expands or collapses or stops expanding and collapsing, whereas the
animation effects occur while the treeview is expanding and collapsing. To use a transition effect, the
CollapseAnimation or ExpandAnimation property must be set to an animation type before you set the
CollapseEasing or ExpandEasing properties. By default the CollapseEasing or ExpandEasing properties are set to
EaseLinear and the Treeview expands or collapses with a smooth linear transition effect.
The following transitions effects are available for you to animate the transition between states so it looks smooth
to help keep the user oriented while menus are expanding or collapsing:
Transition Name
Transition Description
EaseLinear(default)
Linear easing. Moves smoothly from start to

end without acceleration or deceleration
EaseOutElastic
Elastic easing out. Begins quickly and then

decelerates.
EaseInElastic
Elastic easing in. Begins slowly and then

accelerates.
EaseInOutElastic
Elastic easing in and out. Begins slowly,

accelerates halfway, and then decelerates.
EastOutBounce
Bouncing easing out. Begins quickly and then

decelerates. The number of bounces is related
to the duration: longer durations produce
more bounces.
EaseInBounce
Bouncing easing in. Begins slowly and then

accelerates. The number of bounces is related
to the duration: longer durations produce
more bounces.
EaseInOutBounce
Bouncing easing in and out. Begins slowly,

accelerates until halfway, and then
decelerates.
EaseOutExpo
Exponential easing out. Begins quickly and

then decelerates.
EaseInExpo
Exponential easing in. Begins slowly and then

accelerates.
EaseInOutExpo
Exponential easing in and out. Begins slowly,

decelerates.
EaseOutQuad
Quadratic easing out. Begins at full velocity

then decelerates to zero.
EaseInQuad
Quadratic easing in. Begins at zero velocity
44
then slowly accelerates.

EaseInOutQuad
Quadratic easing in and out. Begins slowly,

decelerates to zero velocity again.
EaseOutSine
Sinusoidal easing out. Begins quickly and then

decelerates.
EaseInSine
Sinusoidal easing in. Begins slowly and then

accelerates.
EaseInOutSine
Sinusoidal easing in and out. Begins slowly,

decelerates.
EaseInOutCirc
Circular easing in and out. Begins slowly,

decelerates.
EaseOutCirc
Circular easing out. Begins quickly and then

decelerates.
EaseInCirc
Circular easing in. Begins slowly and then

accelerates.
EaseInOutCubic
Cubic easing in and out. Begins at zero

velocity, accelerates until halfway, and then
EaseInCubic
Cubic easing in. Begins at zero velocity and

then accelerates.
EaseOutCubic
Cubic easing in and out. Begins at full velocity

and then decelerates to zero.
EaseInQuint
Quintic easing in. Begins at zero speed then

accelerates.
EaseInOutQuint
Quintic easing in and out. Begins at zero

speed, accelerates until halfway, and then
decelerates to zero
EaseOutQuint
Quintic easing out. Begins at full velocity and

then decelerates to zero.
EaseOutBack
Back easing out. Begins quickly and then

decelerates.
EaseInBack
Back easing in. Begins slowly and then

accelerates.
EaseInOutBack
Back easing in and out. Begins slowly,

decelerates.
EaseOutQuart
Quartic easing out. Begins quickly and then

decelerates.
EaseInQuart
Quartic easing in. Begins slowly and then

accelerates.
EaseInOutQuart
Quartic easing in and out. Begins at zero

velocity, accelerates until halfway, and then
45
Expand and Collapse Duration

Timing plays an important role for animation effects. You need to know when to start the animation and how
long the animation lasts. C1TreeView provides duration and delay properties so you can specify the timing for
your treeview animation effects. Both the duration and delay properties are set to measure in milliseconds.
You can control when the expand effect or collapse effect starts by specifying a delay time value for the
ExpandDelay and CollapseDelay properties. The default setting for both the ExpandDelay and CollapseDelay
properties is 100 milliseconds which is .1 seconds.
Once the expand or collapse process starts, the animation effect begins if the ExpandAnimation or
CollapseAnimation properties are set to an animation type. You can control how long the animation and
transition effects last by specifying an integer value for the CollapseDuration and ExpandDuration. The default
delay time value for both properties is 500 milliseconds which is half of a second.
Check Boxes
You can display check boxes next to each C1TreeViewNode when ShowCheckBoxes is set to true. When the
check boxes are enabled for the C1TreeView you can use the NodeCheckChanged to create an action whenever
the status of a check box changes between posts. If you want to respond immediately to changes in the check
boxes on the client without postback you can use the OnClientNodeCheckChanged server side event property.
TriState Checkboxes
When the ShowCheckBoxes and AllowTriState properties are set to true you can use three types of checkbox
states that appear next to the C1TreeViewNode.
The following table describes the three check box states and how it visually affects each checkbox next to the
C1TreeViewNodes.
The property CheckState specifies the check state of C1TreeViewNode.
Checkbox State
Description
Indeterminate
A dark shaded gray box appears in the parent node when

only a few of the child nodes are selected.
Checked
A checkmark appears in the parent node when all of its child

nodes are selected.
Unchecked
An empty checkbox appears in the parent node when none

of the parent node or child nodes are selected.
The following image displays each check box state for the C1TreeView control: indeterminate, checked, and
unchecked.
46
Drag and Drop Nodes

You can drag-and-drop C1TreeViewNodes on nodes, in between nodes, or from one tree to another tree when
the AllowDragDrop property is set to true. The following image shows a C1TreeViewNode being dragged from
one C1TreeView to another C1TreeView. A vertical gray line is used as a visual cue to show you where the
C1TreeViewNode is going to be dropped.
When a C1TreeViewNode indicates a dropped node, it generates a NodeDropped server-side event. The event
handler for the NodeDropped can perform a specific action by locating the dropped node If you want to respond
immediately when a node is being dragged or when its dropped on the client without postback you can use the
OnClientNodeDragStarted, OnClientNodeDragging, and OnClientNodeDropped sever-side property events.
Load on Demand
If you have a tree that contains many nodes and you only want vital information to be sent to the server you can
set the LoadOnDemand and AutoPostBack properties to True.
47
Node Selection
When you click on a node at run time it is automatically marked as selected. If a value isnt specified for the
NavigateUrl property then clicking a node will raise the SelectedNodesChanged event to provide custom
functionality. To have the nodes marked as selected without clicking them you can enable the Selected property.
Multiple nodes can be selected at one time by holding down the control key while mouse clicking multiple nodes.
To unselect a node, click on it again. The nodes are marked as selected in the following C1TreeView:
You can use the SelectedNodesChanged to automatically postback when a node is selected. If you need to
disable postbacks, you can use the OnClientSelectedNodesChanged to raise an event when a node is selected. If
the NavigateUrl property is specified for a node, then the OnClientSelectedNodesChanged or the
SelectedNodesChanged wouldnt raise.
You can use the Selected property in the code behind file to prevent it from losing its selected state when you
click on a node that contains a URL link. For example, you can use the following method:
<div>
<a
href="http://localhost:1196/ControlExplorer/C1TreeView/NavigateTo.aspx?
Id=5">Navigate to NavigateTo</a>
</div>
<div>
<c1:C1TreeView ID="NavigateTo"
VisualStylePath = "~/C1TreeView/VisualStyles/"
AutoPostBack="True"
ShowExpandCollapse="False"
runat="server" AllowSorting="False" AutoCollapse="False"
VisualStyle="Default" Width="300px">
<Nodes>
<c1:C1TreeViewNode Text="NavigateFrom"
NavigateUrl="NavigateFrom.aspx" runat="server"></c1:C1TreeViewNode>
<c1:C1TreeViewNode Text="NavigateTo"
NavigateUrl="NavigateTo.aspx?Id=5" runat="server"></c1:C1TreeViewNode>
</Nodes>
</c1:C1TreeView>
</div>
48
Visual Basic
Dim url As String = Request.Url.PathAndQuery
Dim node As C1TreeViewNode = NavigateTo.FindNodeByNavigateUrl(url)
If node IsNot Nothing Then

node.Selected = True
End If
End Sub
C#
{
string url = Request.Url.PathAndQuery;
C1TreeViewNode node = NavigateTo.FindNodeByNavigateUrl(url);
if(node != null)
node.Selected = true;
}
Node Navigation
C1TreeView supports mouse and keyboard navigation.
Navigating C1TreeViewNodes using the mouse
The following table describes the actions and corresponding mouse commands when navigating through the
C1TreeViewNodes:
Action
Mouse Command
Expand a node
Click on the plus sign at the left of the node's name.
Collapse a node
Click on the minus sign at the left of the node's name.
Select a node
Click on the node's name.
Navigating C1TreeViewNodes using the keyboard

The following table describes the actions and their associated keys to use when navigating through
C1TreeViewNodes:
Action
Keyboard Command
Expand a node
+ KEY
Collapse a node
- KEY
Move up a node
UP ARROW KEY
Move down a down
DOWN ARROW KEY
Select multiple nodes
MOUSE + CTRL KEY
TreeView Appearance
C1TreeViews appearance is determined by predefined visual styles which include a set of images and a CSS style
sheet so you can easily extend C1TreeViews appearance.
ComponentOne has a unique theme mechanism to apply predefined appearance for its web controls.
The default C1TreeView does not include any nodes. When you add a node to the C1TreeView its default visual
style is ArcticFox. The ArcticFox is a predefined theme that includes one .css file and a set of images.
49
Visual Styles
C1TreeView has five built-in themes: ArcticFox, Vista, Office2007Black, Office2007Blue, and
Office2007Silver. Each theme includes one .css file and a set of images used by the CSS classes, for example,
arrows, icons, buttons, and so on. The themes can be customized by changing the styles and images in the
appropriate .css file.
Note: Additional styles are installed with the product, but they must be added as custom visual styles at this time.
These styles include: BureauBlack, Evergreen, ExpressionDark, RanierOrange, RanierPurple, ShinyBlue,
and Windows7. See Custom Visual Styles (page 51) for more information.
Defining Themes
The themes can be defined as a resource theme or a file theme. The theme with the .CSS file in resource is named
Resource Theme. The theme with CSS in external file is named File Theme. All external file themes are installed
in C:\Program Files\Studio for ASP.NET\C1WebUI\VisualStyles.
Custom external themes can be created using an existing theme and modifying its styles and images in the
appropriate .css file. The default location path for creating custom external themes is
\VisualStyles\CustomThemeName\C1TreeView.
C1TreeView includes a listbox of available visual styles in the C1TreeView Tasks menu to quickly change
C1TreeViews theme. The C1TreeView Tasks menu enables you to choose from one of the five themes to apply
to the C1TreeView control. The visual styles can also be applied to the C1TreeView control by setting its
VisualStyle property in the Properties window.
Accessing the Visual Styles at design time
The visual styles are accessible in one of two ways at design time:
Select Visual Styles drop-down listbox from C1TreeView Tasks menu.
Select Visual Styles drop-down listbox from C1TreeViews Properties Window.
Available Visual Styles

The following visual styles are available for C1TreeView:
Scheme
ArcticFox
50
Preview
Office2007Black
Office2007Blue
Office2007Silver
Vista
Custom Visual Styles

While TreeView for ASP.NET comes with five built-in styles, we recognize that there are instances where you
will want to customize your C1TreeView control. To customize the C1TreeView control, you will create a
custom CSS style sheet and add it to your project as a visual style. The custom CSS stylesheet must always be
named "styles.css".
Tip: The easiest way to create a custom visual style is by modifying one of the control's pre-existing visual
styles. You can find the .css sheets and images for C1TreeView's visual styles within the installation directory at
C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles.
Before you add your .css file and images, you will have to create a folder to contain them. The folder that will
contain them will be buried within a hierarchy of folders. On the top-level of your project, create a folder named
"VisualStyles". Underneath the VisualStyles folder, create a sub-folder bearing the theme name (such as
"CustomVisualStyle"), and then, beneath that, create a sub-folder named "C1TreeView. The image folder and
.css file should be placed underneath the C1TreeView folder.
This structure of these folders is very important; C1TreeView will always look for the
~/VisualStyles/StyleName/C1TreeView/styles.css path, as it is the default visual style path for the control.
Once the .css file and images are in place, set the VisualStylePath property to the path of the first folder
(~/VisualStyles), set the UseEmbeddedVisualStyles property to False, and then set the VisualStyle property to
the custom theme name
51
Templates
Templates can be used to embed other HTML controls in C1TreeViewNodes or you can create custom tags.
C1TreeView supports two types of templates: NodesTemplate and Template. NodesTemplate is the common
template for all nodes. If Template is defined it will overwrite NodesTemplate for a particular node.
Client-Side TreeView
C1TreeView client side has a very rich client-side object model since most of its members are identical to the
members in the server-side control.
To get the client-side control object for C1TreeView you can use the following code:
var controlObj =
Sys.Application.findComponent("<%=c1treeview1.ClientID%>");
Using C1TreeViews client-side code, you can implement many features in your Web page without the need to
send information to the Web server which takes time. Thus, using C1TreeViews client-side object model can
increase the efficiency of your Web site.
The following topics describe the available client-side properties, methods, and events.
Client-Side Properties
The following conventions are used when accessing the client object properties:
Server properties on the client are implemented as a pair of Get- and Set- methods.
Method names must start with "get_" (Get-method) and "set_" (Set-method) followed with the server
property name. The first letter of the server property name must be lowercase (camel case).
Client-Side Methods
C1TreeView includes a rich client-side object model in which several properties can be set on the client side. For
information about these client-side methods and what properties can be set on the client side, see the
C1TreeView1 Reference.
Client-Side Events
C1TreeView includes several client-side events that allow you to manipulate the node items in the C1TreeView
control when an action such as checking the node, clicking the node, collapsing the node, dragging the node,
dropping the node, expanding the node, and hovering over the node occurs.
You can access these client-side events from the Properties window. To create a new client-side event using the
Properties window, select the drop-down arrow next to a client-side event and select Add new client side
handler.
52
Each of the client-side events requires two parameters: the ID that identifies the sender C1TreeView, in this
example, C1TreeView1, and an eventArgs that contains the data of the event.
You can use the sever-side properties, listed in the Client Side Event table, to specify the name of the JavaScript
function that will respond to a particular client-side event. For example, to assign a JavaScript function called
"NodeClicked" to respond to the clicked item, you would set the OnClientNodeClicked property to
"NodeClicked".
The following table lists the events that you can use in your client scripts. These properties are defined on the
server side, but the actual events or the name you declare for each JavaScript function are defined on the client
side.
Client- Side Events Table
Event Server-Side Property Name
Event Name
Description
OnClientNodeCheckChanged
NodeCheckedChanged
If specified, the
OnClientNodeChecked client-side
event handler is called after a
TreeView node is checked by user.(If
Check boxes are enabled)
OnClientNodeClicked
NodeClicked
If specified, the OnClientNodeClicked

client-side event handler is called
after a TreeView node is clicked upon.
OnClientNodeCollapsed
NodeCollapsed
If specified, the
OnClientNodeCollapsed client-side
TreeView node is collapsed.
OnClientNodeDragging
NodeDragging
If specified, the
OnClientNodeDragging client-side
event handler is called if the user
moves the mouse while dragging the
C1TreeViewNode node.
OnClientNodeDragStarted
NodeDragStarted
If specified, the
OnClientNodeDragStarted client-side
event handler is called before a dropand-drop operation starts.
OnClientNodeDropped
NodeDropped
If specified, the
OnClientNodeDropped client-side
TreeView node is dropped by
user.(after being dragged).
OnClientNodeExpanded
NodeExpanded
If specified, the
OnClientNodeExpanded client-side
event handler is called after the
C1TreeViewNode node has been
expanded.
OnClientNodeMouseOut
NodeMouseOut
If specified, the
OnClientNodeMouseOut client-side
event handler is called if the user
moves the mouse pointer out of the
C1TreeViewNode node.
OnClientNodeMouseOver
NodeMouseOver
If specified, the OnClientMouseOver

client-side event handler is called
when the mouse moves over a
53
TreeView node.
OnClientNodeTextChanged
NodeTextChanged
If specified, the
OnClientNodeTextChanged client-side
C1TreeViewNode node's text has
been edited.
OnClientSelectedNodesChanged
NodeSelection
If specified, the
OnClientNodeSelection client-side
TreeViewNode has been selected.
54
TreeView for ASP.NET Samples

Please be advised that this ComponentOne software tool is accompanied by various sample projects and/or
demos which may make use of other development tools included with the ComponentOne Studios.
Note: The ComponentOne Samples are also available at http://helpcentral.componentone.com/Samples.aspx.
C# Sample
The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET
detail the C1TreeView control's functionality:
Sample
Description
Animation
Showcases the different collapse and expand animation effects for the
C1TreeView control.
Databinding
Shows how to databind C1TreeView to a SiteMapDataSource or

XMLDataSource.
VisualStyles
Displays the built-in C1TreeView control Visual Styles including

ArcticFox, Office2007Black, Office2007Blue, Office2007Silver, and
Vista.
TreeView for ASP.NET Task-Based

Help
The task-based help section assumes that you are familiar with programming in the Visual Studio ASP.NET
environment, and know how to use the C1TreeView control in general. Each topic provides a solution for specific tasks
using the C1TreeView control. Each task-based help topic also assumes that you have created a new ASP.NET project.
Adding Collapse and Expand Animation Effects

C1TreeView contains 27 animation and 31 transition effects that allow you to customize interaction with the
control. In this topic, you will set the CollapseAnimation, ExpandAnimation, CollapseEasing, ExpandEasing,
CollapseDuration, and ExpandDuration properties to create an animation effect while expanding or collapsing
menu items.
Setting Animation Effects Using the Designer
Complete the following steps to set animation effects:
1.
Click C1TreeViews smart tag to open the C1TreeView Tasks menu and select Edit TreeView.
The TreeViewDesignerForm appears.
56
2.
Use the Add Child Item button to add two C1TreeViewNodes to your C1TreeView.
3.
In treeview, select C1TreeViewNode01 and click on the Add Child Item button to add two child nodes to
C1TreeViewNode01.
4.
In treeview, select C1TreeView1 and navigate to the ExpandAnimation property in the Properties window
and set it to Unfold.
5.
Set the ExpandEasing property to EaseOutBounce. This property determines the animation transition
effect while the menu items are expanding.
6.
Locate the ExpandDuration property and enter "1500" into its textbox. This will lengthen the duration of
the animation effect, guaranteeing that you will notice the effect when you build the project.
7.
Set the CollapseAnimation property and set it to Fold.
8.
Set the CollapseEasing property to EaseInBounce. This property determines the animation transition
effect while the menu items are collapsing.
9.
Locate the CollapseDuration property and enter "1500" into its textbox.
10. Click OK to save and close the TreeViewDesignerForm.

11. Build the project and observe that the expanding nodes unfold and bounce in before settling into its
natural state and the collapsing nodes fold and then bounce in before settling into their natural state.
Setting Animation Effects in Source View
In Source view add ExpandAnimation="Unfold", ExpandDuration="1500", ExpandEasing="EaseOutBounce",
CollapseAnimation="Fold", CollapseDuration="1500", and CollapseEasing="EaseInBounce" into the
<cc1:C1MenuItem> tag so that it appears similar to the following:
<cc1:C1TreeView ID="C1TreeView1" runat="server" AllowSorting="False"
AutoCollapse="False"
CollapseAnimation="Fold" CollapseDuration="1500"
CollapseEasing="EaseInBounce"
ExpandAnimation="UnFold" ExpandDuration="1500"
ExpandEasing="EaseOutBounce" VisualStyle="ArcticFox"
VisualStylePath="~/C1WebControls/VisualStyles">
<Nodes>
Selected="False" Text="C1TreeViewNode01">
<Nodes>
</Nodes>
</Nodes>
</cc1:C1TreeView>
Setting Animation Effects Programmatically
Complete the following steps to set animation effects programmatically:
1.
Import the following namespace into your project:
Visual Basic
C#
using C1.Web.UI.Controls.C1TreeView;
57
2.
Add the following code to the Page_Load event to set the animation effects for the expanding and
collapsing node items:
Visual Basic
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
'Add Animation Effects
C1TreeView1.Nodes.Add(P)
C1TreeView1.ExpandAnimation = C1.Web.UI.AnimationEffect.Unfold
C1TreeView1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce
C1TreeView1.ExpandDuration = 1500
C1TreeView1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold
C1TreeView1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce
Pr1.Text = "Product 1"
Pr1.Value = "Pr1"
Pr1.Expanded = False
P.Nodes.Add(Pr1)
End If
C#
if (!Page.IsPostBack)
{
P.Value = "PS";
P.Expanded = true;
//Add Animation Effects
C1TreeView1.Nodes.Add(P);
C1TreeView1.ExpandAnimation =
C1.Web.UI.AnimationEffect.FadeOut;
C1TreeView1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce;
C1TreeView1.ExpandDuration = 1500;
C1TreeView1.CollapseAnimation =
C1.Web.UI.AnimationEffect.FadeIn;
C1TreeView1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce;
Pr1.Text = "Product 1";
Pr1.Value = "Pr1";
Pr1.Expanded = false;
P.Nodes.Add(Pr1);
58

}
3.
Run the program and observe that the expanding child link items unfold and bounce in before settling into
their natural state and the collapsing child link items fold and then bounce in before settling into their
natural state.
Binding C1TreeView to a Site Map

This lesson shows you how to create a Site Map through the Visual Studio 2005 installed templates, add the
SiteMapDataSource component to the Web page and assign it to C1TreeView, then set the binding for the
C1TreeView.
The SiteMapDataSource control enables you to view navigation information in your Web application. You can
use the C1TreeView control with the SiteMapDataSource.
To create the Site Map and bind it to the C1TreeView control, complete the following:
1.
Start a new Web Site in Visual Studio 2008.
2.
Right-click on your project's name in the solution explorer and select Add New Item. The Add New Item
dialog box appears. Select Site Map from the list of templates, and then click Add to add the new
Web.sitemap item to the project.
The following default source code appears for the Web.sitemap file:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
3.
Replace the default data with the following data for the Web.sitemap file:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="RootNodeUrl" title="Root Node" description="Root Node
Description" >
<siteMapNode url="" title="Products" description="Products" >
<siteMapNode url="" title="Studio Enterprise" description="Studio
Enterprise">
<siteMapNode url="" title="Studio for WinForms"
description="Studio for WinForms" />
<siteMapNode url="" title="Studio for ASP.NET"
description="Studio for ASP.NET" />
<siteMapNode url="" title="Studio for WPF" description="Studio
for WPF" />
<siteMapNode url="" title="Studio for Mobile" description="Studio
for Mobile" />
<siteMapNode url="" title="Studio for ActiveX"
description="Studio for ActiveX" />
59
<siteMapNode url="" title="Studio for Silverlight"

description="Studio for Silverlight" />
</siteMapNode>
<siteMapNode url="" title="IntelliSpell" description="IntelliSpell"
/>
<siteMapNode url="" title="Report Designer Edition"
description="Report Designer Edition" />
</siteMapNode>
<siteMapNode url="" title="Support" description="Support" >
<siteMapNode url="" title="Support Services" description="Support
Services" />
<siteMapNode url="" title="HelpCentral" description="HelpCentral"
/>
<siteMapNode url="" title="Product Forums" description="Product
Forums" />
</siteMapNode>
<siteMapNode url="" title="Company" description="Company" >
<siteMapNode url="" title="About Us" description="About Us" />
<siteMapNode url="" title="Partners" description="Partners" />
<siteMapNode url="" title="Contact Us" description="Contact Us" />
<siteMapNode url="" title="Join Us" description="Join Us" />
<siteMapNode url="" title="Press Center" description="Press Center"
/>
<siteMapNode url="" title="Governance" description="Governance" />
</siteMapNode>
<siteMapNode url="" title="Store" description="Store">
<siteMapNode url="" title="Buy Now" description="Buy Now" />
<siteMapNode url="" title="Resellers" description="Resellers" />
</siteMapNode>
</siteMapNode>
</siteMap>
4.
Toggle back to the design view for the .aspx page. Select the AJAX Extensions tab in the Visual Studio
Toolbox and double click the ScriptManager component to add it to the page.
5.
Select the Data tab in the Visual Studio Toolbox and double click the SiteMapDataSource component to
add it to the page.
6.
Double-click on the C1TreeView control from the Visual Studio toolbox to add it to your page.
7.
Open C1Treeview control's Tasks menu and select SiteMapDataSource1 from the Choose Data Source
dropdown listbox.
8.
Save and Build your project. Observe the following at run-time:

The data from the Web.sitemap file is reflected in the C1TreeView control.
60
Preventing C1TreeViewNode from Losing its Selected State

When you click on a node that contains a link, a page redirect occurs which causes the causes the current node in
the C1TreeView to lose its selected state.
To prevent the C1TreeViewNode from losing its selected state when you click on a node that contains a url link,
use the FindNodeByNavigateUrl method.
Complete the following steps to prevent the C1TreeViewNode from losing its selected state when you click on a
node that contains a URL link:
1.
Declare the C1TreeView using the following markup.

<div>
<a
href="http://localhost:1196/ControlExplorer/C1TreeView/NavigateTo.aspx?Id=
5">Navigate to NavigateTo</a>
</div>
<div>
<c1:C1TreeView ID="NavigateTo"
VisualStylePath = "~/C1TreeView/VisualStyles/"
AutoPostBack="True"
ShowExpandCollapse="False"
runat="server" AllowSorting="False" AutoCollapse="False"
VisualStyle="Default" Width="300px">
<Nodes>
<c1:C1TreeViewNode Text="NavigateFrom"
NavigateUrl="NavigateFrom.aspx" runat="server"></c1:C1TreeViewNode>
<c1:C1TreeViewNode Text="NavigateTo"
NavigateUrl="NavigateTo.aspx?Id=5" runat="server"></c1:C1TreeViewNode>
</Nodes>
</c1:C1TreeView>
</div>
2.
Use the FindNodeByNavigateUrl method to search for the NavigateUrl in the C1TreeViewNode
collection. If the node isnt empty then the selected state is applied to the C1TreeViewNode.
Visual Basic
61
Dim url As String = Request.Url.PathAndQuery

Dim node As C1TreeViewNode = NavigateTo.FindNodeByNavigateUrl(url)
If node IsNot Nothing Then
node.Selected = True
End If
End Sub
C#
{
string url = Request.Url.PathAndQuery;
C1TreeViewNode node = NavigateTo.FindNodeByNavigateUrl(url);
if(node != null)
node.Selected = true;
}
Load and Save C1TreeView through XML

The following tasks show you how to save your C1TreeView control as an .xml file and then load it into your
project using the designer.
Save the Tree as an XML

To save your tree as an XML file using the designer:
1.
Open the C1TreeView Designer Form.
2.
Click on the File | Save as XML.
3.
Name the .xml for your TreeView and browse where you would like to save it.
4.
Click OK to close the TreeView Designer Form dialog box.
Load an Existing XML TreeView into your Project

You can load an existing XML TreeView into your project in the designer or in code. Note that you'll first need
to save your treeview as an XML file, see Save the Tree as an XML (page 62) for details.
Using the Designer
To load the C1TreeView control you saved as an .xml file into your project:
62
1.
Add the C1TreeView control to your page.
2.
Open the C1TreeView Designer Form.
3.
Click on the File | Load From XML and click open to open the existing .xml file.
Using Code
To load the C1TreeView control you saved as an .xml file into your project:
1.
Add C1TreeView to the page.
2.
Create an XML file for the C1TreeView structure.
3.
Call the LoadLayout method to load the items, passing in the path to the file:
Visual Basic
C1TreeView1.LoadLayout("c:\\Visual Studio
2005\\WebSites\\LoadLayoutEX\\App_Data\\C1TreeViewControl.xml")
C#
C1TreeView1.LoadLayout("c:\\Visual Studio
2005\\WebSites\\LoadLayoutEX\\App_Data\\C1TreeViewControl.xml");
Designer Tasks
The following topics show different tasks using the TreeView Designer Form.
Deleting a C1TreeViewNode
You can use one of the following three methods when deleting a C1TreeViewNode in the designer:
Deleting a child node through the shortcut menu

Right-click the C1TreeViewNode you wish to delete and select Delete.
63
Deleting a child node by pressing on the delete button
Select the node you wish to delete and click on the Delete.
Deleting a child node through the Edit menu.

Click the Edit menu and select Delete.
64
Renaming the TreeViewNode in the Designer

You can use one of the following three methods when renaming a C1TreeViewNode in the designer:
Pressing F3
1.
Select the C1TreeViewNode you wish to rename.
2.
Press the F3 key and type the new name.
Selecting rename from the shortcut menu

1.
Right-click the C1TreeViewNode you wish to rename.
2.
Select Rename from the context menu and type the new name.
65
Selecting rename from the Edit menu

1.
Select the C1TreeViewNode you wish to rename.
2.
Click the Edit menu and select, Rename, and enter the new name.
Adding a Child Node

You can use one of the following three methods when adding a child C1TreeViewNode in the designer:
Adding a child node through the shortcut menu

Right-click on the node you wish to add a child node and select Add Child | C1TreeViewNode.
66
Adding a child node by pressing on the add child button

Select the node you wish to add a child node and click on the Add Child buttons drop-down arrow and
select C1TreeViewNode.
Adding a child node through the Edit menu

Select the node you wish to add a child node and click on the Edit menu and select Add Child |
C1TreeViewNode.
67
Inserting a Node
You can use one of the following three methods when inserting a C1TreeViewNode in the designer:
Inserting a node through the shortcut menu

Right-click on the C1TreeViewNode you wish to add a child node and select Insert Item |
C1TreeViewNode.
Inserting a node by pressing on the Insert Node button

Select the C1TreeViewNode you wish to add a child node and click on the Insert Item buttons dropdown arrow and select C1TreeViewNode.
68
Inserting a node using the Edit menu

Select the C1TreeViewNode you wish to add a child node and click on the Edit menu and select Insert
Item | C1TreeViewNode.
Adding, Inserting, and Removing Nodes Dynamically

The following topics show you how to add, insert, and remove a C1TreeViewNode dynamically
Add a Node Dynamically

To dynamically add a node, complete the following:
1.
Add a PlaceHolder control to the Web page.
2.
Add a LinkButton server control using declarative syntax:

<br/>&nbsp&nbsp &nbsp&nbsp<asp:LinkButton ID="lnkAddNode" Text="Add new
Node" OnClick="ClickAddNode" runat="server"></asp:LinkButton>
The OnClick attribute is included in the markup so when you click on the LinkButton control, the event
will call the ClickAddNode event handler which we will later create.
3.
Add the directive for the namespace to your source code.
Visual Basic
69

4.
C#
using C1.Web.UI.Controls.C1TreeView
Use the following code to create the dynamic treeview:
Visual Basic
Private treeView As C1.Web.UI.Controls.C1TreeView.C1TreeView
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
EventArgs)
treeView = New C1.Web.UI.Controls.C1TreeView.C1TreeView()
treeView.ID = "TreeView"
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
Pr1.Value = "Pr1"
Pr1.Expanded = True
P.Nodes.Add(Pr1)
Pr2.Value = "Pr2"
Pr2.Expanded = True
P.Nodes.Add(Pr2)
70
End If
End Sub
C#
private C1.Web.UI.Controls.C1TreeView.C1TreeView treeView;
{
treeView = new C1.Web.UI.Controls.C1TreeView.C1TreeView();
treeView.ID = "TreeView";
if (!Page.IsPostBack) {
P.Value = "PS";
P.Expanded = true;
Pr1.Value = "Pr1";
P.Nodes.Add(Pr1);
Pr2.Value = "Pr2";
P.Nodes.Add(Pr2);
71

}
}
5.
6.
7.
72
Create a ClickAddNode event handler to raise an event when you click the Add Node link button. This
event will call the CreateNode method to add a new C1TreeViewNode.
Visual Basic
Protected Sub ClickAddNode(ByVal sender As Object, ByVal e As
EventArgs)
treeView.Nodes.Add(CreateNode())
End Sub
C#
protected void ClickAddNode(object sender, EventArgs e)
{
treeView.Nodes.Add(CreateNode());
}
Use the CreateNode() function to dynamically add a new C1TreeViewNode when the LinkButton is
clicked.
Visual Basic
Private Function CreateNode() As C1TreeViewNode
Dim node As New C1TreeViewNode()
node.Text = "New Node"
node.Value = "NewNode"
Return node
End Function
C#
private C1TreeViewNode CreateNode()
{
C1TreeViewNode node = new C1TreeViewNode();
node.Text = "New Node";
node.Value = "NewNode";
return node;
}
Run your project and click on the Add new Node link button to add a node.
Insert a Node Dynamically

To dynamically insert a node, complete the following:
1.
2.

<br/>&nbsp&nbsp &nbsp&nbsp<asp:LinkButton ID="lnkInsertNode" Text="Insert
new Node" OnClick="ClickInsertNode" runat="server"></asp:LinkButton>
will call the ClickInsertNode event handler which we will later create.
3.
4.
Visual Basic
C#
Visual Basic
EventArgs)
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
73

Pr1.Value = "Pr1"
Pr1.Expanded = True
P.Nodes.Add(Pr1)
Pr2.Value = "Pr2"
Pr2.Expanded = True
P.Nodes.Add(Pr2)
End If
End Sub
C#
{
74

P.Value = "PS";
P.Expanded = true;
Pr1.Value = "Pr1";
P.Nodes.Add(Pr1);
Pr2.Value = "Pr2";
P.Nodes.Add(Pr2);
}
}
5.
Create a ClickInsertNode event handler to raise an event when you click the Insert Node link button. This
event will call the CreateNode method to add a new C1TreeViewNode.
Visual Basic
Protected Sub ClickInsertNode(ByVal sender As Object, ByVal e As
EventArgs)
75
treeView.Nodes.Insert((treeView.Nodes.Count - 1), CreateNode())

End Sub
6.
7.
C#
protected void ClickInsertNode(object sender, EventArgs e)
{
treeView.Nodes.Insert((treeView.Nodes.Count - 1),
CreateNode());
}
Use the CreateNode() function to dynamically add a new C1TreeViewNode when the LinkButton is
clicked.
Visual Basic
Private Function CreateNode() As C1TreeViewNode
Dim node As New C1TreeViewNode()
node.Text = "New Node"
node.Value = "NewNode"
Return node
End Function
C#
private C1TreeViewNode CreateNode()
{
C1TreeViewNode node = new C1TreeViewNode();
node.Text = "New Node";
node.Value = "NewNode";
return node;
}
Run your project and click on the Insert new Node link button to insert a new node.
Remove a Node Dynamically

To dynamically remove a node, complete the following:
76
1.
2.

<br/>&nbsp&nbsp &nbsp&nbsp<asp:LinkButton ID="lnkRemoveNode" Text="Remove
Node" OnClick="ClickRemoveNode" runat="server"></asp:LinkButton>
will call the ClickRemoveNode event handler which we will create in the following step.
3.
4.
Visual Basic
C#
Visual Basic
EventArgs)
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
Pr1.Value = "Pr1"
Pr1.Expanded = True
P.Nodes.Add(Pr1)
Pr2.Value = "Pr2"
Pr2.Expanded = True
P.Nodes.Add(Pr2)
77
End If
End Sub
C#
{
P.Value = "PS";
P.Expanded = true;
Pr1.Value = "Pr1";
P.Nodes.Add(Pr1);
78

Pr2.Value = "Pr2";
P.Nodes.Add(Pr2);
}
}
5.
Create a ClickRemoveNode event handler to raise an event when you click the Remove Node link button.
This event will call the RemoveAt method to remove a C1TreeViewNode.
Visual Basic
Protected Sub ClickRemoveNode(sender As Object, e As EventArgs)
If (treeView.Nodes.Count - 1) >= 0 Then
treeView.Nodes.RemoveAt(treeView.Nodes.Count - 1)
End If
End Sub
C#
protected void ClickRemoveNode(object sender, EventArgs e)
{
if ((treeView.Nodes.Count - 1) >= 0)
treeView.Nodes.RemoveAt(treeView.Nodes.Count - 1);
Displaying Static Data
To display static data by using declarative syntax, create a collection of nodes that are children of the
C1TreeView control.
The following example shows the markup for a C1TreeView control that contains three nodes, two of which
have child nodes.
<c1:C1TreeView ID="c1TreeView1" runat="server" AllowSorting="False"
AutoCollapse="False">
<Nodes>
<c1:C1TreeViewNode runat="server" Expanded="True"
Text="Products">
<Nodes>
<c1:C1TreeViewNode runat="server"
Expanded="True" Text="Products 1">
<Nodes>
Expanded="False" Text="Overview">
79
</c1:C1TreeViewNode>
Expanded="False" Text="Downloads">
Expanded="False" Text="Support">
</Nodes>
Expanded="True" Text="Products 2">
<Nodes>
Expanded="False" Text="Overview">
Expanded="False" Text="Downloads">
Expanded="False" Text="Support">
</Nodes>
</Nodes>
</Nodes>
</c1:C1TreeView>
The static C1TreeView appears like the following:
Retrieving the full node path using the OnMouseOver Event

Complete the following steps to get the full path of a given node:
1.
80
Add the following markup to your .aspx file:

<script type="text/javascript">
function onMouseOver(sender, args)
{
var node = args.get_node();
var s = node.get_text();
var currentObject = node.get_owner();
while (currentObject != null)
{
// get_owner() will return null when we reach the treeview

if (currentObject.get_owner() != null)
{
s = currentObject.get_text() + " > " + s;
}
currentObject = currentObject.get_owner();
}
var tbPath;
tbPath = $get("pathText");
tbPath.innerHTML = s;
}
function onMouseOut(sender, args)
{
$get("pathText").innerHTML = "";
}
</script>
<body>
<form id="form1" runat="server">
<div id="pathText" style="height: 20px"></div>
<c1:C1TreeView id="C1TreeView1" runat="server"
VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles"
OnClientNodeMouseOver="onMouseOver"
OnClientNodeMouseOut="onMouseOut" AllowSorting="False"
AutoCollapse="False">
<Nodes>
<c1:C1TreeViewNode runat="server" Text="Products"
Expanded="False" Selected="False">
<Nodes>
NavigateUrl="http://www.componentone.com/"
Text="Product 1" Expanded="False"
Selected="False">
<Nodes>
Expanded="False" Selected="False" Text="Overview">
Expanded="False" Selected="False" Text="Downloads">
Expanded="False" Selected="False" Text="Support">
</Nodes>
<c1:C1TreeViewNode runat="server" Expanded="False"
Selected="False" Text="Product 2">
</Nodes>
</Nodes>
</c1:C1TreeView>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
</form>
</body>
81
2.
Run your project and mouse over a node.

The full node path is displayed.
82

ASPNET TreeView

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

ASPNET TreeView

Hochgeladen von

Copyright:

Verfügbare Formate

ComponentOne

TreeView for ASP.NET

Copyright 1987-2010 ComponentOne LLC. All rights reserved.

Drag and Drop Nodes....................................................................................................................... 47

ComponentOne TreeView for

TreeView for ASP.NET is part of ComponentOne Studio for ASP.NET, the

What's New in ComponentOne TreeView for ASP.NET

What's New in 2009 v3

Installing TreeView for ASP.NET

TreeView for ASP.NET Setup Files

Contains copies of all binaries (DLLs, EXEs) in the ComponentOne

Contains files (at least a readme.txt) related to the C1WebUI product.

Contains all external file themes.

Microsoft Internet Information Services (IIS) 5.0 or later

.NET Framework 2.0 or later

Uninstalling TreeView for ASP.NET

Select ComponentOne Studio for ASP.NETand click the Remove button.

Click Yes to remove the program.

Deploying your Application in a Medium Trust Environment

Modifying or Editing the Config File

Edit the Config File

Open the web_mediumtrust.config file.

Create a Custom Policy Based on Medium Trust

Save and close the web_mediumtrust.config file.

<PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net">

Save and close the web_mediumtrust.config file.

Save and close the web_mediumtrust.config file.

End-User License Agreement

How does Licensing Work?

An assembly resource file which contains the actual run-time license

Creating components at design time

Creating components at run time

Inheriting from licensed components

Add a LicenseProvider attribute to the component.

Add an instance of the base component to the form.

Using licensed components in console applications

Using licensed components in Visual C++ applications

Rebuild the executable to include the licensing information in the application.

Using licensed components with automated testing products

Common Scenarios in Mobile Applications

Updating or renewing a license

Run the ComponentOne Studio for Mobile Devices 2.0 setup.

Unzip and run the C1LicBomb.exe.

Updating a project after renewing a license

Instantiating a Mobile control at run time

Open the project and go to the Solution Explorer window.

Save the file, then close the licenses.licx tab.

Alternatively, follow these steps:

Open the project and go to the Solution Explorer window.

Find the licenses.licx file and delete it.

Close the project and reopen it.

For ASP.NET 2.x applications, follow these steps:

Open the project and go to the Solution Explorer window.

Find the licenses.licx file and right-click it.

Online Support via HelpCentral

Online Support via our Incident Submission Form

Peer-to-Peer Product Forums and Newsgroups

About This Documentation

Creating an AJAX-Enabled ASP.NET Project

The following table summarizes the installations needed:

Additional Installation Requirements

Visual Studio 2008, .NET Framework 3.5

Visual Studio 2008 and .NET Framework 2.0 or 3.0