TabStrip for ASP.NET AJAX

ComponentOne

TabStrip for ASP.NET AJAX

Copyright 1987-2010 ComponentOne LLC. All rights reserved.

Corporate HeadquartersComponentOne LLC201 South Highland Avenue3rd FloorPittsburgh, PA 15206 ∙ USA

Internet: [email protected] site: http://www.componentone.com

SalesE-mail: [email protected]: 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. ComponentOne’s 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™.

mailto:[email protected]

http://www.componentone.com/

iii

Table of ContentsComponentOne TabStrip for ASP.NET AJAX Overview .............................................................. 1

What's New in TabStrip for ASP.NET AJAX...........................................................................................1Installing TabStrip for ASP.NET AJAX ...................................................................................................1TabStrip for ASP.NET AJAX Setup Files.................................................................................................1System Requirements ...............................................................................................................................2Uninstalling TabStrip for ASP.NET AJAX...............................................................................................2Deploying your Application in a Medium Trust Environment ..................................................................2End-User License Agreement ...................................................................................................................6Licensing FAQs .......................................................................................................................................6What is Licensing? ...................................................................................................................................6How does Licensing Work? ......................................................................................................................6Common Scenarios ..................................................................................................................................7Troubleshooting .......................................................................................................................................8Technical Support ..................................................................................................................................10Redistributable Files ...............................................................................................................................10About This Documentation ....................................................................................................................11Namespaces ...........................................................................................................................................11Creating an AJAX-Enabled ASP.NET Project........................................................................................12for ASP.NET AJAXAdding the ASP.NET Components to a Project .....................................................14

Key Features.......................................................................................................................15

TabStrip for ASP.NET AJAX Quick Start .................................................................................17Step 1 of 3: Adding C1TabStrip to the Page ............................................................................................17Step 2 of 3: Adding C1Tabs to the C1TabStrip control ............................................................................18Step 3 of 3: Adding the C1MultiPage Control .........................................................................................20

TabStrip for ASP.NET AJAX Top Tips ....................................................................................21

C1TabStrip Design-Time Support............................................................................................22C1TabStrip Smart Tag............................................................................................................................22C1TabStrip Collection Editor .................................................................................................................23C1TabStrip Context Menu .....................................................................................................................24C1TabStrip Designer Form.....................................................................................................................25Exploring the C1TabStrip Designer Form...............................................................................................26

C1TabStrip Elements............................................................................................................29

C1TabStrip Appearance ........................................................................................................29C1TabStrip's Visual Styles ......................................................................................................................29Custom Visual Styles ..............................................................................................................................30C1TabStrip's Direction ...........................................................................................................................31Multiple TabStrip Rows .........................................................................................................................31

C1TabStrip Behavior ............................................................................................................32Keyboard Access ....................................................................................................................................32ToolTips.................................................................................................................................................32Tabstrip Scrolling ...................................................................................................................................32Selected Index ........................................................................................................................................34

Client-Side Functionality.......................................................................................................34Client-Side Properties .............................................................................................................................34Client-Side Methods ...............................................................................................................................34Client-Side Events ..................................................................................................................................35

iv

TabStrip for ASP.NET AJAX Samples .....................................................................................35

TabStrip for ASP.NET AJAX Task-Based Help..........................................................................36Adding a C1TabStrip Control to Your Project in Code ...........................................................................36Binding a C1TabStrip to a Data Source ..................................................................................................37Binding a C1TabStrip to an Access Data Source .....................................................................................37Binding a C1TabStrip to an IEnumerable Data Source ...........................................................................40Binding a C1TabStrip to a SiteMap Data Source ....................................................................................41Binding a C1TabStrip to a XML Data Source.........................................................................................43Creating Multiple Tabstrip Rows ............................................................................................................45Creating a Tab Hierarchy .......................................................................................................................48Customizing the Appearance of a C1TabStrip ........................................................................................50Adding Custom Visual Styles .................................................................................................................51Changing the Direction of a C1TabStrip .................................................................................................54Changing C1TabStrip's Visual Style........................................................................................................55Setting the Alignment of a Horizontal C1TabStrip ..................................................................................56Setting the Alignment of a Vertical C1TabStrip.......................................................................................57Setting C1TabStrip Behaviors .................................................................................................................58Changing the Selected Index...................................................................................................................58Displaying ToolTips for Tabs .................................................................................................................59Enabling Scrolling on a C1TabStrip ........................................................................................................60Setting C1TabStrip's Automatic Postback ...............................................................................................62Validating Information Before a Tab Switch ...........................................................................................62Using a C1TabStrip for Navigation.........................................................................................................63Using a C1TabStrip for Website Navigation ...........................................................................................63Using a C1TabStrip for C1MultiPage Navigation ...................................................................................66

1

ComponentOne TabStrip for ASP.NET AJAX OverviewSimplify the creation of tabbed menus with ComponentOne TabStrip for ASP.NET AJAX. TabStrip for ASP.NET AJAX provides one control, C1TabStrip, which can be used in combination with a C1MultiPage control or placed inside of a master page for easy website navigation. Change C1TabStrip's style to suit your needs by selecting one of our built-in schemes or by creating a custom visual style. With TabStrip for ASP.NET AJAX's five built-in visual schemes and CSS styling, you can deliver sophisticated, professional Web sites and applications with minimal effort.

TabStrip for ASP.NET AJAX is part of ComponentOne Studio for ASP.NET AJAX, 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 AJAX.

Getting Started

- TabStrip for ASP.NET AJAXQuick Start (page 17)

- C1TabStrip Design-Time Support (page 22)

- C1TabStrip Elements (page 29)

What's New in TabStrip for ASP.NET AJAXNo new features have been added to the C1TabStrip control.

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.

Installing TabStrip for ASP.NET AJAXThe following sections provide helpful information on installing TabStrip for ASP.NET AJAX:

TabStrip for ASP.NET AJAX Setup Files

The ComponentOne Studio for ASP.NET AJAX installation program will create the following directory: C:\Program Files\ComponentOne\Studio for ASP.NET AJAX. This directory contains the following subdirectories:

bin Contains copies of all binaries (DLLs, Exes) in the ComponentOne Visual Studio ASP.NET package.

H2Help Contains documentation for Studio for ASP.NET AJAXcomponents.

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

C1WebUi\VisualStyles Contains all external file themes.

Samples

http://helpcentral.componentone.com/VersionHistory.aspx

http://helpcentral.componentone.com/VersionHistory.aspx

2

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 AJAX 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

Disc Drive: . CD or DVD-ROM drive if installing from CD

Uninstalling TabStrip for ASP.NET AJAX

To uninstall Studio for ASP.NET AJAX:

1. Open the Control Panel and select the Add or Remove Programs (Programs and Features in Vista).

2. Select ComponentOne Studio for ASP.NET AJAX and 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.

3

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 4).

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 4).

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.

4

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:

<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> <IPermission class="ReflectionPermission" version="1" Flags="ReflectionEmit,MemberAccess" /> ... </PermissionSet></NamedPermissionSets>

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.

5

To add OleDbPermission, complete the following steps:



<SecurityClasses> <SecurityClass Name="OleDbPermission" Description="System.Data.OleDb.OleDbPermission, System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>...</SecurityClasses>


<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> <IPermission class="OleDbPermission" version="1" Unrestricted="true"/> ... </PermissionSet></NamedPermissionSets>


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:



<SecurityClasses> <SecurityClass Name="FileIOPermission" Description="System.Security.Permissions.FileIOPermission, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>...</SecurityClasses>


<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> ... <IPermission class="FileIOPermission" version="1" Read="C:\SomeDir;$AppDir$" Write="$AppDir$" Append="$AppDir$"PathDiscovery="$AppDir$" /> ...</PermissionSet></NamedPermissionSets>


6

End-User License AgreementAll of the ComponentOne licensing information, including the ComponentOne end-user license agreements, frequently asked licensing questions, and the ComponentOne licensing model, is available online at http://www.componentone.com/SuperPages/Licensing/.

Licensing FAQsThis 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.

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.

http://www.componentone.com/SuperPages/Licensing/

http://www.componentone.com/SuperPages/Licensing/

7

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 derive 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.

8

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.

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.

9

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:


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.


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


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

3. Select the Rebuild Licenses option (this will rebuild the App_Licenses.licx file).


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 AJAX 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 run-time 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.

http://prerelease.componentone.com/

10

Subscriptions expire, products do not. You can continue to use the components you received or downloaded while your subscription was valid.

Technical SupportComponentOne 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:

Online Support via HelpCentralComponentOne 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 FormThis 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 will 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 NewsgroupsComponentOne 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 IssuesRegistered 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.

DocumentationComponentOne 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.

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 FilesComponentOne Studio for ASP.NET AJAX 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

http://www.componentone.com/Support

http://helpcentral.componentone.com/

http://helpcentral.componentone.com/ProductResources.aspx?View=FAQs

http://helpcentral.componentone.com/ProductResources.aspx?View=SAMPLES

http://helpcentral.componentone.com/ProductResources.aspx?View=VersionHistory

http://helpcentral.componentone.com/Articles.aspx

http://helpcentral.componentone.com/Search.aspx



http://helpcentral.componentone.com/Forums.aspx

http://helpcentral.componentone.com/Documentation.aspx

http://helpcentral.componentone.com/Documentation.aspx




http://www.componentone.com/support


11

C1.Web.UI.Controls.3.dll

Site licenses are available for groups of multiple developers. Please contact [email protected] for details.

About This DocumentationAcknowledgements

Microsoft, Windows, Windows Vista, Windows 7, 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 trademark of Apple, Inc., registered in the United States and other countries.

ComponentOne

If you have any suggestions or ideas for new features or controls, please call us or write:

Corporate Headquarters

ComponentOne LLC201 South Highland Avenue3rd FloorPittsburgh, PA 15206 • USA412.681.4343412.681.4384 (Fax)

http://www.componentone.com

ComponentOne Doc-To-Help

This documentation was produced using ComponentOne Doc-To-Help® Enterprise.

NamespacesNamespaces 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. The following code fragment shows how to declare a C1TabStrip (which is one of the core Studio for ASP.NET AJAX classes) using the fully qualified name for this class:

Visual BasicDim TabStrip As C1.Web.UI.Controls.C1TabStrip

C#C1.Web.UI.Controls.C1TabStrip TabStrip;

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.





http://www.doctohelp.com/

12

For example, the following code snippet creates aliases for two fully qualified names, and uses these aliases to define two objects:

Visual BasicImports C1TabStrip = C1.Web.UI.Controls.C1TabStripImports MyTabStrip = MyProject.Objects.C1TabStripDim wm1 As C1TabStripDim wm2 As MyTabStrip

C#using C1TabStrip= C1.Web.UI.Controls.C1TabStrip;using MyTabStrip = MyProject.Objects.C1TabStrip;C1TabStrip wm1;MyTabStrip 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.

Creating an AJAX-Enabled ASP.NET ProjectComponentOne TabStrip for ASP.NET AJAX 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 C1TabStrip 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 AJAX-

Enabled 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

Visual Studio 2005 Service Pack 1

ASP.NET AJAX Extensions 1.0

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)

http://msdn.microsoft.com/en-us/default.aspx

http://ajax.asp.net/

http://msdn.microsoft.com/

http://www.asp.net/ajax/





http://msdn.microsoft.com/en-us/default.aspx

13

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:

From the File menu, select New | Web Site. The New Web Site dialog box opens.

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.

In the list of templates, select AJAX 1.0-Enabled ASP.NET 2.0 Web Site.

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 form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page 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.

a. From the File menu, select New | Project. The New Project dialog box opens.

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.

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.

Select AJAX 1.0-Enabled ASP.NET 2.0 Web Application from the list of Templates in the right pane.

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 form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.

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:

a. From the File menu in Microsoft Visual Studio .NET, select New Web Site. The New Web Sitedialog box opens.

Select ASP.NET AJAX-Enabled Web Site from the list of Templates.

Enter a URL for your site in the Location field and click OK.


14



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.

a. From the File menu in Microsoft Visual Studio 2005, select New Project. The New Project dialog box opens.

Under Project Types, choose either Visual Basic Projects or Visual C# Projects. Note that one of these options may be located under Other Languages.

Select ASP.NET AJAX-Enabled Web Application from the list of Templates in the right pane.

Enter a URL for your application in the Location field and click OK.



for ASP.NET AJAXAdding the ASP.NET Components to a ProjectWhen you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio Toolbox Tab check box is checked, by default, in the installation wizard. When you open Visual Studio 2005, you will notice a ComponentOne Studio for ASP.NET AJAX 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 2005 Toolbox Tab check box during installation, you can manually add ComponentOne controls to the Toolbox at a later time.

Manually Adding the Studio for ASP.NET AJAX controls to the Toolbox

When you install ComponentOne Studio for ASP.NET AJAX, the C1TabStrip control will appear in the Visual Studio Toolbox:

To manually add the Studio for ASP.NET AJAX controls 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 Studio for ASP.NET AJAX components appear on their own tab in the Toolbox, select Add Tab from the context menu and type in the tab name, Studio for ASP.NET AJAX, 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.

15

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 all components belonging to namespace C1.Web.UI.Controls.2.dll. Note that there may be more than one component for each namespace.

5. Click OK to close the dialog box.

The controls are added to the Visual Studio Toolbox.

Adding Studio for ASP.NET AJAX Controls to the Form

To add Studio for ASP.NET AJAX controls to a form:

1. Add them 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.Conttrols.2 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 AJAX assembly from the list on the NET tab or browse to find the C1.Web.UI.Controls.2.dll file and click OK.

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

Note: This makes the objects defined in the C1.Web.UI.Controls.2 assembly visible to the project. SeeNamespaces (page 11) for more information.

Key FeaturesThe following are some of the main features of C1TabStrip that you may find useful:

Choose from five built-in visual styles or use your own custom visual style

The appearance of tabs are determined by CSS classes defined in built-in and custom visual style files. Select from five built-in styles using the C1TabStrip.VisualStyle property, including: ArcticFox, Office2007Black, Office2007Blue, Office2007Silver, and Vista. You can also define your own appearance by changing the external visual style files.

Choose from three C1TabStrip scrolling options

If the number of tabs extends the width of the control, you can add scrolling to the C1TabStrip. Choose from three scroll modes: scroll buttons can be aligned at the beginning, end, or at both the beginning and end of the C1TabStrip.

Display tabs in a hierarchical structure

A C1Tab can contain child tabs, allowing the C1TabStrip to work in a hierarchical structure. Use the C1TabStrip Designer Form (page 25) to add and remove tabs.

Use databinding to create tabs

You can build your C1Tabs by binding C1TabStrip to a database. Additionally, C1TabStrip can be bound to an object with IEnumerable and IListSource.

Choose from four different C1TabStrip alignment options

16

C1TabStrip provides four different Alignment options for the placement of C1TabStrip inside its container. Choose from Right, Left (default), Center, or Justify.

Easily customize C1TabStrip appearance

C1TabStrip allows you to easily customize its appearance. You can add images to tabs, overlap tabs using the OverlapOrder property, display tabs vertically or horizontally by setting the Direction property, display tabs in multiple rows, and more.

Use automatic postback when clicking a tab

Set the AutoPostBack property to True if you want an automatic postback to the server when a C1Tab is clicked.

C1MultiPage Integration

Add a C1MultiPage control to your Web Form and integrate C1MultiPage with C1TabStrip simply by setting the MultiPageID and PageViewID properties. Then when users click a tab, the content is displayed in the corresponding C1PageView of the C1MultiPage control.

Rich client-side object model

Make your Web applications more efficient by using C1TabStrip's rich client-side object model. C1TabStrip provides client-side properties, methods, and events.

Browser support

C1TabStrip includes browser support for Netscape, Internet Explorer 6, Internet Explorer 7, and Safari.

Section 508 compliance

The C1TabStrip control meets Section 508 federal regulations.

XHTML 1.1 Compliance

C1TabStrip provides complete XHTML compliance. The output that is generated is fully XHTML 1.1 compliant.

Search Engine Optimization

Optimized for search engines, C1TabStrip uses semantic lists and <a> tags which are recognized and indexed by Web crawlers.

17

TabStrip for ASP.NET AJAX Quick StartIn this quick start, you will create a tab strip that consists of six tabs with a unique C1PageView for each tab. TheC1MultiPage control will be used to connect the C1PageViews to the tabs in the C1TabStrip control.

Step 1 of 3: Adding C1TabStrip to the PageIn this step, we will add a C1TabStrip to a Web page.

Complete these tasks.

1. Create a new ASP.NET Ajax-Enabled Website project.

Note that as you've created an AJAX-Enabled Web site, a ScriptManager control initially appears on the page.

2. In the Solution Explorer window of your project, right-click on References and select Add Reference. Add the C1.Web.UI.2 reference to your project.

3. Right-click on the toolbox and select Add Tab and enter "Palomino" into the Tab text box.

4. Right-click on the Palomino tab name and click on Choose Items. The Choose Items dialog box appears.

5. Click the Browse button to browse to the default location on the assembly file, C:\Program Files\ComponentOne Studio.NET 2.0\bin\, and select C1.Web.UI.Controls.2.

All of the controls from the assembly, C1.Web.UI.Controls.2 appear highlighted in the Choose Toolbox Items dialog box.

6. Select the highlighted controls and click OK.

18

7. The controls in the Visual Studio Toolbox appear under the Palomino tab.

8. While in Design view navigate to the Visual Studio Toolbox and double-click the C1TabStrip icon to add the C1TabStrip control to your page.

The C1TabStrip appears as an empty tab.

Step 2 of 3: Adding C1Tabs to the C1TabStrip controlIn this step add six C1Tabs to the C1TabStrip control using the C1TabStrip Designer Form.

1. Click on the smart tag to open the C1TabStrip Tasks menu and then click Tabstrip Designer to open the C1TabStrip Designer Form.

2. In the treeview of the designer, right-click on C1TabStrip1 and select Add Child. Tab01 is added as a tab page to the C1TabStrip control.

3. Select Tab1 and press the F3 key. Type "Hardware" into the treeview pane.

4. Right-click on the Hardware tab and select Insert Item and then select Tab. Repeat this five more times so that six tabs appear in the C1TabStrip Designer Form like the following:

19

5. Right-click on each tab and select Rename to the rename the tabs to the following:

Tab5 to "Computer Name"

Tab4 to "General"

Tab3 to "Remote"

Tab2 to "Automatic Updates"

Tab1 to "Advanced"

6. Click OK to save and close the C1TabStrip Designer Form.

The six C1Tabs we added in the C1TabStrip Designer Form appear on the C1TabStrip control. Notice that the C1TabStrip''s default visual style is ArcticFox .

20

7. Now we will change the C1TabStrip control's visual style to Office2007Blue. Open the C1TabStrip tasks menu and select Auto Format. The Auto Format dialog box appears. Select OfficeBlue2007 and click OK to close the dialog box and apply the changes.

The C1TabStrip''s visual style is updated at design time.

Step 3 of 3: Adding the C1MultiPage ControlIn the next set of steps we'll use the C1MultiPage control with the C1TabStrip control to create six C1PageView elements for each of the tabs.

1. Navigate to the Visual Studio Toolbox and add the C1MultiPage control to your page.

2. In design view, select the C1MultiPage control and click on its smart tag to open the C1MultiPage Tasksmenu and click MultiPage Designer. The C1MultiPage Designer Form appears.

3. In the C1MultiPage Designer Form select C1MultiPage1, click the Add Child Item button, and select PageView. Repeat this step five more times to add a total of six PageViews to the C1MultiPage control.

4. Switch to Source view and locate the <C1PageView> tag for C1PageView1 and use the img tag to add the advanced.gif image to the first page of the C1MultiPage control. The source code should appear like the following.

<cc2:C1PageView runat="server" ID="C1PageView1"><img src="img/advanced.gif"/> </cc2:C1PageView>

5. Add more images to the remaining C1PageViews. The source code should appear like the following:<cc2:C1PageView runat="server" ID="C1PageView2"><img src="img/automaticupdates.gif"/></cc2:C1PageView><cc2:C1PageView runat="server" ID="C1PageView3"><img src="img/remote.gif"/></cc2:C1PageView><cc2:C1PageView runat="server" ID="C1PageView4"><img src="img/general.gif"/></cc2:C1PageView><cc2:C1PageView runat="server" ID="C1PageView5"><img src="img/computername.gif"/></cc2:C1PageView><cc2:C1PageView runat="server" ID="C1PageView6"><img src="img/hardware.gif"/></cc2:C1PageView>

Next we will use the PageViewID property to reference the appropriate PageViewID to each unique tab in the C1TabStrip control.

6. Open the C1TabStrip Designer Form and select C1TabStrip1 in the treeview. Navigate to the MultiPageID property and set it to C1MultiPage1.

7. Open the C1TabStrip Designer Form and select the Advanced tab in the treeview. Navigate to the PageViewID property and enter "C1PageView1".

21

8. Set the PageViewID properties for the remaining five tabs to the following:

Automatic Updates to "C1PageView2"

Remote to "C1PageView3"

General to "C1PageView4"

Computer Name to "C1PageView5"

Hardware to "C1PageView6"

9. Save and run your project.

TabStrip for ASP.NET AJAX Top TipsThis section provides tips and tricks for using the C1TabStrip control.

22

You can prevent a particular tab page from being selected for content protection purposes. This is achieved by setting e.cancel=true on the client side in the beforeTabSelect event. For example, we can prevent the “Sharing” tab from being selected by using the following client-side event handler.

function beforeTabSelect(sender, e) { if (e.get_tab().get_text() == "Sharing") e.set_cancel(true); }

Dynamically populate tabs by setting a data list to the DataSource property. For task-based help, see Binding a C1TabStrip to a Data Source (page 37).

Set the ForceNewLine property to True to arrange the tabs in multiple lines. See Creating Multiple Tabstrip Rows (page 45) for task-based help.

You must specify the width of the control when you create a vertical tabstrip.

Remember to always use the ScriptManager control.

Set visual styles on your Studio for ASP.NET AJAX control to add rich themes to your application. For task-based help, see Changing C1TabStrip's Visual Style (page 55). For a list of visual styles, see C1TabStrip's Visual Styles (page 29).

Use image sprites in your custom visual styles to increase performance and decrease load times.

Update the client-side model properties and events when you don't need to perform server-side processing. The C1TabStrip control can be coded on both the client side and server side.

Use the SaveXML function of the control to save a serialized version of the control, including all settings and data. You can retrieve the settings using the LoadXML function. This is useful for creating menu sitemaps, schemas, and more.

C1TabStrip Design-Time SupportThe following sections describe how to use C1TabStrip's design-time environment to configure the C1TabStripcontrol.

C1TabStrip Smart TagThe C1TabStrip 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 C1TabStrip.

The C1TabStrip control provides quick and easy access to the C1TabStrip Designer Form and common properties through its smart tag.

To access the C1TabStrip Tasks menu, click the smart tag in the upper-right corner of the C1TabStrip control.

23

The C1TabStrip Tasks menu operates as follows:

Choose Data Source

Clicking the drop-down arrow in the Choose Data Source box opens a list of available data sources and allows you to add a new data source. To add a new data source to the project, click <New data source>to open the Data Source Configuration Wizard.

TabStrip Designer

Clicking TabStrip Designer opens the C1TabStrip Designer Form, where C1Tabs and separators can be added, removed, and reordered. You can preview the C1TabStrip here, as well as set a variety of properties defining the appearance, behavior, and more for each C1Tab and separator.

VisualStylePath

Sets the path to the built-in or custom visual style.

UseEmbeddedVisualStyles

When selected, this forces the control to use a built-in visual style. When unselected, the control will shed its built-in visual style and you will have to add a custom style.

Visual Style

Selecting a VisualStyle from the drop-down list changes the visual scheme of the control.

About

Clicking About brings up the About ComponentOne Studio for ASP.NET AJAX dialog box.

C1TabStrip Collection EditorC1TabStrip includes a collection editor that allows you to add or remove C1Tabs from the C1TabCollection, as well as specify C1Tab properties. Each C1TabStrip, C1Tab, and separator can have its own child C1Tabs.

24

To access the C1Tab Collection Editor:

Click the smart tag in the upper-right corner of the C1TabStrip control to open the C1TabStrip Tasks menu.

1. Select TabStrip Designer. The C1TabStrip Designer Form appears.

2. Select the desired C1TabStrip, C1Tab, or separator.

3. Click the ellipsis button next to the Tabs property under the Misc category in the properties pane. The C1Tab Collection Editor appears.

C1TabStrip Context MenuC1TabStrip has additional commands available on the context menu that Visual Studio provides for all .NET and ASP.NET controls.

Right-click anywhere on the C1TabStrip control to display the C1TabStrip context menu:

25

The context menu commands operate as follows:

TabStrip Designer

Clicking TabStrip Designer opens the C1TabStrip Designer Form, where C1Tabs and separators can be added, removed, and reordered. You can preview the C1TabStrip here, as well as set a variety of properties defining the appearance, behavior, and more for each C1Tab and separator.

Show Smart Tag

Clicking on Show Smart Tag opens the C1TabStrip Tasks menu.

C1TabStrip Designer FormThe C1TabStrip Designer Form is C1TabStrip's designer for editing its properties, as well as the C1Tabs and separator properties. The C1TabStrip Designer Form is similar to the Properties window as it allows programmers to modify the control visually. However, it allows you to: select the C1TabStrip, C1Tabs, and separators; set their properties; manipulate their locations; and then preview the appearance of the C1TabStrip control, all within the form.

In this topic, you will become familiar with the C1TabStrip Designer Form's design interface so you can use the commands within it to edit C1TabStrip with minimal effort and time.

To open the C1TabStrip Designer Form, click the C1TabStrip smart tag and select the TabStrip Designer link from the C1TabStrip Tasks menu:

26

Exploring the C1TabStrip Designer Form

The C1TabStrip Designer Form contains a menu, toolbar, Edit tab, Preview tab, and properties pane.

27

C1TabStrip Designer Form Menu

The C1TabStrip Designer Form menu contains the following menu items and sub-items:

Menu Item Submenu Item Description

File Load from XML Load the formatting for a C1TabStrip control from an .xml file.

Save as XML Save the current formatting of the C1TabStrip control to an .xml file.

Exit Closes the C1TabStrip Designer Form.

Edit Insert Item Inserts a new tab or separator at the specified place in the list of tabs and separators.

Add Child Adds a new tab or separator as a child of the selected item.

Cut Cuts the selected tab or separator to be moved in the list of items.

Copy Copies the selected tab or separator.

Paste Pastes a tab or separator at the specified location in the list of items.

Delete Removes the selected tab or separator.

Rename Allows you to change the name of the tab or separator.

Change to Type Allows you to change the C1Tab from a tab to a separator and vice versa.

Help Help Opens the Help file.

About Provides information on the C1TabStrip control.

C1TabStrip Designer Form Toolbar

The table below describes each button:

Button Name Description

Move Item Up Moves the selected tab or separator up the list of items.

Move Item Down Moves the selected tab or separator down the list of items.

Move Item Left Moves the selected tab or separator to the left in the hierarchy.

Move Item Right Moves the selected tab or separator to the right in the hierarchy.

Add Child Item Inserts a tab or separator as a child of the C1TabStrip control, tab, or separator.

Insert Item Inserts a tab or separator at the specified location in the list of items.

Cut Cuts the selected tab or separator to be moved in the list of items.

Copy Copies the selected tab or separator.

Paste Pastes a tab or separator at the specified location in the list of items.

Delete Removes the selected tab or separator.

Edit Tab

28

Click the Edit tab and select the C1TabStrip control or the desired tab or separator for which you would like to manipulate or adjust the properties.

Preview Tab

Click the Preview tab for a preview of what the C1TabStrip control will look like.

Properties Pane

The C1TabStrip Designer Form properties pane is almost identical to the Visual Studio Propertieswindow. Simply select a tab, separator, or the C1TabStrip 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 C1TabStrip control.

Cancel Clicking Cancel closes the C1TabStrip Designer Form, cancelling the new settings and applying the default settings to the C1TabStrip control.

Help Clicking the Help button opens the documentation.

29

C1TabStrip ElementsA tabstrip is a user interface used for navigation. Essentially, a tabstrip is a menu that consists of a series of tabs laid out on a strip.

Tabstrip

The tabstrip is the container that hosts the tabs of the C1TabStrip control. It is represented by the C1TabStrip class, which determines the overarching appearance and behavior of the control; it's from the C1TabStrip class that you can set the VisualStyle, Alignment, Direction, and ScrollSettings for the control.

A C1TabStrip can be aligned vertically or horizontally.

Tabs

Tabs are the individual menu elements within the tabstrip; the tabs are represented by the C1Tab class. The tabs have three states: normal, selected, and hover. A tab is "normal" when it is unselected and "selected" if it has focus. Tabs are only in "hover" state when a user mouses over them.

The tab object (C1Tab) only represents the tab; it does not represent the content that is attached to the tab. Tabs can be associated with web page content or with one page of a C1MultiPage control. For information on assigning content to tabs, see Using a C1TabStrip for Website Navigation (page 63) and Using a C1TabStrip for C1MultiPage Navigation (page 66).

Labels

By default, the text labels are named "Tab[#]". For example, the first tab you add will be named "Tab1", whereas the second tab will be named "Tab2". You can reset the label using the Text property.

C1TabStrip AppearanceThe following topics provide information about C1TabStrip''s appearance.

C1TabStrip's Visual StylesThe C1TabStrip control provides five built-in tab styles that can be easily applied through the Auto Formatdesigner. Once a preformatted style is applied to the C1TabStrip, the styles for it appear in the .aspx page so you can quickly customize the scheme. You can also modify the applied scheme by applying new property styles using the C1TabStrip Designer Form This will overwrite the existing styles in the applied style.

Note: One additional visual style, Windows7, is available for the C1TabStrip control, but you must add it as a custom visual style at this time. See Adding Custom Visual Styles (page 51) for more information.

Using the Auto Format Schemes

To learn how to add a preformatted style to C1TabStrip, see Changing C1TabStrip's Visual Style (page 55).

30

Appearance of the Built-In Tab Schemes

The following table illustrates each of the five built-in visual styles.

Format Appearance

ArcticFox

Office2007Black

Office2007Blue

Office2007Silver

Vista

Custom Visual StylesWhile TabStrip for ASP.NET AJAX comes with five built-in styles, we recognize that there are instances where that you will want to customize your C1TabStrip control. To customize the C1TabStrip control, you will create a custom CSS style sheet and add it to your project as a visual style. The custom CSS style sheet must always benamed "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 C1TabStrip's visual styles within the installation directory at C:\Program Files\ComponentOne\Studio for ASP.NET AJAX\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 "CustomStyle"), and then, beneath that, create a sub-folder named "C1TabStrip". The image folder and .css file should be placed underneath the C1TabStrip folder. The folder hierarchy will resemble the following:

31

This structure of these folders is very important; C1TabStrip will always look for the ~/VisualStyles/StyleName/C1TabStrip/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.

For step-by-step instructions on adding custom style sheets to your project, see Adding Custom Visual Styles (page 51).

C1TabStrip's DirectionThe C1TabStrip can be positioned to the right, left, top, or bottom of the control window. The position of the tabstrip is handled by the Direction property, and, by default, that property is set to Top. To learn how to manipulate the position of a C1TabStrip, see Changing the Direction of a C1TabStrip (page 54).

The following images illustrate each option of the Direction property.

Direction Graphic

Top

Bottom

Right

Left

Multiple TabStrip RowsIf you have more tabs than the width or height of the control will allow, you can create multiple tabstrip rows using the C1Tab.ForceNewLine property. When you set a C1Tab''s C1TabForceNewLine, that tab will start its own row. You can create as many tab rows as you want.

Multiple tabstrip columns are not supported at this time.

32

For task-based help about creating multiple tabstrip rows, see Creating Multiple Tabstrip Rows (page 45).

C1TabStrip BehaviorThe following topics provide information about C1TabStrip''s behavioral features. Some of these features affect how the control acts when loaded, whereas others affect the users' interactions with the control.

Keyboard AccessTabStrip for ASP.NET AJAX features keyboard support for the C1TabStrip control and each of its tabs. You can enable this feature for the whole tabstrip by setting the C1TabStrip.AccessKey property to an access key, or you can enable this feature for individual tabs by setting the C1Tab.AccessKey property to an access key. Once the AccessKey property is set, you can access an element by pressing the ALT key and the access key simultaneously on your keyboard.

ToolTipsYou can use the ToolTip property to create a user-friendly interface. ToolTips are graphic user interface elements that are used to provide users with information or instructions regarding elements of a user interface. When users hover over the interface element with their cursor, a box will appear with the additional information.

ToolTips can be applied to each tab of a C1TabStrip by setting the ToolTip property to a string. If you wanted to set a tooltip for the first tab of the control, you would use the following code:

Visual BasicTab1.ToolTip = "Hello World!"

C#Tab1.ToolTip = "Hello World!";

You can also set the ToolTip property in Design view or in Source view. For more information on setting this property, see Displaying ToolTips for Tabs (page 59).

Tabstrip ScrollingBy default, the tabs of a C1TabStrip control will move to the next line or column if the number of tabs exceeds the room allowed by the tabstrip width or height. To avoid this, you can enable ScrollSettings.

The C1TabStrip control contains three ScrollSettings properties: ScrollButtonAlign, ScrollMode, and ScrollPosition. These properties are described in the table below.

Property Description

ScrollButtonAlign Gets or Sets the alignment of the scroll buttons. The buttons can be set to StartSide, TwoSides, or EndSide. These options are outlined below:

StartSide: Selecting this option places both buttons on the starting side of the tabstrip.

TwoSides: Selecting this option places buttons on each side of the tabstrip.

EndSide: Selecting this option places both buttons on the ending side of the tabstrip.

ScrollMode Gets or sets a value that determines which scroll mode is enabled. You

33

can choose from None, Buttons, ButtonsHover, and Hover. These options are outlined below:

None: Selecting this option disables scrolling.

Buttons: Selecting this option will place two button images on the control. These buttons must be pressed in order to scroll through the tabstrip.

ButtonsHover: Selecting this option will place two button images on the control. Users can scroll through the tabstrip by hovering over one of the buttons.

Hover: Selecting this option enables users to scroll through the tabstrip by hovering over the first or last tab in a series. No buttons are shown.

Note: When Hover is selected, users will always have to scroll through the tabstrip by hovering over the first or last tab regardless of what the ScrollButtonAlign property is set to.

ScrollPosition Gets or sets the scroll position. This property will determine the position of the scrollable tabstrip at run-time.

Examples of Tabstrip Scrolling

The following table shows examples of tabstrip scroll settings. Please note that the ButtonsHover selection won't be shown in the following table; ButtonsHover will appear the same as the Buttons selection.

Example Settings

ScrollMode = None

ScrollMode = Hover

ScrollPosition = 300

ScrollButtonAlign = StartSide

ScrollMode = Buttons

ScrollPosition = 0

ScrollButtonAlign = EndSide



ScrollButtonAlign = TwoSides



For task-based help on C1TabStrip scrolling, see Enabling Scrolling on a C1Tabstrip (page 60).

34

Selected IndexThe C1TabStrip control's tabs follow a zero-based index, meaning that the index of the first tab is zero. By default, the SelectedIndex property will be set to zero ("0"), and the first tab will be selected at run-time. To change which tab is selected at run-time, set the SelectedIndex property to a different number in the index. For example, if you have four tabs and want the last one to be selected at run-time, you would set the SelectedIndex property to 3.

For task-based help on setting the SelectedIndex property, see Changing the Selected Index (page 58).

Client-Side FunctionalityC1TabStrip includes a rich and flexible client-side object model. Several server-side properties and methods can be used on the client-side. Client-side events can be accessed from the Properties window.

When a C1TabStrip control is added to a web project, an instance of the client-side tabstrip will be created automatically. For example, if you have a tabstrip control with the server-side ID of "C1TabStrip1", you can use the following script to acquire a reference to its client object:

var newTabStrip = $find("<%= C1TabStrip1.ClientID %>");

Using C1TabStrip's client-side functionality, you can implement many features in your Web page without having to post back to the server. Thus, using client-side methods and properties will increase the efficiency of your Web site.

The following topics describe the available client-side properties, methods, and events.

Client-Side PropertiesThe 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).

The following JavaScript example sets the selected index of a C1TabStrip:

<script id="ScriptSample" type="text/javascript">function SetSelectedIndex(){ $find("<%=C1TabStrip1.ClientID%>").set_selectedIndex(1);};</script>

Client-Side MethodsC1TabStrip 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 C1TabStripclient-side reference section.

35

Client-Side EventsC1TabStrip includes a rich client-side object model in which includes several client-side events. You can access these client-side events from the Properties window. To create a new client-side event, select the drop-down arrow next to a client-side event and select Add new client side handler.

Once you've added the client-side handler, Visual Studio will add a script to the Source view. That script will resemble the following:

<script id="ComponentOneClientScript" type="text/javascript">function C1TabStrip1_OnClientAfterTabSelect(){

//// Put your code here.//

};</script>

The following provides names and descriptions of C1TabStrip's client-side events:

Client-Side Event Description

OnClientAfterTabSelect Fires on client side after a tab is selected.

OnClientBeforeTabSelect Fires on client side before a tab is selected.

OnClientTabMouseEnter Fires on client side when the mouse hovers over a tab.

OnClientTabMouseOut Fires on client side when the mouse stops hovering over a tab.

OnClientTabUnSelect Fires on client side when a tab is unselected.

TabStrip for ASP.NET AJAX SamplesPlease 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://www.helpcentral.componentone.com/Samples.aspx.

http://www.helpcentral.componentone.com/Samples.aspx

36

The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET AJAX detail the C1TabStrip control's functionality:

Sample Description

Visual Styles Illustrates C1TabStrip's five built-in visual styles.

Direction Demonstrates the four directions – Top, Bottom, Left, and Right – that the C1TabStrip control can be positioned in.

Alignment Demonstrates the four alignments – Left, Right, Center, and Justify – of the C1TabStrip control.

MultiRow Demonstrates multiple rows on a C1TabStrip control.

Data Binding Illustrates the four different binding methods that the C1TabStrip control supports. The C1TabStrip control supports Access, XML, SiteMap, and IENumerable data binding.

Scrolling Demonstrates the three scrolling modes of the C1TabStrip control.

TabStrip for ASP.NET AJAX Task-Based HelpThe task-based help section assumes that you are familiar with programming in the Visual Studio ASP.NET environment and have a general understanding of the ComponentOne TabStrip control.

Each topic provides a solution for specific tasks using the C1TabStrip control. By following the steps outlined in each topic, you will be able to create projects using a variety of C1TabStrip control features.

Each task-based help topic also assumes that you have created a new AJAX-enabled ASP.NET project. ComponentOne Accordion for ASP.NET AJAX 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 C1TabStrip 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.

Adding a C1TabStrip Control to Your Project in CodeIn some instances, you may want to add a C1TabStrip control to your project in code. In this topic, you will learn how to create a C1TabStrip control with three C1Tab objects using C# and Visual Basic code.

To add a C1TabStrip control programmatically, complete these steps:

1. Add a PlaceHolder control to your Web page.

2. In Design view, double-click the page to add a Page_Load event to the project and to switch to the code editor.

3. Import the following namespace into your project:

Visual BasicImports C1.Web.UI.Controls.C1TabStrip

C#using C1.Web.UI.Controls.C1TabStrip;

37

4. Create the C1TabStrip object and add it to your project by placing the following code in the Page_Loadevent:

Visual BasicDim NewTabStrip As C1TabStrip = New C1TabStrip() PlaceHolder1.Controls.Add(NewTabStrip)

C#C1TabStrip NewTabStrip = new C1TabStrip();PlaceHolder1.Controls.Add(NewTabStrip);

5. Create three C1Tab objects and add them to the C1TabStrip control. This code should also be added to the Page_Load event.

Visual Basic'Create three C1Tab objects and set their 'Text' property

Dim C1Tab1 As C1Tab = New C1Tab("C1Tab1") Dim C1Tab2 As C1Tab = New C1Tab("C1Tab2") Dim C1Tab3 As C1Tab = New C1Tab("C1Tab3") 'Add the three C1Tab objects to the C1TabStrip

NewTabStrip.Tabs.Add(C1Tab1)NewTabStrip.Tabs.Add(C1Tab2)NewTabStrip.Tabs.Add(C1Tab3)

C#//Create three C1Tab objects and set their 'Text' property

C1Tab C1Tab1 = new C1Tab("C1Tab1");C1Tab C1Tab2 = new C1Tab("C1Tab2");C1Tab C1Tab3 = new C1Tab("C1Tab3");//Add the three C1Tab objects to the C1TabStrip

NewTabStrip.Tabs.Add(C1Tab1);NewTabStrip.Tabs.Add(C1Tab2);NewTabStrip.Tabs.Add(C1Tab3);

6. Run the program.

This Topic Illustrates the Following:

After you've run the program, your C1TabStrip control will resemble the following image:

Binding a C1TabStrip to a Data SourceC1TabStrip supports binding to variant data sources. The sections below explain how to bind a C1TabStrip to Access, IEnumerable, SiteMap, and XML data sources.

Binding a C1TabStrip to an Access Data Source

In this topic, you will learn how to bind a C1TabStrip control to an Access data source.

To bind a C1TabStrip control to an Access DataSource, complete the following steps:

1. Create a new ASP.NET AJAX-Enabled Web Site in Visual Studio.

2. In the Solution Explorer window, right-click on App_Data and choose Add Existing Item from the menu.

The Add Existing Item dialog box appears.

38

3. Navigate to the folder that contains the Control Explorer sample project (In Vista: C:\Users\<username>\Documents\ComponentOne Samples, In XP: C:\Documents and Settings\<username>\My Documents\ComponentOne Samples) and open the App_Data folder. Select tabdata.mdb from the list of files and click Add.

The tabdata.mdb database has been added to your project.

4. Add a C1TabStrip control to your form.

5. Click C1TabStrip's smart tag ( ) to open the TabStrip Tasks menu.

6. In the C1TabStrip Tasks menu, select <New Data Source…> from the Choose Data Source drop-down box.

The Data Source Configuration Wizard appears.

7. In the Data Source Configuration Wizard, complete the following steps:

8. Select Access Database as your data source and then click OK.

The Configure Data Source dialog box appears.

9. In the Configure Data Source dialog box, complete the following:

a. Click Browse to open the Select Microsoft Access Database dialog box.

b. Select the App_Data folder and then choose tabdata.mdb from the Contents of folder pane.

c. Click OK to return to the Configure Data Source dialog box and then click Next.

d. Select the radio button next to Specify columns from a table or view to activate the form.

e. Click the Name drop-down arrow and select Links.

39

f. In the Columns pane, select the checkbox next to the asterisk (*).

g. Click Next to move to the next step and then click Finish to close the dialog box.

10. Click C1TabStrip's smart tag ( ) and select TabStrip Designer from the TabStrip Tasks menu.

The TabStrip Designer Form dialog box opens.

11. In the properties pane, find MasterID and ParentID. Set their properties to the following:

MasterID – "ID"

ParentID – "ParentID"

12. Click OK and then run the program.


The tab hierarchy of the C1TabStrip now reflects the information in the tabdata.mdb file. As you navigate through each tab, notice that your results resemble the following image:

40

Binding a C1TabStrip to an IEnumerable Data Source

In this topic, you will learn how to create an IEnumerable data source and bind it to a C1TabStrip.

Note: When a C1TabStrip is bound to an IEnumberable data source, no hierarchy will exist; this is flat

databinding, therefore only root items can be created.

To bind a C1TabStrip control to an IEnumerable Data Source, complete the following steps:


2. Add a C1TabStrip to your project.

3. Double-click your project page to add Page_Load event to your code and open the code editor.

4. Import the following namespaces into your program:

Visual BasicImports System.CollectionsImports C1.Web.UI.Controls.C1TabStrip

C#using System.Collections;using C1.Web.UI.Controls.C1TabStrip;

5. Create an ArrayList and add it to your code by placing the following code within the _Default class but outside of the Page_Load event:

Visual BasicPrivate Function CreateArrayList() As ArrayList Dim list As New ArrayList() list.Add(New C1Tab("Books")) list.Add(New C1Tab("Computer Games")) list.Add(New C1Tab("Movies")) list.Add(New C1Tab("Music")) list.Add(New C1Tab("Other"))

Return list End Function

C#private ArrayList CreateArrayList(){

ArrayList list = new ArrayList();list.Add(new C1Tab("Books"));list.Add(new C1Tab("Computer Games"));list.Add(new C1Tab("Movies"));list.Add(new C1Tab("Music"));list.Add(new C1Tab("Other"));

return list;}

6. Set the DataSource property and bind the array list data to your C1TabStrip by copying the following code into the Page_Load event:

Visual BasicC1TabStrip1.DataSource = CreateArrayList()C1TabStrip1.DataBind()

C#

41

C1TabStrip1.DataSource = CreateArrayList();C1TabStrip1.DataBind();

7. Run the program.


After you run the program, observe that the tabs of the C1TabStrip now reflect the information that you entered incode view. Your result will resemble the following image:

Binding a C1TabStrip to a SiteMap Data Source

In this topic, you will learn how to create a SiteMap, add it to your Web project, and then bind it to a C1TabStripcontrol.

To bind a C1TabStrip control to a SiteMap, complete the following steps:


2. In the Solution Explorer window, right-click on the project and select Add New Item.

3. In the Add New Item dialog box, select Site Map. Notice that the default file name of your new site mapis Web.sitemap.

4. Press Add to leave the Add New Item dialog box.

The Web.sitemap file is added to your project.

42

5. In Solution Explorer, double-click Web.sitemap to access the file. At this point, the file will only include the following tags:

<?xml version="1.0" encoding="utf-8" ?><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>

6. Replace the pre-existing <siteMapNode> tags with the following XML:

XML Markup <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 AJAX" description="Studio for ASP.NET AJAX" /> <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" /> <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" />

43

<siteMapNode url="" title="Resellers" description="Resellers" /> </siteMapNode></siteMapNode>

7. Add a C1TabStrip to your project.

8. Click C1TabStrip's smart tag ( ) to open the C1TabStrip Tasks menu.



10. In the Data Source Configuration Wizard wizard, select Site Map as your data source and then click OK.

11. Run the project.


The tab hierarchy of the C1TabStrip now reflects the information in the Web.Sitemap file. Your result should resemble the following image:

Binding a C1TabStrip to a XML Data Source

In this topic, you will learn how to create an XML document, add it to your Web project, and then bind it to a C1TabStrip control.

To bind a C1TabStrip control to a XML Data Source, complete the following steps:


2. In the Solution Explorer window, right-click on the project and select Add New Item.

3. In the Add New Item dialog box, select XML File and type "animals.xml" into the name field.

44

4. Press Add to include the XML file in the project.

The animals.xml file is added to your project.

5. In Solution Explorer, double-click animals.xml to access the file. At this point, the file will only include the following header tag:

<?xml version="1.0" encoding="utf-8" ?>

6. Add the following XML to the animals.xml document, placing it beneath the header tag :

<root> <tab Text="Cats"> <tab Text="Himalayan"></tab> <tab Text="Persian"></tab> <tab Text="Siamese"></tab> </tab> <tab Text="Dogs"> <tab Text="Akita"></tab> <tab Text="Beagle"></tab> <tab Text="Pug"></tab> </tab> <tab Text="Lizards"> <tab Text="Chameleon"></tab> <tab Text="Gecko"></tab> <tab Text="Iguana"></tab> </tab></root>

45

Note: Observe that the child tabs are indented in the above XAML.

7. Add a C1TabStrip control to your project.

8. Click C1TabStrip's smart tag ( ) to open the C1TabStrip Tasks menu.



10. Select XML File as your data source and then click OK.

The Configure Data Source dialog box appears.

11. Click Browse to open the Select XML File dialog box.

12. Select the App_Data folder and then choose animals.xml from the Contents of folder pane. Click OK.

13. Exit the Configure Data Source dialog box by clicking OK.

14. Run the project.


After running your project, observe that your C1TabStrip control contains three parent tabs – Cats, Dogs, and Lizards - and that each tab contains three child tabs. Your final result will resemble the following:

Creating Multiple Tabstrip RowsYou can create multiple rows on a C1TabStrip control using the ForceNewLine property. Whenever you set a tab's ForceNewLine property to True, a new row will be created on the tabstrip. This topic illustrates how to create three rows of tabs on a C1TabStrip control in Design view, in Source view, and in code.

For more information about multiple tabstrip rows, see Multiple Tabstrip Rows (page 31).

Creating Multiple Rows in Design View

To create three tab rows on a C1TabStrip control, complete the following steps:

46



3. Click C1TabStrip''s smart tag ( ) to open the C1TabStrip Tasks menu and then select TabStrip Designer.The C1TabStrip Designer Form appears.

4. Click the Add Child Item button five times to add five tabs to the C1TabStrip control.

5. Select Tab3, locate its ForceNewLine property, and set it to True.

6. Select Tab5, locate its ForceNewLine property, and set it to True.

7. Press OK and then run the project.

Observe that Tab3 and Tab4 are placed located in a row beneath Tab1 and Tab2, while Tab5 sits below Tab3 on a row of its own.

Creating Multiple Rows in Source View

To create three tab rows on a C1TabStrip control in source view, complete the following steps:

1. In Design view, add a C1TabStrip control to your Web project.

2. Switch to Source view and add five tabs to your C1TabStrip control by placing the following HTML markup between the <cc1:C1TabStrip> tags:

<Tabs> <cc1:C1Tab runat="server" Text="Tab01"> </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Tab02"> </cc1:C1Tab> <cc1:C1Tab runat="server" ForceNewLine="True" Text="Tab3"> </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Tab04"> </cc1:C1Tab> <cc1:C1Tab runat="server" ForceNewLine="True" Text="Tab5"> </cc1:C1Tab> </Tabs>

3. Add ForceNewLine="True" to the <cc1:C1Tab> tags for Tab3 and Tab5. After you add the HTMLto those tags, they will resemble the following:Tab03 - <cc1:C1Tab runat="server" ForceNewLine="True" Text="Tab3">

Tab05 - <cc1:C1Tab runat="server" ForceNewLine="True" Text="Tab5">

Creating Multiple Rows in Code

To create multiple rows on your C1TabStrip control, complete the following steps:


2. Switch to the code window and import the following namespace into your project:

47



3. Create five C1Tabs by adding this code to the Page_Load event:

Visual BasicDim C1Tab1 As New C1Tab("Tab1") Dim C1Tab2 As New C1Tab("Tab2") Dim C1Tab3 As New C1Tab("Tab3") Dim C1Tab4 As New C1Tab("Tab4") Dim C1Tab5 As New C1Tab("Tab5")

C#C1Tab C1Tab1 = new C1Tab("Tab1");C1Tab C1Tab2 = new C1Tab("Tab2");C1Tab C1Tab3 = new C1Tab("Tab3");C1Tab C1Tab4 = new C1Tab("Tab4");C1Tab C1Tab5 = new C1Tab("Tab5");

4. Add the new tabs to the C1TabStrip control:

Visual BasicC1TabStrip1.Tabs.Add(C1Tab1)C1TabStrip1.Tabs.Add(C1Tab2)C1TabStrip1.Tabs.Add(C1Tab3)C1TabStrip1.Tabs.Add(C1Tab4)C1TabStrip1.Tabs.Add(C1Tab5)

C#C1TabStrip1.Tabs.Add(C1Tab1);C1TabStrip1.Tabs.Add(C1Tab2);C1TabStrip1.Tabs.Add(C1Tab3);C1TabStrip1.Tabs.Add(C1Tab4);C1TabStrip1.Tabs.Add(C1Tab5);

5. Set the ForceNewLine properties of C1Tab03 and C1Tab05 to True:

Visual BasicC1Tab03.ForceNewLine = TrueC1Tab05.ForceNewLine = True

C#C1Tab03.ForceNewLine = true;C1Tab05.ForceNewLine = true;

6. Run the program.


In this topic, you have added new tabs to a C1TabStrip and used the ForceNewLine property to create multiple rows on your tabstrip. Your final result will resemble the following image:

48

Creating a Tab HierarchyA C1Tab can contain child tabs, allowing the C1TabStrip to reflect a hierarchical structure. The following instructions will show you how to add child tabs to a C1TabStrip using the smart tag, HTML, and both Visual Basic and C# code. For information on creating a tab hierarchy through databinding, see Binding a C1TabStrip to an Access Data Source (page 37), Binding a C1TabStrip to a SiteMap Data Source (page 41), and Binding a C1TabStrip to a XML Data Source (page 43).

Creating a Tab Hierarchy in Design View

To create a tab hierarchy, complete the following steps:

1. Click C1TabStrip''s smart tag ( ) to open the C1TabStrip Tasks menu and then select TabStrip Designer.

The C1TabStrip Designer Form appears.

2. In treeview, right-click C1TabStrip1 and select Add Child | Tab from the menu.

3. Locate the Text property for Tab1 and type "Pennsylvania" into its text box.

4. Select Pennsylvania, then click the Add Child Item button three times. Observe that three new tabs have been added underneath the Pennsylvania tab:

5. Change the Text properties of Tab1, Tab2, and Tab3 to the following:

Tab1 – "Erie"

Tab2 – "Philadelphia"

Tab3 – "Pittsburgh"

6. In treeview, select Pittsburgh and then use the Add Child Item button to add three tabs. Rename the tabs as follows:

Tab1 – "East Liberty"

Tab2 – "Lawrenceville"

Tab3 – "Shadyside"

7. Click OK and run the program.

Creating a Tab Hierarchy in Source ViewTo add a hierarchy of tabs in Source view, add the following HTML between the <cc1:C1TabStrip> tags:

<Tabs>

49

<cc1:C1Tab runat="server" Text="Pennsylvania"> <Tabs> <cc1:C1Tab runat="server" Text="Erie" ID="Erie" > </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Philadelphia" ID="Philly" > </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Pittsburgh" ID="Pittsburgh" > <Tabs> <cc1:C1Tab runat="server" Text="East Liberty" ID="Sliberty"> </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Lawrenceville" ID="Lville"> </cc1:C1Tab> <cc1:C1Tab runat="server" Text="Shadyside" ID="Shady"> </cc1:C1Tab> </Tabs>

</cc1:C1Tab> </Tabs> </cc1:C1Tab> </Tabs>

Creating a Tab Hierarchy in Code

To create a tab hierarchy, complete the following steps:



3. Add a reference to Web.UI.Controls.2.dll to your project.

4. In the Solution Explorer window, right click on Default.aspx and select View Code to access the code editor.

5. Import the following namespace into your program:



6. Create a parent tab and add it to the C1TabStrip control:

Visual Basic'Create the parent tabDim TabPA As New C1Tab("Pennsylvania") 'Add the parent tab to C1TabStrip C1TabStrip1.Tabs.Add(TabPA)

C#//Create the parent tabC1Tab TabPA = new C1Tab("Pennsylvania");C1TabStrip1.Tabs.Add(TabPA);

7. Create three child tabs and add them to the Pennsylvania tab:

Visual Basic'Create three child tabs Dim CityErie As New C1Tab("Erie") Dim CityPittsburgh As New C1Tab("Pittsburgh") Dim CityPhiladelphia As New C1Tab("Philadelphia") 'Add all three child tabs to their parent tab TabPA.Tabs.Add(CityErie)

50

TabPA.Tabs.Add(CityPittsburgh) TabPA.Tabs.Add(CityPhiladelphia)C#//Create three child tabsC1Tab CityErie = new C1Tab("Erie");C1Tab CityPittsburgh = new C1Tab("Pittsburgh");C1Tab CityPhiladelphia = new C1Tab("Philadelphia");//Add all three child tabs to their parent tabTabPA.Tabs.Add(CityErie);TabPA.Tabs.Add(CityPittsburgh);TabPA.Tabs.Add(CityPhiladelphia);

8. Create three child tabs and place them beneath the Pittsburgh tab:

Visual Basic'Create three child tabs Dim Sliberty As New C1Tab("East Liberty") Dim Lawrenceville As New C1Tab("Lawrenceville") Dim Shadyside As New C1Tab("Shadyside") 'Add all three child tabs to their parent tab CityPittsburgh.Tabs.Add(Sliberty) CityPittsburgh.Tabs.Add(Lawrenceville) CityPittsburgh.Tabs.Add(Shadyside)C#//Create three child tabsC1Tab Sliberty = new C1Tab("Lawrenceville");C1Tab Lawrenceville = new C1Tab("Pittsburgh");C1Tab Shadyside = new C1Tab("Shadyside");//Add all three child tabs to their parent tabCityPittsburgh.Tabs.Add(Sliberty);CityPittsburgh.Tabs.Add(Lawrenceville);CityPittsburgh.Tabs.Add(Shadyside);

9. Run the program.


By completing the steps in this topic, you have created a tabstrip with three hierarchical levels. Now that you've completed this topic, run the program and click on the Pennsylvania tab to reveal its three child tabs, Erie, Philadelphia, and Pittsburgh. Now click on the Pittsburgh tab and observe that it also has three child tabs, which are named East Liberty, Lawrenceville, and Shadyside.

Your result will resemble the following image:

Customizing the Appearance of a C1TabStripThe appearance of a C1TabStrip control can be customized to fit your personal preferences or suit your company's needs. In just a few minutes, you can change the tabstrip's direction, alter its visual scheme, create multiple tab rows, and set the alignment of tabs. The following topics explain how to customize the C1TabStrip control in the aforementioned ways.

51

Adding Custom Visual Styles

You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1TabStrip control. This topic assumes that you have created a C1TabStrip object with at least two tabs.

For more information on custom visual styles, see Custom Visual Styles (page 30).

Adding Custom Visual Styles in Design View

To add a custom visual style, complete the following steps:

1. In order to add a custom visual style to your project, you must first create new folders and add your .css file to the project. To do this, follow these steps:

a. In the Solution Explorer window, right-click on your project to open its context menu and select New Folder. Name the new folder "VisualStyles".

b. Add a new folder within the VisualStyles folder and name it "CustomStyle".c. Add another folder,"C1TabStrip", under the CustomStyle folder that you made in the last step. Your

folder hierarchy should match the following image:

d. Right-click the C1TabStrip folder and select Add Existing Item to add your custom .css file to the project folder. Name the .css file "styles.css".The styles.css file is added to your project.

2. In Solution Explorer, double-click styles.css to open the style sheet and replace the existing CSS body style with the following CSS styles:

CSS Styles/* =========== CustomStyle C1TabStrip =========================================== */.C1TabStrip_CustomStyle .C1List{

margin:0;padding:0;display:block;

}.C1TabStrip_CustomStyle_C1Top .C1List,.C1TabStrip_CustomStyle_C1Bottom .C1List{

float:left;}.C1TabStrip_CustomStyle_C1Left .C1List,.C1TabStrip_CustomStyle_C1Right .C1List{

width:100px;}.C1TabStrip_CustomStyle .C1ListItem .C1Link{

color:#ffffff;

52

text-decoration:none;font-family:Comic Sans MS;font-size:small;font-weight:bolder;background-color:#000000;margin:-1;padding:.6em;cursor:pointer;

}.C1TabStrip_CustomStyle_C1Top .C1ListItem {

border-top:solid 2px #696969;border-right:solid 2px #696969;

}.C1TabStrip_CustomStyle_C1Bottom .C1ListItem {

border-bottom:solid 2px #696969;border-right:solid 2px #696969;

}.C1TabStrip_CustomStyle_C1Left .C1ListItem,.C1TabStrip_CustomStyle_C1Right .C1ListItem{

border-top:solid 2px #696969;border-left:solid 2px #696969;

}

.C1TabStrip_CustomStyle_C1Top .C1ListItem .C1Link,

.C1TabStrip_CustomStyle_C1Bottom .C1ListItem .C1Link,

.C1TabStrip_CustomStyle_C1Left .C1ListItem .C1Link,

.C1TabStrip_CustomStyle_C1Right .C1ListItem .C1Link{

border: inset 1px #ffffff;}

.C1TabStrip_CustomStyle .C1ListItem .C1Link:hover{

background-color:Red;}.C1TabStrip_CustomStyle .C1ListItem .C1Selected{

background-color:White;color:Black;

}.C1TabStrip_CustomStyle_C1Top .C1FirstItem .C1Link,.C1TabStrip_CustomStyle_C1Bottom .C1FirstItem .C1Link{

border-left:solid 2px #999;}.C1TabStrip_CustomStyle_C1Left .C1LastItem .C1Link,.C1TabStrip_CustomStyle_C1Right .C1LastItem .C1Link{

border-bottom:solid 2px #999;}.C1TabStrip_CustomStyle_C1Top .C1Inner,.C1TabStrip_CustomStyle_C1Bottom .C1Inner{

display:block;

53

text-align:center;}.C1TabStrip_CustomStyle_C1Left .C1Inner,.C1TabStrip_CustomStyle_C1Right .C1Inner{

display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

}

3. Click C1TabStrip's smart tag and select TabStrip Designer from the tasks menu.

The C1TabStrip Designer Form opens.

4. In treeview, select C1TabControl1 to reveal its list of properties and then complete the following:

Set the UseEmbeddedVisualStyles property to False.

Set the VisualStylePath property to "~/VisualStyles".

Set the VisualStyle property to CustomStyle (external).

Note: If CustomStyle(external) does not appear in the drop-down list, run the project and then repeat step 4.

5. Click OK to close the C1TabStrip Designer Form. Observe that the C1TabStrip has adopted your custom visual style.

Adding Custom Visual Styles in Source View:

To add a custom visual style, follow these steps:

1. Complete steps 1 and 2 under "Adding Custom Styles in Design View".

2. Enter Source view and enter VisualStyle="CustomStyle",VisualStylePath="~/VisualStyles", and UseEmbeddedVisualStyles="False" into the <cc1:C1TabStrip> tag. Your HTML will resemble the following:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles" UseEmbeddedVisualStyles="False">

3. Run the project and observe that the C1TabStrip has adopted your custom visual style.

Adding Custom Visual Styles in Code

To add a custom visual style, follow these steps:

1. Complete steps 1 and 2 under "Adding Custom Styles in Design View".

2. Double-click the Web project to place a Page_Load event in the code editor.

3. Set the UseEmbeddedVisualStyles to False by adding the following code to the Page_Load event:

Visual BasicC1TabStrip1.UseEmbeddedVisualStyles = False

C#C1TabStrip1.UseEmbeddedVisualStyles = false;

4. Change the VisualStylePath property:

54

Visual BasicC1TabStrip1.VisualStylePath = "~/VisualStyles"

C#C1TabStrip1.VisualStylePath = "~/VisualStyles";

5. Select the custom visual style:

Visual BasicC1TabStrip1.VisualStyle = "CustomStyle"

C#C1TabStrip1.VisualStyle = "CustomStyle";

6. Run the project and observe that the C1TabStrip has adopted your custom visual style.

This topic illustrates the following:

In this topic, you learned how to create a custom visual style. When you run the project, note that the tabs have images for three different states: normal, selected, and hover. The result of this topic will resemble the following image:

Changing the Direction of a C1TabStrip

By default, the direction of a C1TabStrip control is horizontal (top), but you can easily change the direction of a C1TabStrip control to right, left, or bottom by setting the Direction property. The following instructions will explain how to change the orientation of your tabstrip in Design view, in Source view, and in code.

Changing the Orientation of a C1TabStrip in Design View

To change the direction of a C1TabStrip, complete the following steps:

1. Click C1TabStrip's smart tag ( ) to open the C1TabStrip Tasks menu and then select TabStrip Designer.The C1TabStrip Designer Form appears.

2. Select C1TabStrip from the treeview to reveal its list of properties.

3. Locate the Direction property and select an item from its drop-down list. For this example, we are going to choose Left.

4. Click OK and observe that the C1TabStrip is now vertical and appears at the left.

Changing the Orientation of a C1TabStrip in Source View

In Source view, add Orientation="Vertical" to the <cc1:C1TabStrip> tag so that your HTMLresembles the following:

55

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" Direction="Left" OverlapOrder="Ascending" VisualStyle="Vista" VisualStylePath="~/C1WebControls/VisualStyles" Width="150px">

Changing the Orientation of a C1TabStrip in Code

To change the direction of the C1TabStrip control, complete the following steps:


Visual BasicImports C1.Web.UI.Controls

C#using C1.Web.UI.Controls;

2. Add the following code to the Page_Load event:

Visual BasicC1TabStrip1.Direction = TabDirection.Left

C#C1TabStrip1.Direction = TabDirection.Left;

3. Run the program.


A C1TabStrip control can be switched to a vertical orientation by setting the Direction property to Left. The following image depicts a C1TabStrip control with a Left orientation:

Changing C1TabStrip's Visual Style

The C1TabStrip control features five embedded visual styles that you can apply to your tabstrip with just a few clicks. This topic illustrates how to change your visual scheme in Source view, Design view, and in code.

Changing the Visual Style in Design View:

To change the visual scheme of the C1TabStrip control, follow these steps:

1. Click C1TabStrip''s smart tag to open the C1TabStrip Tasks.

2. Click the VisualStyles drop-down arrow and select a visual style from the list. For this example, choose Office2007Blue.

The C1TabStrip adopts the Office2007Blue visual style.

Changing the Visual Style in Source View

To change the visual scheme of your C1TabStrip in Source view, add VisualStyle="Office2007Blue" to the <cc1:C1TabStrip> tag so that it resembles the following:

56

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles">

Changing the Visual Style Programmatically

To change the visual scheme, follow these steps:





Visual BasicC1TabStrip1.VisualStyle = "Office2007Blue"

C#C1TabStrip1.VisualStyle = "Office2007Blue";

3. Run the program.


The following image shows a C1TabStrip control with the Office2007Blue visual scheme:

Setting the Alignment of a Horizontal C1TabStrip

A horizontal C1TabStrip control can be aligned in four positions: left, right, center, and justified. This topic illustrates how to set the alignment of horizontal tabstrip in Design view, Source view, and in code.

Setting the Alignment of a Horizontal C1TabStrip In Design View

Follow these instructions to set the alignment of your tabstrip:



2. In treeview, select C1TabStrip1 to reveal its list of properties.

3. Locate the Alignment property, click its drop-down arrow, and select an option from the list. For this example, select Center.

4. Press OK and observe that the alignment of your tabstrip is now set to your specification.

Setting the Alignment of a Horizontal C1TabStrip in Source View

To change the alignment of the C1TabStrip control in Source view, add Alignment="Center" to the<cc1:C1TabStrip> tag. The following HTML aligns C1TabStrip control on the center of the page:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" Alignment="Center" Width="553px">

Setting the Alignment of a Horizontal C1TabStrip in Code

To set the alignment of a C1TabStrip control, complete the following steps:

57





Visual BasicC1TabStrip1.Alignment = TabAlignment.Center

C#C1TabStrip1.Alignment = TabAlignment.Center;

3. Run the program.

Setting the Alignment of a Vertical C1TabStrip

A vertical C1TabStrip control can be aligned in four positions: top, bottom, middle, and justified. This topic illustrates how to set the alignment of a vertical tabstrip in Design view, in Source view, and in code.

Setting the Alignment of a Vertical C1TabStrip in Design ViewFollow these instructions to set the alignment of a tabstrip:



2. Use the Add Child Item button to add two tabs to your C1TabStrip.


4. Locate the Direction property and set it to Left.

5. Navigate to the Height property and enter "350px" into its text box.

6. Locate the Alignment property, click its drop-down arrow, and select one of the following options from the list:

Alignment Description

Left Tabs will be positioned at the top of the tabstrip.

Right Tabs will be positioned at the bottom of the tabstrip.

Center Tabs will be positioned in the middle of the tabstrip.

Justify Tabs will be proportionately resized to fill up the height of the tabstrip.

7. Press OK and observe that the alignment of your tabstrip is now set to your specification.

Setting the Alignment of a Vertical C1TabStrip in Source View

To change the alignment of your vertical C1TabStrip in Source view, add Alignment="Center" to the

<cc1:C1TabStrip> tag. The following HTML aligns C1TabStrip on the center of the page:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" Direction="Vertical" Alignment="Center">

Setting the Alignment of a Vertical C1TabStrip in Code

To set the alignment of a vertical C1TabStrip to Center, add the following code to the Page_Load event:

58





Visual BasicC1TabStrip1.Alignment = TabAlignment.Center

C#C1TabStrip1.Alignment = TabAlignment.Center;

3. Run the program.

Setting C1TabStrip BehaviorsThe C1TabStrip control has a list of properties that affect how the control behaves at run time. Some of the properties affect how the control acts when loaded, whereas others affect the users' interactions with the control. The following topics will instruct you on how to modify the run-time actions of the control.

Changing the Selected IndexThe SelectedIndex property of a C1TabStrip control can be used to determine which tab will be selected when your project is run. The following topic shows you how to set this property in Design view, Source view, and in code.

Note: If you change the SelectedIndex property on a C1TabStrip and have it bound to a C1MultiPage, you will also have to manipulate C1MultiPage's SelectedIndex property in order to get your tab to load with the correct page view.

Changing the Selected Index in Design View

To change the SelectedIndex, use the following steps:



2. Use the Add Child Item button to add three tabs to the C1TabStrip control.

3. Select C1TabStrip from the treeview to reveal its list of properties.

4. Locate the SelectedIndex property and set its value to "1". Since a C1TabStrip control uses a zero-based index, the project will load with the second tab selected.

5. Press OK and run the program. Observe that the second tab, C1Tab2, has focus at run-time.

Changing the Selected Index in Source View

Add SelectedIndex="1" to the <cc1:C1TabStrip> tag. The resulting HTML should resemble the following:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" Height="29px" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" SelectedIndex="1">

Changing the Selected Index Programmatically

To change the selected index, add the following code to your Page_Load event:

59

Visual BasicMe.C1TabStrip1.SelectedIndex = 1

C#this.C1TabStrip1.SelectedIndex = 1;

Displaying ToolTips for Tabs

This topic demonstrates how to create custom ToolTips for the tabs on the C1TabStrip control. After setting the ToolTip property, users will see brief instructions regarding the tab when they hover over the tab with their cursor.

Adding a ToolTip In Design View

To add a ToolTip to your tabs, follow these steps:



2. Use the Add Child Item button to add a tab to the C1TabStrip control.

3. In treeview, select Tab1 to reveal its list of properties.

4. Locate the ToolTip property and type "Click this tab for more information." into its text box.

5. Press OK to close the C1TabStripDesigner Form and then run the project.

Adding a ToolTip through Source ViewTo add a hierarchy of tabs in Source view, add ToolTip="Click this tab for more information" to the <cc1:C1Tab> tags. Your HTML will resemble the following:

<cc1:C1Tab ID="Tab1" runat="server" Text="Tab1" ToolTip="Click this tab for more information.">

Adding a ToolTip in Code

To add a ToolTip to your tabs, follow these steps:




2. Add the following code to your Page_Load event:

Visual BasicTab1.ToolTip = "Click this tab for more information."

C#Tab1.ToolTip = "Click this tab for more information.";

3. Run the program.

60


Using the ToolTip property, you can easily create custom ToolTips that will appear when users hover over tabs. The image below illustrates a tab with a ToolTip:

Enabling Scrolling on a C1TabStrip

If you have more tabs on your C1TabStrip control than you would like to show at one time, you can enable tab scrolling. This topic illustrates how to enable scrolling on a horizontal C1TabStrip control by setting the ScrollMode and ScrollButtonAlign properties.

For more information on tabstrip scrolling, see Tabstrip Scrolling (page 32).

Enabling Scrolling on a Horizontal C1TabStrip in Design View

To enable vertical scrolling on a C1TabStrip control, complete the following steps:



2. Use the Add Child Item button to add five tabs to your C1TabStrip.

3. In the treeview, select C1TabStrip1 to reveal its list of properties.

4. Locate the Width property and type "150px" into its text box.

If you were to run the program now, the last two tabs in the series, C1Tab4 and C1Tab5, would appear in a second row beneath tabs C1Tab1,C1Tab2,and C1Tab3.

5. With C1TabStrip still selected, expand the node next to ScrollSettings to reveal a list of its properties. Set the following:

Click the drop-down arrow next to ScrollMode and select a mode. You can choose from the following three options:

Mode Description

Buttons Scrolling is performed by clicking the scroll button.

ButtonsHover Scrolling is performed by clicking or hovering over the scroll button.

Hover Scrolling is performed by hovering close to the start side or end side regions.

Click the drop-down arrow next to ScrollButtonAlign and select an alignment. You can choose from the following three options:

Option Description

TwoSides The buttons are aligned at the separate sides.

StartSide Both of the buttons are aligned to the start side.

EndSide Both of the buttons are aligned to the end side.

6. Press OK and run the program. Observe that you can click the buttons to scroll through the tabstrip.

61

Enabling Scrolling on a Horizontal C1TabStrip in Source View

To enable horizontal scrolling, complete the following steps:



2. Use the Add Child Item button to add five tabs to your C1TabStrip control.

3. Click OK to close the C1TabStrip Designer Form.

4. Click the Source tab to enter Source view and add the following property settings to the <cc1:C1TabStrip> tag:

Width="150px"

ScrollMode="Buttons"

ScrollButtonAlign="TwoSides"

After you've set the properties, your tag should resemble the following:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/VisualStyles" Width="150px" ScrollMode="Buttons" ScrollButtonAlign="TwoSides">

5. Run the project and observe that there are now two translucent buttons on your tabstrip. Click those buttons to scroll through your tabstrip.

Enabling Scrolling on a Horizontal C1TabStrip in Code

To enable horizontal scrolling, complete the following steps:



2. Use the Add Child Item button to add five tabs to your C1TabStrip.


4. In the Solution Explorer window, right click on Default.aspx and select View Code to access the code editor.




6. Add the following code to the Page_Load event to set the Width property to 150px:

Visual BasicC1TabStrip1.Width = 150

C#C1TabStrip1.Width = 150;

7. Set the ScrollMode property to Buttons:

62

Visual BasicC1TabStrip1.ScrollSettings.ScrollMode = ScrollMode.Buttons

C#C1TabStrip1.ScrollSettings.ScrollMode = ScrollMode.Buttons;

8. Set the ScrollButtonAlign property to TwoSides:

Visual BasicC1TabStrip1.ScrollSettings.ScrollButtonAlign = ScrollButtonAlign.TwoSides

C#C1TabStrip1.ScrollSettings.ScrollButtonAlign = ScrollButtonAlign.TwoSides;

9. Run the program and observe that there are two translucent buttons on your tabstrip. Click those buttons to scroll through your tabstrip.

Setting C1TabStrip's Automatic Postback

Using the AutoPostBack property, you can choose whether or not the C1TabStrip control will automatically post back to the server between tab clicks. By default, the AutoPostBack property is set to False, meaning that the C1MultiPage control does not automatically post back to the server. However, you can easily set up theC1TabStrip control to post back to the server by setting this property to True.

Setting AutoPostBack in Design View

To set AutoPostBack, complete the following steps:




3. Locate AutoPostBack and set it to True.

4. Press OK to close the C1TabStrip Designer Form.

Setting AutoPostBack in Source View

In Source view add AutoPostBack="True" to the <cc1:C1TabStrip> tag so it appears similar to the following:

<cc1:C1TabStrip ID="C1TabStrip1" runat="server" AutoPostBack="True">

Setting AutoPostBack in CodeTo set AutoPostBack, add the following code to the Page_Load event:

Visual BasicC1TabStrip1.AutoPostBack = True

C#C1TabStrip1.AutoPostBack = true;

Validating Information Before a Tab Switch

TabStrip for ASP.NET AJAX allows you to perform validation checks before tab switches take place. To illustrate this feature, we'll set up a C1TabStrip control so that a tab switch cannot be performed without text being entered into a standard TextBox control.

Complete these instructions:

1. Click C1TabStrip's smart tag ( ) to open the C1TabStrip Tasks menu and then select TabStrip Designer.

63


2. Use the Add Child Item button to add two tabs to your C1TabStrip.

3. With C1TabStrip1 selected in treeview, set the following properties:

Set the CausesValidation property to True.

Set the ValidationGroup property to "PasswordValidation".


5. Add a standard TextBox control to your project and set its ID property to "PasswordBox".

6. Add a RequiredFieldValidator control to the form, placing it beneath the TextBox control that you added in the last step. Set its properties as follows:

Set the ControlToValidate property to PasswordBox.

Set the ValidationGroup property to "PasswordValidation".

Set the Text property to " You must enter text before proceeding".

7. Run the project.

This Topic Illustrates the Following:Once the project is built, click on Tab02 without typing anything into the text box. The result will resemble the following image:

Now enter text into the text box and click Tab02 again. Observe that Tab02 comes into focus without throwing an error.

Using a C1TabStrip for NavigationThe following topics will teach you how to use a C1TabStrip control as a navigational tool. Using a C1TabStrip for Website Navigation

This topic illustrates how simple it is to use a C1TabStrip as a navigational tool for your ASP.NET AJAX-Enabled Website projects.

Step 1: Create a Master Page and Add a C1TabStrip to the Page

64

Complete the following steps:

1. In the Solution Explorer window, right-click on your project and select Add New Item from the menu.

The Add New Item dialog box appears.

2. Choose Master Page from the list of installed templates and then click Add to close the Add New Itemdialog box.

3. Select a Script Manager control from the toolbox and add it to the MasterPage.master page.

4. From the toolbar, select Layout | Insert Table to open the Insert Table dialog box.

5. In the Insert Table dialog box, click the Template radio button and then select Header from the drop-down list.

6. Press OK to close the Insert Table dialog box.

A table with two rows - a header row and a content row - is added to your Web page.

7. Drag the ContentPlaceHolder into the content row of your new table.

8. Place your cursor in the header of the table and, in the Toolbox window, double-click C1TabStrip.

A C1TabStrip control appears in the header of your table.

Step 2: Create Content Pages and Add Controls


1. In Source view, Right-click on Masterpage.master and select Add Content Page. Repeat this step to add another page.

65

2. You will need three pages to complete this task, but one of those pages, Default.aspx, was added by default when you created your Web page; you will have to set it up to call from the master page. To set Default.aspx to draw content from the master page template, switch to Source view and replace the default markup with the following:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="First Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content>

3. In Design view, place the following controls into the ContentPlaceHolders of each page:

Default.aspx – Calendar control

Default1.aspx – Button control

Default2.aspx – TextBox control

Step 3: Bind C1TabStrip's Tabs to the Content Pages


1. Select MasterPage.master and switch to its Design view.

2. Click C1TabStrip's smart tag ( ) to open the C1TabStrip Tasks menu and select TabStrip Designer.


3. In treeview, select Tab1 to reveal a list of its property and then set its NavigateUrl property to "Default.aspx".

66

4. Set the NavigateUrl property of the next two tabs as follows:

C1Tab2 – "Default2.aspx"

C1Tab3 – "Default3.aspx"


Step 4: Add Code to the Project to Select the Correct Tab Between Page Views

You can run the project after completing the first three steps and still use the C1TabStrip for navigation; however, the C1TabStrip will not retain its state between page views and the correct tab won't be selected. To solve this problem, you can use the FindTabByNavigateUrl method in combination with the Selected property to select the proper tab.

To add the aforementioned solution to your project, add the following code to the Page_Load event of MasterPage.master:

Visual BasicDim tab As C1.Web.UI.Controls.C1TabStrip.C1Tab = Me.C1TabStrip1.FindTabByNavigateUrl(Me.Request.RawUrl)

If tab IsNot Nothing Then tab.Selected = True End If

C#C1.Web.UI.Controls.C1TabStrip.C1Tab tab = this.C1TabStrip1.FindTabByNavigateUrl(this.Request.RawUrl);

if (tab != null)

tab.Selected = true;

Step 5: Run the project

Press F5 to run the project and observe that you can use C1TabStrip to navigate through your Website. Also note that the proper tab is selected between page views and upon refresh.

Using a C1TabStrip for C1MultiPage Navigation

You can can associate the tabs with content by binding the C1TabStrip control to a C1MultiPage control. This topic illustrates how to use a C1TabStrip control with a C1MultiPage control.

67

Step 1: Add a C1MultiPage Control and Create Pages


1. Add a C1MultiPage control to your project.

2. Click C1MultiPage's smart tag ( ) and select MultiPage Designer from the menu.The C1MultiPage Designer Form opens.

3. Use the Add Child Item button to add three pages to your C1MultiPage. Note that the new pages are named as follows:

C1PageView1

C1PageView2

C1PageView3

4. Click OK to leave the C1MultiPage Designer Form.

Step 2: Add a C1TabStrip Control and Create Tabs



2. Click C1TabStrip''s smart tag ( ) and select TabStrip Designer from the menu.The C1TabStrip Designer Form opens.

3. Use the Add Child Item button to add three tabs to the C1TabStrip control. Note that the new tabs are named as follows:

Tab1

Tab2

Tab3

Step 3: Bind the C1TabStrip Control to the C1MultiPage Control


1. While in the C1TabStrip Designer Form, select C1TabStrip1 in treeview to reveal its list of properties.

2. Locate the MultiPageID property and select C1MultiPage1 from its drop-down list.

3. Select Tab01 from the treeview, locate the PageViewID property, and enter "C1PageView1" into its text box.

68

4. Repeat the previous step for Tab02 and Tab03, only this time you will enter the following information into their text boxes.

Tab2 – "C1PageView2"

Tab3 – "C1PageView3"

5. Press OK to leave the C1TabStrip Designer Form and then run the project.


A C1TabStrip control can be used with a C1MultiPage control just by setting a few properties. Once you've run your project, click the second tab of the C1TabStrip control and observe that the second page of the C1MultiPagecontrol comes into view. The following image illustrates a C1MultiPage control that has been bound to a C1TabStrip control: