window for asp.net ajax

ComponentOne

Window 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 Window for ASP.NET AJAX Overview .............................................................. 1

What's New in Window for ASP.NET AJAX ..........................................................................................1Installing Window for ASP.NET AJAX ...................................................................................................1C1Window for ASP.NET AJAX Setup Files ............................................................................................1System Requirements ...............................................................................................................................2Installing Demonstration Versions............................................................................................................3Uninstalling Window for ASP.NET AJAX ..............................................................................................3End-User License Agreement ...................................................................................................................3Licensing FAQs .......................................................................................................................................3What is Licensing? ...................................................................................................................................3How does Licensing Work? ......................................................................................................................3Common Scenarios ..................................................................................................................................4Troubleshooting .......................................................................................................................................6Technical Support ....................................................................................................................................7Redistributable Files .................................................................................................................................8About This Documentation ......................................................................................................................8Namespaces .............................................................................................................................................9Creating an AJAX-Enabled ASP.NET Project........................................................................................10Adding the C1Window Component to a Project .....................................................................................12

Key Features.......................................................................................................................14

Window for ASP.NET AJAX Quick Start .................................................................................17Step 1 of 4: Add C1Window to the Page.................................................................................................17Step 2 of 4: Customize the Dialog Window ............................................................................................18Step 3 of 4: Add Code and Script to the Project.......................................................................................19Step 4 of 4: Run your Application...........................................................................................................19

Window for ASP.NET AJAX Top Tips ....................................................................................23

Design-Time Support............................................................................................................25C1Window Smart Tag............................................................................................................................25C1Window Context Menu .....................................................................................................................26

Modal and Modeless Dialog Windows......................................................................................26Modal Dialog Windows .........................................................................................................................27Modeless Dialog Windows.....................................................................................................................27

C1Window Elements............................................................................................................27Content Element ....................................................................................................................................27Caption Bar Element ..............................................................................................................................28Status Bar Element .................................................................................................................................30

Window for ASP.NET AJAX Appearance ................................................................................31Visual Styles ...........................................................................................................................................31Styles......................................................................................................................................................33Content Styles ........................................................................................................................................33Caption Bar Styles ..................................................................................................................................35Status Bar Styles .....................................................................................................................................45Content and Status Bar Templates ..........................................................................................................47

Window for ASP.NET AJAX Behavior ....................................................................................48Window Positioning and Sizing..............................................................................................................48Window Position ...................................................................................................................................48

iv

Window Size..........................................................................................................................................48Window Moving ....................................................................................................................................49Window Minimizing ..............................................................................................................................49Animation..............................................................................................................................................49Animation Effects...................................................................................................................................49Animation Duration...............................................................................................................................51Partial Rendering ...................................................................................................................................51

Working with Client-Side Script .............................................................................................53Dialog Window Client-Side Methods .....................................................................................................53Dialog Window Client-Side Properties ...................................................................................................54Caption Button Client-Side Methods ......................................................................................................54Client-Side Events ..................................................................................................................................55

Window for ASP.NET AJAX Samples .....................................................................................59

Window for ASP.NET AJAX Task-Based Help..........................................................................59Customizing the Content Area ...............................................................................................................59Showing External Content in the Content Area ......................................................................................59Creating a Content Template..................................................................................................................61Adding Custom HTML Content in the Content Area .............................................................................63Using Partial Rendering .........................................................................................................................66Customizing the Caption Bar..................................................................................................................72Hiding Caption Bar Buttons ...................................................................................................................72Setting the Caption Bar Title...................................................................................................................73Setting the Caption Bar Icon...................................................................................................................74Customizing the Status Bar.....................................................................................................................75Showing the Status Bar...........................................................................................................................75Setting the Status Bar Content ................................................................................................................75Setting the Loading Image......................................................................................................................77Customizing the Dialog Window ...........................................................................................................79Showing the Dialog Window on Page Load ...........................................................................................79Adding Keyboard Support......................................................................................................................80Preventing Window Resizing .................................................................................................................80Preventing Window Repositioning .........................................................................................................81Setting the Window Location .................................................................................................................82Setting the Height and Width .................................................................................................................83Using the MinimizeZoneElementID Property ........................................................................................85Programming Tasks................................................................................................................................87Creating a Modeless Dialog Window in Code ........................................................................................87Creating a Modal Dialog Window in Code.............................................................................................89Setting the ChildrenAsTriggers Property.................................................................................................91Client-Side Tasks....................................................................................................................................93Setting the ContentURL Property at Run Time ......................................................................................93Adding a New Title to the Caption Bar at Run Time ..............................................................................94Calling the Show and Hide Methods at Run Time ..................................................................................96Resizing the Dialog Window at Run Time .............................................................................................97Setting the Dialog Window Location at Run Time .................................................................................98

1

ComponentOne Window for ASP.NET AJAX Overview

ComponentOne Window for ASP.NET AJAX allows you to think outside the traditional dialog box and create robust, AJAX-enabled, interactive, completely customizable dialog windows. The C1Window control can be used to create flexible and robust modal and modeless dialog windows on the client or server-side to display information, external content, and through the use of input controls such as ComponentOne Input for ASP.NET AJAX™, receive input from the user.

With a rich client-side object model, several Visual Styles, and content template support you can easily adaptC1Window to meet your users' needs. Develop interactive Web applications that are as much experience as application with Window for ASP.NET AJAX AJAX's polished, full-featured, AJAX-powered dialog windows.

Getting Started

Get started with the following topics:

- Key Features (page 14)

- Quick Start (page 17)

- Control Elements(page 27)

- Samples (page 59)

What's New in Window for ASP.NET AJAXThere were no new features added to ComponentOne Window for ASP.NET AJAX in the 2010 v1 release.

Tip: A version history containing a list of new features, improvements, fixes, and changes for each product is available on HelpCentral at http://helpcentral.componentone.com/VersionHistory.aspx.

Installing Window for ASP.NET AJAXThis section describes the setup files and system requirements for Window for ASP.NET AJAX. It also explains how to install demonstration versions of ComponentOne products and uninstall Window for ASP.NET AJAX.

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

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

2

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

C1WebUi\VisualStyles Contains all external file themes.

Samples

Samples for the product are installed in the ComponentOne Samples folder by default. The path of the ComponentOne Samples directory is slightly different on Windows XP and Windows 7/Vista machines:

Windows XP path: C:\Documents and Settings\<username>\My Documents\ComponentOne Samples

Windows 7/Vista path: C:\Users\<username>\Documents\ComponentOne Samples

The ComponentOne Samples folder contains the following subdirectories:

Common Contains support and data files that are used by many of the demo programs.

C1WebUi Contains samples and tutorials for Window for ASP.NET AJAX.

System Requirements

System requirements 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

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

Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN.

http://ajax.asp.net/downloads/

http://ajax.asp.net/

http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx

3

Installing Demonstration Versions

If you wish to try Window for ASP.NET AJAX and do not have a registration serial number, follow the steps through the installation wizard and use the default serial number.

The only difference between unregistered (demonstration) and registered (purchased) versions of our products is that registered versions will stamp every application you compile so a ComponentOne banner will not appear when your users run the applications.

Uninstalling Window for ASP.NET AJAX

To uninstall Window for ASP.NET AJAX:

1. Open Control Panel and select Add or Remove Programs or Programs and Features (Windows 7/Vista).

2. Select ComponentOne Studio for ASP.NET AJAX and click the Remove button.

3. Click Yes to remove the program.

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

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

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

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

4

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.

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

5

Inheriting from licensed components

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

Add a LicenseProvider attribute to the component.

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

Add an instance of the base component to the form.

This will embed the licensing information into the licenses.licx file as in the previous scenario, and the base component will find it and use it. As before, the extra instance can be deleted after the licenses.licx file has been created.

Please note, that C1 licensing will not accept a run-time license for a derived control if the run-time license is embedded in the same assembly as the derived class definition, and the assembly is a DLL. This restriction is necessary to prevent a derived control class assembly from being used in other applications without a design-time license. If you create such an assembly, you will need to take one of the actions previously described create a component at run time.

Using licensed components in console applications

When building console applications, there are no forms to add components to, and therefore Visual Studio won't create a licenses.licx file.

In these cases, create a temporary Windows Forms application and add all the desired licensed components to a form. Then close the Windows Forms application and copy the licenses.licx file into the console application project.

Make sure the licenses.licx file is configured as an embedded resource. To do this, right-click the licenses.licx file in the Solution Explorer window and select Properties. In the Properties window, set the Build Actionproperty 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

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

Using licensed components with automated testing products

Automated testing products that load assemblies dynamically may cause them to display license dialog boxes. This is the expected behavior since the test application typically does not contain the necessary licensing information, and there is no easy way to add it.

This can be avoided by adding the string "C1CheckForDesignLicenseAtRuntime" to the AssemblyConfiguration attribute of the assembly that contains or derives from ComponentOne controls. This attribute value directs the ComponentOne controls to use design-time licenses at run time.

For example:#if AUTOMATED_TESTING

[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime")]#endif

public class MyDerivedControl : C1LicensedControl{

// ...}

Note that the AssemblyConfiguration string may contain additional text before or after the given string, so the AssemblyConfiguration attribute can be used for other purposes as well. For example:

[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime,BetaVersion")]

THIS METHOD SHOULD ONLY BE USED UNDER THE SCENARIO DESCRIBED. It requires a design-time license to be installed on the testing machine. Distributing or installing the license on other computers is a violation of the EULA.

Troubleshooting

We try very hard to make the licensing mechanism as unobtrusive as possible, but problems may occur for a number of reasons.

Below is a description of the most common problems and their solutions.

I have a licensed version of a ComponentOne product but I still get the splash screen when I run my project.

If this happens, there may be a problem with the licenses.licx file in the project. It either doesn't exist, contains wrong information, or is not configured correctly.

First, try a full rebuild (Rebuild All from the Visual Studio Build menu). This will usually rebuild the correct licensing resources.

If that fails follow these steps:

1. Open the project and go to the Solution Explorer window.

2. Click the Show All Files button on the top of the window.

3. Find the licenses.licx file and open it. If prompted, continue to open the file.

4. Change the version number of each component to the appropriate value. If the component does not appear in the file, obtain the appropriate data from another licenses.licx file or follow the alternate procedure following.

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

6. Rebuild the project using the Rebuild All option (not just Rebuild).

Alternatively, follow these steps:


7

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 2.x applications, follow these steps:


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

3. Select the Build Runtime Licenses from its context menu (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 2.x applications, be sure that the App_Licenses.dll assembly created during development of the application is deployed to the bin application bin directory on the Web server.

If your ASP.NET application uses WinForms user controls with constituent licensed controls, the runtime license is embedded in the WinForms user control assembly. In this case, you must be sure to rebuild and update the user control whenever the licensed embedded controls are updated.

I downloaded a new build of a component that I have purchased, and now I'm getting the splash screen when I build my projects.

Make sure that the serial number is still valid. If you licensed the component over a year ago, your subscription may have expired. In this case, you have two options:

Option 1 – Renew your subscription to get a new serial number.

If you choose this option, you will receive a new serial number that you can use to license the new components (from the installation utility or directly from the About Box).

The new subscription will entitle you to a full year of upgrades and to download the latest maintenance builds directly from http://prerelease.componentone.com/.

Option 2 – Continue to use the components you have.

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

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

http://prerelease.componentone.com/

http://www.componentone.com/Support

8

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'll immediately receive a response via e-mail confirming that you've successfully created an incident. This email will provide you with an Issue Reference ID and will provide you with a set of possible answers to your question from our Knowledgebase. You will receive a response from one of the ComponentOne staff members via e-mail in 2 business days or less.

Peer-to-Peer Product Forums and 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 atHelpCentral. 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

C1.Web.UI.Controls.3.dll

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

About This DocumentationAcknowledgements

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://www.componentone.com/Support/

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

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

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

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




http://www.componentone.com/support



9

Microsoft Visual Studio, Visual Basic, Windows, and Windows Vista 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 U.S. 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)


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

Visual BasicDim TreeView As C1.Web.UI.Controls.C1TreeView

C#C1.Web.UI.Controls.C1TreeView TreeView;

Namespaces address a problem sometimes known as namespace pollution, in which the developer of a class library is hampered by the use of similar names in another library. These conflicts with existing components are sometimes called name collisions.

Fully qualified names are object references that are prefixed with the name of the namespace where the object is defined. You can use objects defined in other projects if you create a reference to the class (by choosing Add Reference from the Project menu) and then use the fully qualified name for the object in your code.

Fully qualified names prevent naming conflicts because the compiler can always determine which object is being used. However, the names themselves can get long and cumbersome. To get around this, you can use the Imports statement (using in C#) to define an alias — an abbreviated name you can use in place of a fully qualified name. For example, the following code snippet creates aliases for two fully qualified names, and uses these aliases to define two objects:

Visual BasicImports C1TreeView = C1.Web.UI.Controls.C1TreeViewImports MyTreeView = MyProject.Objects.C1TreeView

Dim wm1 As C1TreeViewDim wm2 As MyTreeViewMenu

C#




http://www.doctohelp.com/

10

using C1TreeView = C1.Web.UI.Controls.C1TreeView;using MyTreeView = MyProject.Objects.C1TreeView;

C1TreeView wm1;MyTreeView 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 Window 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 C1Window 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)

The following topics explain how to create both types of projects in Visual Studio 2008 and 2005.

Creating an AJAX-Enabled Web Site Project in Visual Studio 2008

To create a Web site project in Visual Studio 2008, complete the following steps:

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

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



http://msdn.microsoft.com/

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




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


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

11

2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you choose .NET Framework 2.0 or 3.0, you must install the extensions first.

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

4. Click Browse to specify a location and then click OK.

Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server.

A new AJAX-Enabled Web Site is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the 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.

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

2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you choose .NET Framework 2.0 or 3.0, you must install the extensions first.

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

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

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


A new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the 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:

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

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

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



12


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.

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

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

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

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



Adding the C1Window Component to a ProjectWhen you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio 2005\2008 Toolbox Tab checkbox is checked, by default, in the installation wizard. When you open Visual Studio, you will notice a ComponentOne Studio for ASP.NET AJAX tab containing the ComponentOne controls has automatically been added to the Toolbox.

If you decide to uncheck the Create a ComponentOne Visual Studio 2005\2008 Toolbox Tab checkbox during installation, you can manually add ComponentOne controls to the Toolbox at a later time.

To use C1Window, add the C1Window control to the form or add a reference to the C1.Web.UI.Controls.2assembly in your project.

Manually Adding C1Window to the Toolbox

When you install C1Window, the C1Window component will appear in the Visual Studio Toolbox customization dialog box.

To manually add the C1Window control to the Visual Studio Toolbox:

1. Open the Visual Studio IDE (Microsoft Development Environment). Make sure the Toolbox is visible (select Toolbox in the View menu if necessary) and right-click it to open the context menu.

2. To make the C1Window control appear on its own tab in the Toolbox, select Add Tab from the context menu and type in the tab name, C1Window, for example.

13

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.

In the dialog box, select the .NET Framework Components tab. Sort the list by Namespace (click the Namespace column header) and select the check boxes for the component belonging to the namespace C1.Web.UI.Controls. Note that there may be more than one component for each namespace.

Adding C1Window to the Form

To add C1Window to a form:

1. Add C1Window to the Visual Studio Toolbox.

2. Double-click on C1Window or drag the control onto your form.

Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN. You must create an

ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page.For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10).

Adding a Reference to the Assembly

To add a reference to the Window for ASP.NET AJAX assembly:

1. Select the Add Reference option from the Website menu of your Web Site project or from the Projectmenu of your Web Application project.

2. Select the ComponentOne Window assembly from the list on the .NET tab or browse to find the C1.Web.UL.Controls.2.dll file and click OK.

3. Double-click the form caption area to open the code window. At the top of the file, add the following Imports statements (using in C#):Imports C1.Web.UI.C1Window

Note: This makes the objects defined in the Window for ASP.NET AJAX assembly visible to the project. See Namespaces (page 9) for more information.




14

Key FeaturesThe C1Window control is a special type of dialog window that can be created on the client-side or server-side to display information and receive input from the user. You can use C1Window to create modal or modeless dialog windows by calling either the ShowModal() or Show() methods.

Dialog windows can be used to:

Prompt users for additional information when using items that require user input.

Retrieve input for an application.

Display information or options relative to the application while the user works in another window.

Note: C1Window requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN.

Feature Overview

C1Window provides several unique features including, a rich object model, Modal and Modeless Dialog windows, Partial Page Rendering, style properties, built-in themes, template support, HTML content, external content, window positioning, minimizing options, movable dialog windows, and resizable dialog windows.

Rich Object Model

C1Window has a very rich client-side object model since it is almost identical to the object model in the server-side control. This allows you to access any property or method of C1Window when you are using client-side code. For more information on Window for ASP.NET AJAX's client-side object model, see Working with Client-Side Script (page 53).

Modal and Modeless Dialog Windows

To support the different ways applications use dialog boxes, C1Window provides two different types of dialog windows: Modal and Modeless dialog windows. A modal dialog window is a child window that must be closed before the user can continue working on the current application. A modeless dialog window enables users to interact with other windows while the dialog window is present. For more information on these types of dialog windows see, Modal and Modeless Dialog Windows (page 26).

Partial-Page Rendering

C1Window supports the Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript code. PPR allows a portion of a page to be updated rather than reloading the entire page. This improves application performance and provides more direct feedback when users perform actions. For more information on this feature, see Partial Rendering (page 51).

Special Appearance Style Properties

C1Window provides unique property styles for its caption bar and content elements. For more information on this feature see Styles (page 33).

Built-in Themes

C1Window provides several built-in themes, including Vista and Office 2007 themes, that can be easily applied. For more information on this feature, see Visual Styles (page 31).





15

Template Support

You can add templates to the content area of the dialog window through the ContentTemplate property. Dynamic Templates can be used in the content area of the dialog window for achieving rich presentation of the dialog window. For more information on templates, see Content and Status Bar Templates (page 47).

Spinner when loading content

The C1Window control includes a spinner element that indicates when content is loading. You can customize this image using styles. For more information, see Setting the Loading Image (page 77).

Custom HTML as content

You can use custom HTML content in the dialog window and apply JavaScript to get an action from the user's input. For more information on how to do this see, Adding Custom HTML Content in the Content Area (page 63).

External content

You can show external content in the dialog window using the ContentUrl property. See the topic Showing External Content in the Content Area (page 59) for more information.

Window Positioning

You can specify the window's relative position or specific location. When you select manual positioning you can use the (x, y) coordinates to specify start position by x and y. For more information, see the topic Window Positioning and Sizing (page 48).

Window Pinning

16

You can specify if a dialog window is 'pinned' to the Web page and so moved when the page is scrolled. If the PinButton is Visible, end users can choose to pin and unpin the dialog window with the click of a button.

Window Expanding and Collapsing

You can specify if users can expand and collapse the dialog window. If the CollapseExpandButton is Visible, end users can choose to collapse and expand the body of the dialog window with the click of a button.

Window Animation

Window for ASP.NET AJAX provides over 20 animation effects allowing you to create a dynamic, engaging experience for your end users.

Minimize the dialog window on a task bar

You can minimize the dialog window on a task bar by enabling the MinimizeZoneElementId property. For more information on this feature, see Using the MinimizeZoneElementId property (page 85).

Moveable Dialog Windows

The dialog window can be dragged anywhere on the page by enabling the AllowMove property. For more information, see the topic Window Positioning and Sizing (page 48).

Resizable Dialog Windows

You can resize the dialog window by enabling the AllowResize property. To resize the window position your cursor in the bottom-right corner of the window and then drag it to increase or decrease the size of the window. For more information on this feature, see Window Positioning and Sizing (page 48).

CSS Styling

Window for ASP.NET AJAX includes CSS supported styling so that you can use cascading style sheets to easily style the C1Window control to match the design of your current Web site.

Browser Support

Window for ASP.NET AJAX includes support for the Internet Explorer (6.0 or later), Firefox (2 or later), and Safari Web browsers.

XHTML Compliant

Window for ASP.NET AJAX provides complete XHTML compliance. The output that is generated is fully XHTML 1.1 compliant.

17

Window for ASP.NET AJAX Quick Start

This quick start describes how to get started with Window for ASP.NET AJAX. In the quick start you'll create an ASP.NET AJAX-Enabled Web Site, add a modeless (page 27) C1Window dialog window to the page, change the appearance and behavior of the dialog window, and observe the dialog window's run-time behavior.

Step 1 of 4: Add C1Window to the PageIn this step you'll create a new ASP.NET AJAX-Enabled Web Site and add a Window for ASP.NET AJAXdialog window to your project. To begin the Quick Start, complete the following steps:

1. Begin by creating a new ASP.NET AJAX-Enabled Web Site. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). Note that as you've created an AJAX-Enabled Web site, aScriptManager control initially appears on the page.

2. While in Design view navigate to the Visual Studio Toolbox and double-click the Hyperlink andC1Window icons to add the Hyperlink and C1Window controls to your page.

The page will appear similar to the following:

3. Select Hyperlink1, navigate to the Properties window, and set the Text property of the control to "Click Me!".

Later you'll add code and script to your project so that clicking on the Hyperlink opens the C1Windowdialog window.

You've completed creating a new project and adding a C1Window dialog window to your project. In the next step you'll customize the dialog window's appearance and behavior.

18

Step 2 of 4: Customize the Dialog WindowIn this step you'll change the appearance and behavior of the dialog window you created in the last step. Complete the following steps to customize your Window for ASP.NET AJAX dialog window:

1. Select the C1Window smart tag to open the C1Window Tasks menu and select the Visual Style drop-down box to change the appearance of the dialog window.

2. Select Vista to apply the to apply the Microsoft Vista style to the C1Window dialog window.

3. Click once on the C1Window control to select it and set the following properties in the Properties window:

Set the Text property to "I just wanted to say..." to set the caption bar title.

Set the Height to 200 to increase the size of the dialog window.

Set StartPosition to Manual to manually specify where the dialog window will appear.

Set Y to 30 so the dialog window will appear below the hyperlink.

4. Click once in the Content Area (page 27) of the dialog window and type "Hello World!" to add text content to your dialog window. It should now appear similar to the following:

You've completed step 2 of the Window for ASP.NET AJAX quick start guide. In the next step you'll add code and JavaScript to your project.

19

Step 3 of 4: Add Code and Script to the ProjectIn the last steps you set up your project and a Window for ASP.NET AJAX dialog window. In this step you'll add code and JavaScript to your project to complete the project before running.

1. Switch to Source view and add the following JavaScript in just after the hyperlink tag to get and show a modeless dialog window:

<script type="text/javascript"> var form_dialog; function openWindow(dialog) { form_dialog = dialog.control; form_dialog.show(); }</script>

For more information about modal and modeless dialog windows, see Modal and Modeless Dialog Windows (page 26).

2. Return to Design view and double-click on the Web page to switch to Code view and open the Page_Loadevent.

3. Add the following code to the Page_Load event to initialize the Hyperlink control:

Visual Basic' Set the open dialog window handler.HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID)

C#// Set the open dialog window handler.HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID);

You've completed step 3 of the Window for ASP.NET AJAX quick start guide. In the next step you'll run the project.

Step 4 of 4: Run your ApplicationNow that you've customized your dialog window and added code and JavaScript to your project, the only thing left to do is to run your application and observe some of the run-time functionality of the C1Windowdialog window.

Complete the following steps:

1. Click the Click Me hyperlink.

The dialog window will appear in the Web page.

20

2. Move the dialog window on the Web page by clicking on the dialog window's header and performing a drag-and-drop operation.

3. Resize the dialog window by clicking on the dialog window's bottom right corner and performing a drag and drop operation.

4. Minimize the dialog window by clicking the dialog window's Minimize button.

21

The dialog window will minimize to the bottom of the Web page.

5. Close the dialog window by clicking the Close button.

Congratulations, you've created and customized a C1Window dialog window control and completed the Window for ASP.NET AJAX Quick Start guide!

23

Window for ASP.NET AJAX Top TipsThe following tips were compiled from frequently asked user questions posted in the ComponentOne Studio for ASP.NET AJAX’s online forum.

Tip 1: Showing and hiding he window from postback

When a postback is raised from within a C1Window, you want to hide the window immediately after handling the postback. Two UpdatePanels, namely Content and Status Panel, are embedded in C1Window. As a result, any postback raised within is an asynchronous one. So to hide the C1Window immediately after the postback you could use ScriptManager in the handler method to register some scripts after the postback is finished. For example:

C#protected void Button1_Click(object sender, EventArgs e){ // other operation … // close window after content is updatedstring clientID = C1Window1.ClientID;ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scriptKey", string.Format("$find('{0}').hide()", clientID), true);}

Tip 2: Centering the window on the page

To center a C1Window control on the page, you could set properties as in the following example:

C#protected void Page_Load(object sender, EventArgs e){ C1Window1.StartPosition = C1WindowPosition.Page; C1Window1.HorizontalAlign = HorizontalPosition.Center;

C1Window1.VerticalAlign = VerticalPosition.Middle;}

Tip 3: Embedding a external page in the window

To embed an external page in C1Window, you could set the ContentUrl property. For example:

C#protected void Page_Load(object sender, EventArgs e){ C1Window1.ContentUrl = "http://www.msn.com";}

If you already have content in the content template of C1Window you could switch between the frame and content view by using the setUpdatePanel and setUrl client-side methods. The client side reload method could be used to refresh the external page.

Tip 4: Setting the caption bar icon

You can add and customize the icon that appears in the C1Window caption bar. For example, the following code sets and the image and image size:

C#protected void Page_Load(object sender, EventArgs e){ // set icon to visible

http://forums.componentone.com/CS/forums/87.aspx

24

C1Window1.CaptionButtons.Icon.Visible = true; // set icon path C1Window1.ImageUrl = "~/Images/copy.gif"; // set icon size C1Window1.ImageHeight = 15; C1Window1.ImageWidth = 15;}

Tip 5: Setting window resizing options

The resizing behavior of C1Window can be changed by setting children properties in ResizeSettings. For example, by default C1Window resizes with a resizing proxy. You can change the behavior by setting resizing properties with the following code:

C#protected void Page_Load(object sender, EventArgs e){ // no proxy C1Window1.ResizeSettings.UseHelper = false; // set minimum height and width of C1Window C1Window1.ResizeSettings.MinHeight = 100; C1Window1.ResizeSettings.MinWidth = 300;}

Tip 6: Hiding the window on pressing ESC button

C1Window can be closed when the user presses ESC button at run time. You can implement this option by setting the OnEscPressedClose property to True:

C#protected void Page_Load(object sender, EventArgs e){ C1Window1.OnEscPressedClose = true;}

25

Design-Time SupportWindow for ASP.NET AJAX includes customized context menus, smart tags, and rich design-time support that simplify working with the object model.

The following sections describe how to use the Window for ASP.NET AJAX design-time environment, particularly the C1Window Tasks menu accessible from the C1Window smart tag (page 25) and context menu (page 26), to configure the C1Window control.

C1Window Smart TagIn Visual Studio 2005 and 2008, the C1Window control includes a smart tag. A smart tag represents a short-cut tasks menu that provides the most commonly used properties in each component/command.

To access the C1Window Tasks menu, click on the Smart Tag ( ) in the upper right corner of the C1Windowcontrol. This will open the C1Window Tasks menu.

The C1Window Tasks menu operates as follows:

ShowOnLoad

When the ShowOnLoad check box is checked, the ShowOnLoad property is set to True and the dialog window will appear on the page on load. By default the ShowOnLoad check box is not checked and the ShowOnLoad property is set to False.

VisualStylePath

The VisualStylePath property specifies the location of the visual styles used for the control. By default, embedded visual styles are located in ~/C1WebControls/VisualStyles. If you create a custom style, add it to this location ~/VisualStyles/StyleName/C1Window/styles.css, set the VisualStylePath property to ~/VisualStyles, and set the VisualStyle property to StyleName (assuming that StyleName is the name used to define the style in the style.css file). Uncheck the UseEmbeddedVisualStyles property.

UseEmbeddedVisualStyles

This check box is checked by default so that the internal visual styles, such as ArcticFox and Vista can be used. If you want to use your own custom styles, uncheck this check box and specify the location of your visual styles using the VisualStylePath property.

Visual Style

Clicking the Visual Style drop-down box allows you to select from various built-in visual schemes. For more information about available visual styles, see Visual Styles (page 31).

26

About

Clicking About displays the C1Window control's About dialog box, which is helpful in finding the build number of the control along with licensing, registration and purchasing information, and additional online resources.

C1Window Context MenuThe C1Window control has additional commands with the context menu that Visual Studio provides for all .NET controls.

To access the C1Window context menu, right-click anywhere on the C1Window control. This will open the C1Window context menu.

The C1Window context menu includes the following custom commands added by C1Window:

Show Smart Tag

Shows the smart tag for the C1Window control. For more information on how to use the smart tag and available features, see C1Window Smart Tag (page 25).

Modal and Modeless Dialog WindowsDialog boxes are commonly used in applications to retrieve input from the user. In some applications a dialog box is used to prompt the user for input and once the application retrieves the input the dialog box is automatically closed or destroyed.

On the other hand, some applications use dialog boxes to display information while the user works in other windows. For example, when you check spelling in Microsoft Word a dialog box remains open so you can go through and edit your text in the document while the spell checker looks for the next misspelled word. To support the different ways applications use dialog boxes, C1Window supports two different types of dialog windows: modal (page 27) and modeless (page 27) dialog windows.

27

Modal Dialog WindowsA modal dialog window is a child window that must be closed before the user can continue working on the current application. Typically modal dialog windows either take control of the entire system or application displaying them until they are closed. For example, you can use a modal dialog window to retrieve login information from a user before the user can continue working on an application. To show a modal dialog window in JavaScript use the ShowModal() method.

Modal windows are useful in presenting important information or requiring user interaction. To add a modal dialog window programmatically, see Creating a Modal Dialog Window in Code (page 89).

Modeless Dialog WindowsA modeless dialog window enables users to interact with other windows while the dialog window is present. Use this type of dialog window when the requested information is not necessary to continue. Modeless dialog windows do not keep the input focus so you can work on two applications at once. Show a modeless dialog window in JavaScript using the Show() method.

A modeless dialog window is commonly used in menus and help systems where the user can use the dialog window and the application window concurrently. For example, a toolbar is a modeless dialog window because it can be detached from the application and the user can select items in the toolbar to apply features to the detached or separated application. To add a modeless dialog window programmatically, see Creating a Modeless Dialog Window in Code (page 87).

C1Window ElementsThis section provides a visual and descriptive overview of the elements that comprise the C1Window control. The topics are categorized into the three distinct elements, the content element, the caption bar element, and the status bar element that represent different aspects of the dialog window control.

Content ElementThe main part of the C1Window control is the content area.

In the content area you can add rich text through custom HTML content, URL links through its ContentUrlproperty, and add arbitrary controls through its content template. Elements in the content area of the control can be added and moved on the control through a simple drag-and-drop operation.

C1Window includes the following properties to make it simple to add and customize any type of item such as text, images, arbitrary controls, and links to the content area:

ContentTemplate

ContentUrl

The following image labels the content area in the C1Window control:

28

You can use a style sheet to apply unique styles to the content in the C1Window control. For more information on the available styles, see Content Styles (page 33).

You can enter text in the content area of the dialog window at design time. When you enter text into the content area, C1Window adds a <ContentTemplate> tag inside the <cc1:C1Window> tag like the following:

<cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" X="0" Y="0"><ContentTemplate>This is where the content information is placed.</ContentTemplate>...</cc1:C1Window>

For more information about creating a content template, see the topic Creating a Content Template (page 61).

You can use the ContentUrl property to set external content to appear in the dialog window. For more information, see Showing External Content in the Content Area (page 59).

Caption Bar ElementThe caption bar appears at the top of the C1Window dialog window, and appears similar to a traditional dialog box with a few differences. From left to right the caption bar includes an icon, title text, and several buttons. It has optional pin, reload, collapse/expand, minimize, maximize, and close buttons that appear on the right side of the caption bar when you enable the PinButton, ReloadButton, CollapseExpandButton, MinimizeButton, MaximizeButton, and CloseButton buttons. By default, the Visible property of the pin, reload, collapse/expand, minimize, maximize, and close buttons is set to True; for information about hiding these buttons see HidingCaption Bar Buttons (page 72). You can set the icon using the Icon property and you can specify text for the title on the caption bar by setting the string for the Text property.

The following diagram labels the properties that appear on the caption bar:

29

The following table describes each of the elements on the caption bar:

Element Description

Icon An image shown on the left side of the C1Window dialog window title area. By default Icon is Visible.

Text Gets or sets text which dispayed on the caption bar of the C1Window dialog window. By default Text is blank.

PinButton Button that pins and unpins the C1Window dialog window. By default PinButton is not Visible.

ReloadButton Button that reloads the C1Window dialog window content set by the ContentUrl property. By default is not Visible.

CollapseExpandButton Button that collapses or expands the C1Window dialog window. By default CollapseExpandButton is not Visible.

MinimizeButton Button that minimizes the C1Window dialog window. By default MinimizeButton is Visible.

MaximizeButton Button that resizes the C1Window dialog window to fit all available space in the browser window. By default MaximizeButton is Visible.

CloseButton Button that closes the C1Window dialog window. By default CloseButton is Visible.

RestoreButton Button that is shown instead of the MinimizeButton button or the MaximizeButton button of C1Window dialog window when the window is minimized or maximized. Clicking this button restores the window to the previous size.

For more information on how to change the caption bar's appearance, see Customizing the Caption Bar (page 72).

30

Status Bar ElementThe status bar appears at the bottom of the C1Window dialog window when the StatusVisible property is set to True. By default StatusVisible is set to False and the status bar is not visible. You can use the status bar element to present information and updates as you would in a traditional WinForms dialog box. You can also use the status bar to provide a page loading indicator.

The following diagram labels the status bar element:

C1Window includes the following properties to make it simple to add and customize content in the status area:

StatusVisible

StatusTemplate

To show the status bar use the StatusVisible property. For details see, Showing the Status Bar (page 75).

You can enter text in the status bar area of the dialog window at design time. When you enter text into the status bar area, C1Window adds a <StatusTemplate> tag inside the <cc1:C1Window> tag like the following:

<cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" X="0" Y="0"><StatusTemplate>This is where the status bar content is placed.</StatusTemplate>...</cc1:C1Window>

The status bar includes a page loading image that appears in the lower left corner, and by default is set to a spinner image:

31

The location and appearance of this image varies depending on the theme used. For example in the ArcticFox theme the loading image appears on the left side of the status bar. You can customize this loading image with your own animated graphic. See the Setting the Loading Image (page 77) topic for information.

You can add a style sheet to style the status bar's appearance. See Customizing the Status Bar (page 75) for more information.

Window for ASP.NET AJAXAppearance

C1Window is designed to make customization easy for you. The possibilities are endless when it comes to changing your C1Window dialog window's appearance. C1Window provides several styles for its caption bar, content area, and status bar elements and built-in themes, including those for Office 2007.

In addition to the property styles for each dialog window element, C1Window provides full support for CSS styles so you can further customize each dialog window element through CSS styles.

For more information on the property styles, see Styles (page 33).

Visual StylesC1Window provides several built-in themes that can be easily applied.

Changing the Visual Style

You can change the Visual Style from the designer in one of two ways:

Click VisualStyle in the C1Window Tasks menu.

See C1Window Smart Tag (page 25) for more information.

Click the drop-down arrow next to VisualStyle in the C1Window control's Properties window.

32

Available Themes

The following predefined schemes are available for C1Window:

Visual Styles Preview

ArcticFox (default)

Office2007Black

Office2007Blue

33

Office2007Silver

Vista

StylesThe C1Window control provides CSS properties so you can further customize the C1Window control's elements through CSS styles. By using CSS you can flawlessly integrate your dialog window into your new or existing Web site. Included styles include content, caption bar, and status bar styles.

Note: The ContentStyle, CaptionStyle, and StatusStyle properties available in the former C1WebDialog control have been replaced with CSS element styling. For more information, see the following topics.

Style Property Description Example (ArcticFox theme)

[None] The base style. In the example this is used to dock the window horizontally.

.C1Window_ArcticFox

{

float:left;

}

.C1Invisible Sets invisible items. .C1Window_ArcticFox .C1Invisible

{

display:none;

}

Content Styles

The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's content. These elements include the following:


.C1ContentPanel

.C1OuterSets the outer border for when the control is not in focus.

.C1Window_ArcticFox .C1ContentPanel

.C1Outer

34

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.content_left_unfocused.gif")%>') repeat-y scroll left top;

padding-left:5px;

}

.C1ContentPanel

.C1InnerSets the inner border for when the control is not in focus.


.C1Inner

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.content_right_unfocused.gif")%>') repeat-y scroll right top;

padding-right:5px;

}

.C1ContentPanel

.C1ContentSets the content background style. .C1Window_ArcticFox .C1ContentPanel

.C1Content

{

background:#FFFFFF;

}

.C1ContentPanel

.C1ContentTemplateSets the content template style. .C1Window_ArcticFox .C1ContentPanel

.C1ContentTemplate

{

font-size:12px;

}

.C1Focus

.C1ContentPanel

.C1Outer

Sets the outer border for when the control is in focus.

.C1Window_ArcticFox .C1Focus

.C1ContentPanel .C1Outer

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.content_left.gif")%>') repeat-y scroll left top;

padding-left:5px;

}

.C1Focus

.C1ContentPanel

.C1Inner

Sets the inner border for when the control is in focus.


.C1ContentPanel .C1Inner

{

35

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.content_right.gif")%>') repeat-y scroll right top;

padding-right:5px;

}

.C1Maximized

.C1ContentPanel

.C1Outer

Sets the outer border for when the control is maximized.

.C1Window_ArcticFox .C1Maximized

.C1ContentPanel .C1Outer

{

background-image: none;

padding-left:0px;

}

.C1Maximized

.C1ContentPanel

.C1Inner

Sets the inner border for when the control is not maximized.


.C1ContentPanel .C1Inner

{


padding-right:0px;

}

Caption Bar Styles

The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's caption bar, including buttons and text. These elements include the following:


.C1Heading .C1Outer Sets the outer heading border for when the control is not in focus.

.C1Window_ArcticFox .C1Heading

.C1Outer

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_left_unfocused.gif")%>') no-repeat scroll left top;

padding-left: 5px;

overflow:hidden;

}

.C1Heading .C1Inner Sets the inner heading border for when the control is not in focus.


.C1Inner

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1

36

Window.VisualStyles.ArcticFox.Images.title_right_unfocused.gif")%>') no-repeat scroll right top;

padding-right:5px;

}

.C1Heading

.C1ContentSets the heading's content style. .C1Window_ArcticFox .C1Heading

.C1Content

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center_unfocused.gif")%>') repeat-x scroll left top;

padding: 0px 0px 0px 0px;

height: 30px;

}

.C1Focus .C1Heading

.C1OuterSets the outer heading border for when the control is in focus.


.C1Heading .C1Outer

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_left.gif")%>') no-repeat scroll left top;

}

.C1Focus .C1Heading

.C1InnerSets the inner heading border for when the control is in focus.


.C1Heading .C1Inner

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_right.gif")%>') no-repeat scroll right top;

}

.C1Focus .C1Heading

.C1ContentSets the heading's content style when the control is in focus.


.C1Heading .C1Content

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center.gif")%>') repeat-x scroll left top;

}

.C1Focus-C1Maximized

Sets the outer heading border for when the control is in focus and

.C1Window_ArcticFox .C1Focus-

37

.C1Heading .C1Outer maximized. C1Maximized .C1Heading .C1Outer

{


padding-left:0px;

}

.C1Focus-C1Maximized .C1Heading .C1Inner

Sets the inner heading border for when the control is in focus and maximized.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Inner

{


padding-right:0px;

}

.C1Focus-C1Maximized .C1Heading .C1Content

Sets the heading's content style when the control is in focus and maximized.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Content

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center_maximize.gif")%>') repeat-x scroll left top;

}

.C1Heading

.C1TextNodeSets the heading's text node style when the control is not in focus.


.C1TextNode

{

font-family: System;

font-size: 12px;

color: #000000;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

line-height:30px;

padding-left:2px;

}

.C1Focus .C1Heading

.C1TextNodeSets the heading's content style when the control is in focus.


.C1Heading .C1TextNode

{

color:#767676;

}

38

.C1Focus-C1Maximized .C1Heading .C1TextNode

Sets the heading's content style when the control is in focus and maximized.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1TextNode

{

color: #FFFFFF;

}

.C1Heading .C1Icon Sets the heading's icon image. .C1Window_ArcticFox .C1Heading .C1Icon

{

float:left;

display:none;

}

.C1Heading .C1List

.C1ListItemSets the heading's button styles. .C1Window_ArcticFox .C1Heading

.C1List .C1ListItem

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.Tool-Sprites.gif")%>') no-repeat scroll left top;

cursor:pointer;

float:left;

overflow:hidden;

height: 16px;

width: 18px;

margin-left:1px;

}

.C1Heading

.C1ControlBoxSets the heading's button styles. .C1Window_ArcticFox .C1Heading

.C1ControlBox

{

float:right;

padding-top:7px;

}

.C1Heading .C1List

.C1CloserSets the heading's Close button styles when the control is not in focus.


.C1List .C1Closer

{

background-position: 0px 0px;

}

39

.C1Focus .C1Heading

.C1List .C1CloserSets the heading's Close button styles when the control is in focus.


.C1Heading .C1List .C1Closer

{

background-position: -18px 0px;

}

.C1Focus .C1Heading

.C1List .C1Closer-C1Hover

Sets the heading's Close button styles when the control is in focus and the button is hovered over.


.C1Heading .C1List .C1Closer-C1Hover,


.C1List .C1Closer-C1Hover

{

background-position:-36px 0px;

}

.C1Heading .C1List

.C1Closer-C1HoverSets the heading's Close button styles when the control is not in focus and the button is hovered over.

.C1Focus .C1Heading

.C1List .C1Closer-C1Active

Sets the heading's Close button styles when the control is in focus and the button is active.


.C1Heading .C1List .C1Closer-C1Active,


.C1List .C1Closer-C1Active

{

background-position:-54px 0px;

}

.C1Heading .C1List

.C1Closer-C1ActiveSets the heading's Close button styles when the control is not in focus and the button is active.

.C1Heading .C1List

.C1MaximizerSets the heading's Maximize button styles when the control is not in focus.


.C1List .C1Maximizer

{

background-position : 0px -25px;

}

.C1Focus .C1Heading

.C1List .C1MaximizerSets the heading's Maximize button styles when the control is in focus.


.C1Heading .C1List .C1Maximizer

{

background-position : -18px -25px;

}

.C1Focus .C1Heading

.C1List

.C1Maximizer-C1Hover

Sets the heading's Maximize button styles when the control is in focus and the button is hovered over.


.C1Heading .C1List .C1Maximizer-C1Hover,


.C1List .C1Maximizer-C1Hover

{

background-position: -36px -25px;

}

.C1Heading .C1List


Sets the heading's Maximize button styles when the control is not in focus and the button is hovered over.

.C1Focus .C1Heading Sets the heading's Maximize button .C1Window_ArcticFox .C1Focus

40

.C1List

.C1Maximizer-C1Active

styles when the control is in focus and the button is active.

.C1Heading .C1List .C1Maximizer-C1Active,


.C1List .C1Maximizer-C1Active

{


}

.C1Heading .C1List


Sets the heading's Maximize button styles when the control is not in focus and the button is active.

.C1Maximized

.C1Heading .C1List

.C1Maximizer

Sets the heading's Maximized button styles when the control is maximized and not in focus.


.C1Heading .C1List .C1Maximizer

{

background-position: 0px -50px;

}

.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer

Sets the heading's Maximized button styles when the control is maximized and in focus.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer

{


}

.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover

Sets the heading's Maximized button styles when the control is maximized and in focus and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover,


.C1Heading .C1List .C1Maximizer-C1Hover

{


}

.C1Maximized

.C1Heading .C1List


Sets the heading's Maximized button styles when the control is maximized and not in focus and the button is hovered over.

.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Active

Sets the heading's Maximized button styles when the control is maximized and in focus and the button is active.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Active,


.C1Heading .C1List .C1Maximizer-C1Active

{


}

.C1Maximized

.C1Heading .C1List


Sets the heading's Maximized button styles when the control is maximized and not in focus and the button is active.

.C1Heading .C1List

.C1MinimizerSets the heading's Minimize button styles when the control is not in focus.


.C1List .C1Minimizer

{


41

}

.C1Focus .C1Heading

.C1List .C1MinimizerSets the heading's Minimize button styles when the control is in focus.


.C1Heading .C1List .C1Minimizer

{


}

.C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover

Sets the heading's Minimize button styles when the control is in focus and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover,

.C1Window_ArcticFox .C1Minimized

.C1Heading .C1List .C1Minimizer-C1Hover

{


}

.C1Minimized

.C1Heading .C1List

.C1Minimizer-C1Hover

Sets the heading's Minimize button styles when the control is not in focus and the button is hovered over.

.C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Active

Sets the heading's Minimize button styles when the control is in focus and the button is active.

.C1Window_ArcticFox .C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Active,

.C1Window_ArcticFox .C1Minimized

.C1Heading .C1List .C1Minimizer-C1Active

{


}

.C1Minimized

.C1Heading .C1List

.C1Minimizer-C1Active

Sets the heading's Minimize button styles when the control is not in focus and the button is active.

.C1Heading .C1List

.C1TogglerSets the heading's Toggle button styles when the control is not in focus and is expanded.


.C1List .C1Toggler

{


}

.C1Focus .C1Heading

.C1List .C1TogglerSets the heading's Toggle button styles when the control is in focus and is expanded.


.C1Heading .C1List .C1Toggler

{


}

.C1Focus .C1Heading

.C1List .C1Toggler-C1Hover

Sets the heading's Toggle button styles when the control is in focus and is expanded and the button is hovered over.


.C1Heading .C1List .C1Toggler-C1Hover,


.C1List .C1Toggler-C1Hover

{

.C1Heading .C1List

.C1Toggler-C1HoverSets the heading's Toggle button styles when the control is not in focus and is expanded and the

42

button is hovered over. background-position: -36px -100px;

}

.C1Focus .C1Heading

.C1List .C1Toggler-C1Active

Sets the heading's Toggle button styles when the control is in focus and is expanded and the button is active.


.C1Heading .C1List .C1Toggler-C1Active,


.C1List .C1Toggler-C1Active

{


}

.C1Heading .C1List

.C1Toggler-C1ActiveSets the heading's Toggle button styles when the control is not in focus and is expanded and the button is active.

.C1Closed

.C1Heading .C1List

.C1Toggler

Sets the heading's Toggle button styles when the control is not in focus and is collapsed.

.C1Window_ArcticFox .C1Closed

.C1Heading .C1List .C1Toggler

{


}

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler

Sets the heading's Toggle button styles when the control is in focus and is collapsed.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler

{


}

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler-C1Hover

Sets the heading's Toggle button styles when the control is in focus and is collapsed and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Hover,


.C1Heading .C1List .C1Toggler-C1Hover

{

background-position : -36px -125px;

}

.C1Closed

.C1Heading .C1List

.C1Toggler-C1Hover

Sets the heading's Toggle button styles when the control is not in focus and is collapsed and the button is hovered over.

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler-C1Active

Sets the heading's Toggle button styles when the control is in focus and is collapsed and the button is active.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Active,


.C1Heading .C1List .C1Toggler-C1Active

{


}

.C1Closed

.C1Heading .C1List

.C1Toggler-C1Active

Sets the heading's Toggle button styles when the control is not in focus and is collapsed and the button is active.

.C1Heading .C1List Sets the heading's Reload button .C1Window_ArcticFox .C1Heading

43

.C1Reloader styles when the control is not in focus.

.C1List .C1Reloader

{


}

.C1Focus .C1Heading

.C1List .C1ReloaderSets the heading's Reload button styles when the control is in focus.


.C1Heading .C1List .C1Reloader

{


}

.C1Focus .C1Heading

.C1List .C1Reloader-C1Hover

Sets the heading's Reload button styles when the control is in focus and the button is hovered over.


.C1Heading .C1List .C1Reloader-C1Hover,


.C1List .C1Reloader-C1Hover

{


}

.C1Heading .C1List

.C1Reloader-C1Hover

Sets the heading's Reload button styles when the control is not in focus and the button is hovered over.

.C1Focus .C1Heading

.C1List .C1Reloader-C1Active

Sets the heading's Reload button styles when the control is in focus and the button is active.


.C1Heading .C1List .C1Reloader-C1Active,


.C1List .C1Reloader-C1Active

{


}

.C1Heading .C1List

.C1Reloader-C1Active

Sets the heading's Reload button styles when the control is not in focus and the button is active.

.C1Heading .C1List

.C1PinnerSets the heading's Pin button styles when the control is not in focus.


.C1List .C1Pinner

{


}

.C1Focus .C1Heading

.C1List .C1PinnerSets the heading's Pin button styles when the control is in focus.


.C1Heading .C1List .C1Pinner

{


}

.C1Focus .C1Heading

.C1List .C1Pinner-C1Hover

Sets the heading's Pin button styles when the control is in focus and the button is hovered over.


.C1Heading .C1List .C1Pinner-C1Hover,


.C1Heading .C1List Sets the heading's Pin button styles

44

.C1Pinner-C1Hover when the control is not in focus and the button is hovered over.

.C1List .C1Pinner-C1Hover

{


}

.C1Focus .C1Heading

.C1List .C1Pinner-C1Active

Sets the heading's Pin button styles when the control is in focus and the button is active.


.C1Heading .C1List .C1Pinner-C1Active,


.C1List .C1Pinner-C1Active

{


}

.C1Heading .C1List

.C1Pinner-C1ActiveSets the heading's Pin button styles when the control is not in focus and the button is active.

.C1Pinned

.C1Heading .C1List

.C1Pinner

Sets the heading's Pinned button styles when the control is not in focus.

.C1Window_ArcticFox .C1Pinned

.C1Heading .C1List .C1Pinner

{


}

.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner

Sets the heading's Pinned button styles when the control is in focus.

.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner

{


}

.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner-C1Hover

Sets the heading's Pinned button styles when the control is in focus and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Hover,


.C1Heading .C1List .C1Pinner-C1Hover

{


}

.C1Pinned

.C1Heading .C1List

.C1Pinner-C1Hover

Sets the heading's Pinned button styles when the control is not in focus and the button is hovered over.

.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner-C1Active

Sets the heading's Pinned button styles when the control is in focus and the button is active.

.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Active,


.C1Heading .C1List .C1Pinner-C1Active

{


}

.C1Pinned

.C1Heading .C1List

.C1Pinner-C1Active

Sets the heading's Pinned button styles when the control is not in focus and the button is active.

45

Note that you can set the visibility and ToolTips for elements on the caption bar, such as the icon image and button elements, by using the CaptionButtons property.

Status Bar Styles

The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's status bar, including the spinner image and text. These elements include the following:


.C1ContentPanel

.C1StatusBarSets the status bar's style. .C1Window_ArcticFox .C1ContentPanel

.C1StatusBar

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.status.gif")%>') repeat-x scroll 0pt top;

height:30px;

}

.C1ContentPanel

.C1SpinnerSets the style and location of the control's content loading image.


.C1Spinner

{

height:16px;

width:16px;

background:url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.Loading.gif")%>') no-repeat;

float:left;

margin: 4px 0 0 5px;

}

.C1ContentPanel

.C1SpinnerContainerSets the loading image container's style.


.C1SpinnerContainer

{

height:30px;

width:30px;

background:url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.status_separator.gif")%>') no-repeat;

background-position:right;

float:left;

46

}

.C1ContentPanel

.C1StatusTemplateSets the status template's style. .C1Window_ArcticFox .C1ContentPanel

.C1StatusTemplate

{

line-height:30px;

font-size:12px;

}

.C1Footer .C1Outer Sets the outer status bar border for when the control is not in focus.

.C1Window_ArcticFox .C1Footer

.C1Outer

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_left_unfocused.gif")%>') no-repeat scroll left bottom;

padding-left:5px;

}

.C1Footer .C1Inner Sets the inner status bar border for when the control is not in focus.


.C1Inner

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_right_unfocused.gif")%>') no-repeat scroll right bottom;

padding-right:5px;

}

.C1Footer

.C1ContentSets the status bar's content style when the control is not in focus.


.C1Content

{

height: 5px;

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_center_unfocused.gif")%>') repeat-x scroll left bottom;

font-size:0px;

}

.C1Focus .C1Footer

.C1OuterSets the outer status bar border for when the control is in focus.


.C1Footer .C1Outer

{

47

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_left.gif")%>') no-repeat scroll left bottom;

padding-left:5px;

}

.C1Focus .C1Footer

.C1InnerSets the inner status bar border for when the control is in focus.


.C1Footer .C1Inner

{

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_right.gif")%>') no-repeat scroll right bottom;

padding-right:5px;

}

.C1Focus .C1Footer

.C1ContentSets the status bar's content style when the control is in focus.


.C1Footer .C1Content

{

height: 5px;

background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.footer_center.gif")%>') repeat-x scroll left bottom;

font-size:0px;

}

.C1Focus-C1Maximized .C1Footer .C1Outer

Sets the status bar's styles when the control is in focus and maximized.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Footer .C1Outer

{

display:none;

}

Content and Status Bar TemplatesThe contents of the content area and status bar area of the dialog window can be controlled by using templates. C1Window has special properties, ContentTemplate and StatusTemplate, that are used to apply templates to the content area and status bar area of the C1Window control.

The dialog window content templates are useful for customizing your dialog window so its appearance integrates into your application and for adding content to the content area of the dialog window. The status template allows you to customize the content of your status bar. See the Creating a Content Template (page 61) topic for more information about creating a content template for C1Window.

48

Window for ASP.NET AJAX BehaviorThe C1Window control's behavior can be customized to meet any user's needs. You can determine where the dialog window will appear in the parent application, whether or not the dialog window can be moved and resized, and whether the dialog window can be minimized.

In addition to controlling the behavior of the dialog window, you can control the content inside the window pane. For example, in situations where you only need to update a particular item in the window pane, you can use Partial Page Rendering (PPR) so you can update that item without reloading all of the items in the entire page.

Window Positioning and SizingYou can determine where the dialog window will appear in the parent application, whether or not the dialog window can be resized, and whether the dialog window can be moved.

Window Position

You can easily specify whether you would like the dialog window to appear at the center of the page, in the center of the dialog window's parent element, at the top-left corner of the page (the default position), or at a specific (x, y) location on the page through the StartPosition property.

You can set the StartPosition property to ByDefault, Page, Parent, Manual, or OffSet. When you set the dialog window's start position to Manual you will need to specify an integer value for the horizontal (X) and vertical (Y) location of the dialog window through the X and Y properties. For more information, see Settingthe Window Location (page 82).

You can also set the dialog window's location on the client side. For more information, see Setting the Dialog Window Location at Run Time (page 98).

Window Size

You can specify the initial size of your dialog window. To resize the dialog window at design time, position your cursor over the bottom-right corner of the dialog window, press and hold the left mouse button, drag the dialog window edge to resize, and release the mouse when you are done.

See Setting the Height and Width (page 83) for more information. For information on setting the control's height and width on the client side, see Resizing the Dialog Window at Run Time (page 97).

49

You can prevent users from resizing the dialog window at run time by setting the AllowResize property to False. For more information, see Preventing Window Resizing (page 80).

Window Moving

The dialog window is moveable by default. You can move the dialog window at run time by selecting the caption bar on the dialog window and dragging the window across the page.

If you would like to hold the initial set position of the dialog window, set the AllowMove property to False.For more information, see Preventing Window Repositioning (page 81).

Window MinimizingFor a C1Window dialog window to be minimized you need a minimize button to be visible on the dialogwindow's caption bar. By default, the Minimize button is enabled and the MinimizeButton.Visible property is set to True. You can disable dialog window minimizing by setting the MinimizeButton.Visible property to False.

When a dialog window is minimized at run time it will appear in the lower-left area of the Web page. Once minimized, the Minimize button will become a Restore button. When pressed the Restore button will return the dialog window to its previous size.

Docking Dialog Windows in a Form Element

If you would like to specify an element to store the minimized windows, you can use the MinimizeZoneElementId property. For example, in the following image dialog windows are docked in a panel control:

Using the MinimizeZoneElementId property, you can specify a form element to store the minimized dialogwindows. When minimized, the dialog windows will appear docked in the form element designated by the MinimizeZoneElementId property, similar to the way that windows are docked in a task bar. For more information, see Using the MinimizeZoneElementId property (page 85).

AnimationWindow for ASP.NET AJAX includes twenty-six built-in animation options that allow you to completely customize interaction with the C1Window control. You can set animation effects for when the control is shown, hidden, expanded, and collapsed. See the following topics for more information.

Animation Effects

You can customize interaction with the C1Window control using any of the twenty-six built-in effects. You can change how the control is shown and hidden by setting the AnimationEffectOnShowing and AnimationEffectOnHiding properties. You can change how the control expands and collapses by setting the AnimationEffectOnExpanding and AnimationEffectOnCollapsing properties. By default these four properties are set to None and the control does not use any animation effects.

Sample Project Available

For a demonstration of each animation effect possible in the C1Window control, see C1Window's Animation page in the ControlExplorer sample.

50

Available Animation Effects

The following table describes each animation effect choice. Note that while you can use all animations to show, hide, expand, or collapse the control, the terms "expands" and "collapses" were used to indicate which selection is suggested for each animation:

Name Description

None (default) No animation used.

FadeIn Expands body of the control so that it appears to fade in.

FadeOut Collapses the body of the control, so that it appears to fade out.

ScrollInFromTop Expands the body of the control, scrolling into view from the top.

ScrollInFromRight Expands the body of the control, scrolling into view from the right.

ScrollInFromBottom Expands the body of the control, scrolling into view from the bottom.

ScrollInFromLeft Expands the body of the control, scrolling into view from the left.

ScrollOutToTop Collapses the body of the control, scrolling out of view to the top.

ScrollOutToRight Collapses the body of the control, scrolling out of view to the right.

ScrollOutToBottom Collapses the body of the control, scrolling out of view to the bottom.

ScrollOutToLeft Collapses the body of the control, scrolling out of view to the left.

Fold Collapses the body of control vertically and then horizontally so it appears to fold.

UnFold Expands the body of control horizontally and then vertically so it appears to unfold.

OpenVertically Expands the body of control vertically from the center of the body area.

CloseVertically Collapses the body of control vertically from the center of the body area.

OpenHorizontally Expands the body of control horizontally from the center of the body area.

CloseHorizontally Collapses the body of control horizontally from the center of the body area.

Shake Expands or Collapses the body of control with a horizontal shaking motion.

Bounce Expands or Collapses the body of control with a vertical bouncing motion.

DropInFromTop Expands the body of the control from below the control to the top.

DropInFromRight Expands the body of the control from the left of the control to the right.

DropInFromBottom Expands the body of the control from above the control to the bottom.

51

DropInFromLeft Expands the body of the control from the right of the control to the left.

DropOutToTop Collapses the body of the control out to above the control.

DropOutToRight Collapses the body of the control out to the right of the control.

DropOutToBottom Collapses the body of the control out to below the control.

DropOutToLeft Collapses the body of the control out to the left of the control.

Animation Duration

You can set how long each C1Window show, hide, expand, and collapse animation effect takes by using theAnimationDurationOnShowing, AnimationDurationOnHiding, AnimationDurationOnExpanding, and AnimationDurationOnCollapsing properties. The unit of time used for specifying animation effect duration is in milliseconds, and the default setting for all of the above four properties is 1000 milliseconds (one second). Increase this value for a longer animation effect, and decrease this number for a shorter animation effect.

Sample Project Available

For a demonstration of setting the AnimationDurationOnShowing, AnimationDurationOnHiding, AnimationDurationOnExpanding, and AnimationDurationOnCollapsing properties, see C1Window's Animation page in

the ControlExplorer sample.

Partial RenderingC1Window supports Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript code. PPR allows a portion of a page to be updated rather than reloading the entire page. This improves application performance and provides more direct feedback when users perform actions. For more information, see Using Partial Rendering (page 66).

53

Working with Client-Side ScriptWindow for ASP.NET AJAX has a very rich client-side object model as it is similar to the object model in the server-side control.

When a C1Window control is rendered, an instance of the client-side dialog window will be created automatically. This means that you can enjoy the convenience of accessing any property and method of the C1Window control without having to postback to the server.

For example, suppose a C1Window control with name C1Window1 is hosted on Web page; when the page is rendered, a corresponding client-side dialog window object will be created. Use the following syntax to get the client-side object on a Web page:

$get("C1Window1").control

OR$find("C1Window1")

By using Window for ASP.NET AJAX's client-side code, you can implement many features in your Web page without the need to take up time by sending information to the Web server. Thus, using client-side code can increase the efficiency of your Web site. For more information about the C1Window control's client-side code, see Client-Side Tasks (page 93).

Dialog Window Client-Side MethodsWindow for ASP.NET AJAX supports several client-side methods. The following table lists the object methods available from client-side script:

Client-Side Method Description Example

Activate(window) Makes the dialog window active. C1.Web.UI.Controls.C1Window.C1Window.activate(dialog)

Deactivate(window) Deactivates the dialog window. C1.Web.UI.Controls.C1Window.C1Window. deactivate (dialog)

Show() Shows a dialog window. dialog.show()

For an example of this method, see Calling the Show and Hide Methods at Run Time.

Hide() Hides a dialog window. dialog.hide()

For an example of this method, see Callingthe Show and Hide Methods at Run Time(page 96).

ShowModal() Shows modal dialog window. dialog.showModal()

For an example of this method, seeCreating a Modal Dialog Window in Code(page 89).

SetHtml(html) Loads HTML code passed as a string to dialog window content.

dialog.setHtml("html text");

SetUrl(url) Loads passed URL to dialog window content.

dialog.setUrl("http://www.url.com")

For an example of this method, see, Settingthe ContentURL Property at Run Time (page

54

93).

Move(x, y) Moves a dialog window to specified location.

dialog.move(0, 0)

Normalize() Restores dialog window size from maximized or minimized state.

dialog.normalize()

Minimize() Minimizes a dialog window. dialog.minimize()

Maximize() Maximizes a dialog window. dialog.maximize()

Reload() Reloads dialog window content specified by ContentUrl.

dialog.reload()

Dialog Window 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.

For example in the code below the C#, Visual Basic, and JavaScript examples are equivalent:

Visual BasicDim s As String = C1Window1.TextC1Window1.Text = s

C#string s = C1Window1.Text;C1Window1.Text = s;

JavaScriptvar dialog = $get("C1Window1").control;var s = dialog.get_text(); dialog.set_text(s);

For an example of setting the Text property at run time, see Adding a New Title to the Caption Bar at Run Time (page 94).

Caption Button Client-Side Methods

The following table lists the object methods available from client-side script for the dialog window caption buttons, including the Pin, Reload, CollapseExpand, Minimize, Maximize, Close, and Restore buttons:

Property Client-Side Method Description Example

Visible get_visible() Gets or sets value indicating whether the element is visible.

dialog.get_captionButtons().get_closeButton().get_visible()

set_visible(value) dialog.get_captionButtons().get_closeButton().set_visible(false)

Tooltip get_tooltip() Gets or sets the text displayed when the mouse pointer hovers over the button.

dialog.get_captionButtons().get_closeButton().get_toolTip()

set_tooltip(value) dialog.get_captionButtons().get_closeButton().set_toolTip("Close window")

55

Client-Side EventsC1Window 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.

A placeholder for the client-side event will be added in the Source view. The placeholder will appear similar to the following:

function C1Window1_OnClientActivated(sender, e){ // // Put your code here. //};

Available Client-Side Events

The following table names and describes the built-in client-side events available for your use:

Client-Side Event Description

OnClientActivated Gets or sets the name of the client-side function that should be fired on the client side after the dialog window is activated.

OnClientButtonClickedGets or sets the name of the client-side function that should be fired on the client side when one of the

56

caption buttons is clicked after the dialog window handles the operation.

OnClientButtonClicking

Gets or sets the name of the client-side function that should be fired on the client side when one of the caption buttons is clicked before the dialog window handles the operation.

OnClientDeactivatedGets or sets the name of the client-side function that should be fired on the client side after the dialog window is deactivated.

OnClientDragEndGets or sets the name of the client-side function that should be fired on the client side when the dialog window exits dragging mode.

OnClientDraggingGets or sets the name of the client-side function that should be fired on the client side when the dialog window is being dragged.

OnClientDragStartGets or sets the name of the client-side function that should be fired on the client side when the dialog window enters dragging mode.

OnClientHiddenGets or sets the name of the client-side function that should be fired on the client side after the dialog window is hidden.

OnClientMaximized

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is maximized after the dialog window handles the operation.

OnClientMaximizing

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is maximized before the dialog window handles the operation.

OnClientMinimized

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is minimized after the dialog window handles the operation.

OnClientMinimizing

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is minimized before the dialog window handles the operation.

OnClientNormalized

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is normalized after the dialog window handles the operation.

OnClientNormalizing

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is normalized before the dialog window handles the operation.

OnClientPinned

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is pinned after the dialog window handles theoperation.

OnClientPinning

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window is pinned before the dialog window handles theoperation.

OnClientReloaded

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window content is reloaded after the dialog window handles the operation.

OnClientReloading

Gets or sets the name of the client-side function that should be fired on the client side when the dialog window content is reloaded before the dialog window handles the operation.

OnClientResizeEndGets or sets the name of the client-side function that should be fired on the client side when the dialog window exits resizing mode.

OnClientResizeStart Gets or sets the name of the client-side function that

57

should be fired on the client side when the dialogwindow enters resizing mode.

OnClientResizingGets or sets the name of the client-side function that should be fired on the client side when the dialogwindow is being resized.

OnClientShownGets or sets the name of the client-side function that should be fired on the client side after the dialog window is shown.

59

Window 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://helpcentral.componentone.com/Samples.aspx.

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

C# Samples

Sample Description

Animation Demonstrates various show, hide, expand, and collapse animations and their duration.

Docking Shows various methods of docking the C1Window control.

VisualStyles Illustrates Visual Style properties as well as other appearance and behavior settings.

Window for ASP.NET AJAX Task-Based Help

The task-based help assumes that you are familiar with programming in ASP.NET and know how to use controls in general. By following the steps outlined in the help, you will be able to create projects demonstrating a variety of Window for ASP.NET AJAX features, and get a good sense of what the C1Window control can do.

Each topic provides a solution for specific tasks using the C1Window control. Each task-based help topic also assumes that you have created a new ASP.NET AJAX-Enabled project. For additional information on this topic, see Creating an AJAX-Enabled ASP.NET Project (page 10).

Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10).

Customizing the Content AreaThe following procedures show how to add different types of content to C1Window such as: external website content, content in the content template, and custom HTML, and partial rendering content.

Showing External Content in the Content Area

In Window for ASP.NET AJAX you can show external content in a dialog window. This means that you can have the content of another Web page in your project or even the content of a Web site outside of your projectappear in a dialog window. Pointing to external content is simple using the ContentUrl property. In this topic

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



60

you'll set the ContentUrl property at design time. To change the ContentUrl property at run time instead, see the Setting the ContentURL Property at Run Time (page 93) topic.

To show external content in the dialog window, complete the following steps:

1. Navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Windowcontrol to your page.

2. Click the control's smart tag ( ) to open the C1Window Tasks menu and select the ShowOnLoadcheckbox to set the ShowOnLoad property to True:

For more information on accessing the smart tag, see C1Window Smart Tag (page 25).

3. In the C1Window Tasks menu click on the VisualStyle drop-down arrow and select Office2007Blue.

4. Navigate to the Properties window and set the following properties for C1Window1:

Set the StatusVisible property to False.

Set the Height property to 225px.

Set the Width property to 300px.

5. Set the ContentURL property to the location of the content that you want to appear in the content area of the dialog window:

In the Designer

To show external content in the content area using the designer, navigate to the Properties window and set the following property:

Set the ContentURL property to "http://www.google.com".

In Code

To show external content in the content area in code, switch to the Code view and add the following code to the Page_Load event:

Visual BasicC1Window1.ContentUrl = "http://www.google.com"

C#C1Window1.ContentUrl = "http://www.google.com";

In Source view

To show external content in the content area from the Source view, switch to the Source view and complete the following:

1. Locate the <cc1:C1Window></cc1:C1Window> tags.

61

2. Add the text ContentUrl="http://www.google.com" within the <cc1:C1Window> tag. The tag will appear similar to the following:<cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="225px" ShowOnLoad="True" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px"StatusVisible="False" X="0" Y="0" ContentUrl="http://www.google.com">

Run the program and observe:

The Web site indicated by the ContentURL property appears in the content area of the dialog window:

Creating a Content Template

Content templates are useful for customizing your dialog window for your application and for displaying additional information in the content area in the dialog window. For more information on templates, see Content and Status Bar Templates (page 47).

In the following example, you will add content to the content template of a dialog window in the design view and in the source view. In addition, the dialog window will function as an update panel updating content without reloading the rest of the page.

To create a content template for C1Window, complete the following:

1. Navigate to the Visual Studio Toolbox, and double-click the Hyperlink and C1Window icons to add the controls to your Form.

2. Select Hyperlink1 and in the Properties window set its Text property to "Show Window".

3. Click inside the content area of C1Window1 and press the ENTER key, then type the following text: "The current server time is:".

4. Switch to source view, notice that the text you just entered is located within the <ContentTemplate>tags, like the following:<ContentTemplate></br> <span ...> The current server time is: </span></ContentTemplate>

Any content you enter in the content area of the dialog window at design time will appear within the content template tags.

5. In between the Content Template opening and closing tags you can add arbitrary controls and text. Add the following to the <ContentTemplate> tag to add text box and button controls to the dialog window:

62

<ContentTemplate><br /> <span ...> The current server time is: </span><br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <br /> <asp:Button ID="Button1" runat="server" Text="Update Time" /></ContentTemplate>

6. Switch to Design view and notice the text box and button controls were added inside the content area:

7. Resize the C1Window to fit the controls by dragging the lower right-hand corner of the control.

8. Double-click the Web page to switch to code view and create an event handler for the Load event. Enter the following code in the Page_Load event to initialize the control:

Visual BasicProtected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim tb As TextBox = C1Window1.FindControl("TextBox1") tb.Text = DateTime.Now.ToString() HyperLink1.NavigateUrl = "javascript:openWindow($get(""" & C1Window1.ClientID & """))"End Sub

C#protected void Page_Load(object sender, EventArgs e){ TextBox tb = (TextBox)C1Window1.FindControl("TextBox1"); tb.Text = DateTime.Now.ToString(); HyperLink1.NavigateUrl = "javascript:openWindow($get(\"" + C1Window1.ClientID + "\"))";}

9. Switch to the source view and add the following JavaScript just after the Hyperlink tag, so that clicking the hyperlink will open the dialog window:<script type="text/javascript">function openWindow(dialog){

63

form_dialog = dialog.control; dialog.control.show();}</script>

This topic illustrates the following:

If you run the program and click Show Window; the dialog window will appear like the following:

Select the Update Time button. Notice that the time is refreshed – the dialog window acts as an update panelrefreshing content without the page being reloaded.

Adding Custom HTML Content in the Content Area

You can customize the appearance and content of your C1Window dialog window with HTML. In this topic, you'll add heading and text to a dialog window as well as an input text box and button; you will be able to change this content at run time, adding your own custom HTML content.

To add custom HTML content in the dialog window, complete the following steps:

1. In the Visual Studio Toolbox, double-click the C1Window, TextArea, and Hyperlink controls to add them to your page.

2. Open the C1Window Tasks menu from its smart tag and click the VisualStyle drop-down arrow.


3. Select Office2007Black to apply the new scheme.

4. Place the cursor just after the TextArea control and press the ENTER button so the Hyperlink appears on the next line.

5. Navigate to the Properties window and set the following properties:

Set C1Window1's Height property to 200.

Set C1Window1's Width property to 300.

Set TextArea1's Style property to "WIDTH: 400px; HEIGHT: 200px"

Set Hyperlink1's Text property to "Show Window".

The page will appear similar to the following:

64

6. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to initialize the control:

Visual BasicHyperLink1.NavigateUrl = String.Format("javascript:setHtml($get(""{0}""));openWindow($get(""{0}""));", C1Window1.ClientID)

C#HyperLink1.NavigateUrl = String.Format("javascript:setHtml($get(\"{0}\"));openWindow($get(\"{0}\"));", C1Window1.ClientID);

7. Switch to the source view and add content to the <textarea> tag, so it looks like this:<textarea id="TextArea1" style="width: 400px; height: 200px" onclick="return TextArea1_onclick()"><h2> Sample HTML Content</h2><p> You can add custom HTML content.<br /></p> Enter text here: <input type=text id="input1" /> <br> And then click: <input type=button value="Show" onclick="alert(document.getElementById('input1').value)"></textarea>

8. Add the following JavaScript just after the </asp:HyperLink> tag:<script type="text/javascript">

65

function setHtml(dialog){ var html = document.getElementById('TextArea1').value; dialog.control.setHtml(html);}

function openWindow(dialog){ form_dialog = dialog.control; dialog.control.show();}</script>


1. Run the program; notice the HTML content that you entered in the textarea control:

2. Click Show Window, the dialog window will appear like the following image:

Note that the content of the dialog window reflects the text entered in the TextArea control.

3. Enter text in the text box and click Show; a dialog box will appear that contains the content you just entered.

66

4. Close the dialog box and close the dialog window.

5. Enter text or HTML content in the TextArea and click Show Window for the dialog window containing that content to appear.

Using Partial Rendering

Window for ASP.NET AJAX supports Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript. For more information about Partial Page Rendering see the topic, Partial Rendering (page 51).

The following example uses Partial Page Rendering to create a typical "select location" dialog window. At run time after the user selects a country from a drop-down list, a drop-down list of selectable cities within that country is refreshed from server.

Complete the following steps to create a location selection dialog window that uses Partial Page Rendering:

1. Navigate to the Toolbox and add a C1Window control to your page.

2. Click C1Window1's smart tag to open the C1Window Tasks menu and click the VisualStyle drop-down arrow.


3. Select Office2007Silver to apply the new scheme.

4. Navigate to the Properties window and set the following properties for C1Window1:

Set the Height property to 325px.


5. Switch to the Source view and add the following content template to C1Window1 between the <cc1:C1Window> and <CaptionButtons> tags:

<ContentTemplate> <br /> <strong>Select your location:</strong> <br /><br /><br /> Country: <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" Width="123px"> <asp:ListItem Selected="True">-</asp:ListItem> <asp:ListItem>UK</asp:ListItem> <asp:ListItem>USA</asp:ListItem> <asp:ListItem>Russia</asp:ListItem> <asp:ListItem>Canada</asp:ListItem> </asp:DropDownList><br /><br /> <asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label><br /><br /> City: <asp:DropDownList ID="DropDownList2" runat="server"> <asp:ListItem Selected="True">-</asp:ListItem> </asp:DropDownList><br /> or other <asp:TextBox ID="TextBox1" runat="server" EnableViewState="False" Width="117px"></asp:TextBox><br /> <br /> <br /> <br /> <input id="Button1" style="width: 75px" type="button"

67

value="OK" onclick="form_dialog.hide();__doPostBack('','');"/> <input id="Button2" style="width: 75px" type="button" value="Cancel" onclick="form_dialog.hide();"/><br /></ContentTemplate>

For more information about templates, see Content and Status Bar Templates (page 47).

6. Switch to the Design view; the form should now look like the following:

7. Navigate to the ToolBox and add the Hyperlink and Label controls to the Web page below the C1Window control.

8. Set the Hyperlink's Text property to "Show Location".

9. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to initialize the controls:

Visual BasicHyperLink1.NavigateUrl = [String].Format("javascript:openWindow({0});", C1Window1.ClientID)If Me.IsPostBack Then Dim dl As DropDownList = DirectCast(C1Window1.FindControl("DropDownList1"), DropDownList) Dim dlc As DropDownList = DirectCast(C1Window1.FindControl("DropDownList2"), DropDownList) Dim tb As TextBox = DirectCast(C1Window1.FindControl("TextBox1"), TextBox)

If dl.Text <> "-" AndAlso (dlc.Text <> "-" OrElse tb.Text <> "") Then

68

Dim text As String = "You selected " If dlc.Text <> "-" Then text += dlc.Text Else text += tb.Text End If text += ", " + dl.Text Label2.Text = text End If Else Label2.Text = "" End If

C#HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID);if (this.IsPostBack){

DropDownList dl = (DropDownList)C1Window1.FindControl("DropDownList1");

DropDownList dlc = (DropDownList)C1Window1.FindControl("DropDownList2");

TextBox tb = (TextBox)C1Window1.FindControl("TextBox1");

if (dl.Text != "-" && (dlc.Text != "-" || tb.Text != "")){

string text = "You selected ";if (dlc.Text != "-"){

text += dlc.Text;}else{

text += tb.Text;}text += ", " + dl.Text;Label2.Text = text;

}}else{

Label2.Text = "";}

10. Add the following SelectedIndexChanged event to your code:

Visual BasicProtected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Dim l As Label = DirectCast(C1Window1.FindControl("Label1"), Label) Dim dl As DropDownList = DirectCast(C1Window1.FindControl("DropDownList1"), DropDownList) Dim dlc As DropDownList = DirectCast(C1Window1.FindControl("DropDownList2"), DropDownList) dlc.Items.Clear() dlc.Items.Add(New ListItem("-")) If dl.Text <> "-" Then l.Text = "Select a city in " + dl.Text

69

Select Case dl.Text Case "UK" dlc.Items.Add(New ListItem("London")) dlc.Items.Add(New ListItem("Birmingham")) dlc.Items.Add(New ListItem("Leeds")) dlc.Items.Add(New ListItem("Glasgow")) dlc.Items.Add(New ListItem("Glasgow")) dlc.Items.Add(New ListItem("Sheffield")) dlc.Items.Add(New ListItem("Bradford")) dlc.Items.Add(New ListItem("Edinburgh")) dlc.Items.Add(New ListItem("Liverpool")) Exit Select Case "USA" dlc.Items.Add(New ListItem("New York, New York")) dlc.Items.Add(New ListItem("Los Angeles, California")) dlc.Items.Add(New ListItem("Chicago, Illinois")) dlc.Items.Add(New ListItem("Houston, Texas")) dlc.Items.Add(New ListItem("Philadelphia, Pennsylvania")) dlc.Items.Add(New ListItem("Phoenix, Arizona")) dlc.Items.Add(New ListItem("San Diego, California")) dlc.Items.Add(New ListItem("Dallas, Texas")) dlc.Items.Add(New ListItem("Detroit, Michigan")) Exit Select Case "Russia" dlc.Items.Add(New ListItem("Moscow")) dlc.Items.Add(New ListItem("Chelyabinsk")) dlc.Items.Add(New ListItem("Ekaterinburg")) dlc.Items.Add(New ListItem("Irkutsk")) dlc.Items.Add(New ListItem("St. Petersburg")) dlc.Items.Add(New ListItem("Volgograd")) dlc.Items.Add(New ListItem("Petrozavodsk")) dlc.Items.Add(New ListItem("Nizhni Novgorod")) dlc.Items.Add(New ListItem("Novosibirsk")) Exit Select Case "Canada" dlc.Items.Add(New ListItem("Toronto, Ontario")) dlc.Items.Add(New ListItem("Montreal, Quebec")) dlc.Items.Add(New ListItem("Vancouver, British Columbia")) dlc.Items.Add(New ListItem("Calgary, Alberta")) dlc.Items.Add(New ListItem("Edmonton, Alberta")) dlc.Items.Add(New ListItem("Ottawa - Gatineau, Ontario/Quebec")) Exit Select Case Else Exit Select End Select End IfEnd Sub

C#protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){

Label l = (Label)C1Window1.FindControl("Label1");

70

DropDownList dl = (DropDownList)C1Window1.FindControl("DropDownList1");

DropDownList dlc = (DropDownList)C1Window1.FindControl("DropDownList2");

dlc.Items.Clear();dlc.Items.Add(new ListItem("-"));if (dl.Text != "-"){

l.Text = "Select a city in " + dl.Text;switch (dl.Text) {

case "UK":dlc.Items.Add(new ListItem("London"));dlc.Items.Add(new ListItem("Birmingham"));dlc.Items.Add(new ListItem("Leeds"));dlc.Items.Add(new ListItem("Glasgow"));dlc.Items.Add(new ListItem("Glasgow"));dlc.Items.Add(new ListItem("Sheffield"));dlc.Items.Add(new ListItem("Bradford"));dlc.Items.Add(new ListItem("Edinburgh"));dlc.Items.Add(new ListItem("Liverpool"));break;

case "USA":dlc.Items.Add(new ListItem("New York, New York"));dlc.Items.Add(new ListItem("Los Angeles,

California"));dlc.Items.Add(new ListItem("Chicago, Illinois"));dlc.Items.Add(new ListItem("Houston, Texas"));dlc.Items.Add(new ListItem("Philadelphia,

Pennsylvania"));dlc.Items.Add(new ListItem("Phoenix, Arizona"));dlc.Items.Add(new ListItem("San Diego,

California"));dlc.Items.Add(new ListItem("Dallas, Texas"));dlc.Items.Add(new ListItem("Detroit, Michigan"));break;

case "Russia":dlc.Items.Add(new ListItem("Moscow"));dlc.Items.Add(new ListItem("Chelyabinsk"));dlc.Items.Add(new ListItem("Ekaterinburg"));dlc.Items.Add(new ListItem("Irkutsk"));dlc.Items.Add(new ListItem("St. Petersburg"));dlc.Items.Add(new ListItem("Volgograd"));dlc.Items.Add(new ListItem("Petrozavodsk"));dlc.Items.Add(new ListItem("Nizhni Novgorod"));dlc.Items.Add(new ListItem("Novosibirsk"));break;

case "Canada":dlc.Items.Add(new ListItem("Toronto, Ontario"));dlc.Items.Add(new ListItem("Montreal, Quebec"));dlc.Items.Add(new ListItem("Vancouver, British

Columbia"));dlc.Items.Add(new ListItem("Calgary, Alberta"));dlc.Items.Add(new ListItem("Edmonton, Alberta"));

71

dlc.Items.Add(new ListItem("Ottawa - Gatineau, Ontario/Quebec"));

break;

default:break;

}}

}

11. Switch to the Source view and add the following JavaScript code just after the Hyperlink tag, so that clicking the hyperlink will open the dialog window:<script type="text/javascript"> var form_dialog; function openWindow(C1Window1) { form_dialog = C1Window1.control; C1Window1.control.show(); }</script>


Run the program and complete the following steps:

1. Click on the Show Location link to open the dialog window.

2. Select a country from the first drop-down list.

Notice that the next drop-down list of selectable cities within that country is refreshed from the server.

3. Select a city from the second drop-down list and click OK.

The name of the city you select is reflected on the Web page.

72

Customizing the Caption BarThe following topics detail how you can customize the C1Window caption bar simply and easily by hiding captionbar buttons and customizing the content and appearance of the caption bar

Hiding Caption Bar Buttons

By default the C1Window control displays the Minimize, Maximize, and Close buttons. Hiding these buttons is simple and can be done in either the designer or in code.

In Source View

To hide the Minimize, Maximize, and Close buttons add text to the <CaptionButtons> tag so it appears similar to the following:

<CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="False" /> <Icon Visible="True" /> <MaximizeButton Visible="False" /> <MinimizeButton Visible="False" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /></CaptionButtons>

In Design View

To hide the Minimize, Maximize, and Close buttons in the designer, navigate to the Properties window and complete the following steps:

Set the MinimizeButton.Visible property to False.

Set the MaximizeButton.Visible property to False.

Set the CloseButton.Visible property to False.

In Code

To hide the Minimize, Maximize, and Close buttons, add the following code to the Page_Load event:

Visual BasicC1Window1.CaptionButtons.MinimizeButton.Visible = False

73

C1Window1.CaptionButtons.MaximizeButton.Visible = FalseC1Window1.CaptionButtons.CloseButton.Visible = False

C#C1Window1.CaptionButtons.MinimizeButton.Visible = false;C1Window1.CaptionButtons.MaximizeButton.Visible = false;C1Window1.CaptionButtons.CloseButton.Visible = false;

Setting the Caption Bar Title

You can set a title to appear at the top of a C1Window dialog window in the caption bar. The title can indicate the content of the dialog window or give context to the content. Adding a title can also make minimized dialog windows easier to identify. You can easily set the title in Source view, in Design view, or in code using the Textproperty.

In Source View

To add a title to the caption bar add Text="" to the <cc1:Window> tag so it appears similar to the following:<cc1:C1Window ID="C1Window1" runat="server" Text="Hello World!"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

To add a title to the caption bar using the designer, navigate to the Properties window and set the Text property tothe title:

In Code

To add a title to the caption bar, add the following code to the Page_Load event:

Visual BasicC1Window1.Text = "Hello World!"

C#C1Window1.Text = "Hello World!";

74

Setting the Caption Bar Icon

You can set an image that will appear in the upper left corner of the dialog window's caption bar. This icon image can indicate a window's contents or be used to differentiate dialog windows; this is particularly useful when the dialog window is minimized. Setting this icon image is simple using styles. In the following steps you'll set the control's theme and add a style to override the icon element in that theme.

Complete the following steps to add an icon to the caption bar:

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

2. Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True:


3. In the C1Window Tasks menu click on the VisualStyle drop-down box and select Vista.

4. Select Website | Add Existing Item. The Add Existing Item dialog box will open.

5. Locate the image you wish to add to the caption bar and select Add to add it to the project.

Note that in this example, the following image was used:

Image Name Size

mail.gif 16 x 12 pixels

You can add your own image, or use the one above. To use the above image, right-click the image in the table above and select Copy. Paste the image into a paint program of your choice and save it with the name and dimensions indicated above.

6. Switch to source view and add the following <style> tag between the <head> and </head> tags at the top of the page:

<style>.C1Window_Vista .C1Heading .C1Icon{ float:left; height:12px; margin-right:3px; margin-top:20px; width:16px; background: transparent url('mail.gif') no-repeat;}</style>

Replace mail.gif in the above with the name of your image, if different. This style will override the default icon image (none) in the Vista style.

7. Run your application. The dialog window appears with an icon in the caption bar:

75

Customizing the Status BarThe following topics detail how you can customize the C1Window status bar simply and easily by hiding status and customizing the content and appearance of the status bar

Showing the Status Bar

By default the C1Window control does not display a status bar at the bottom of the control. You can easily add the status bar in source markup, the designer, or in code using the StatusVisible property.

In Source View

To show the status bar add StatusVisible="True" to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" StatusVisible="True"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

To show the status bar using the designer, navigate to the Properties window and set the StatusVisible property to True.

In Code

To show the status bar, add the following code to the Page_Load event:

Visual BasicC1Window1.StatusVisible = True

C#C1Window1.StatusVisible = true;

Setting the Status Bar Content

Adding text to the status bar is a simple as clicking in the C1Window status bar area and typing. In this topic you'll add a drop-down box to the dialog window's status bar that will change the content of the dialog window.

To customize the status bar, complete the following steps:

76

1. Navigate to the Visual Studio Toolbox and add the C1Window control to your page, and resize the control.



3. In the C1Window Tasks menu click the VisualStyle drop-down arrow and select Office2007Blue.

4. Select the C1Window control and set the following in the Properties window:

Set the Width property to 325.

Set the Height property to 200.

Set the Text property to "Search!".

Set the ContentUrl property to "http://www.yahoo.com".

5. Click once in the status bar of the dialog window and type "Go to: ".

6. Switch to Source view and notice that the text you just added is enclosed in the <StatusTemplate>tag.

7. Add a drop-down list to the <StatusTemplate> tag so that it appears like the following:<StatusTemplate> Go to: <asp:DropDownList ID="searchSites" runat="server" onchange="ddlChange(this)"> <asp:ListItem Value="http://www.yahoo.com/" Selected="True">Yahoo!</asp:ListItem> <asp:ListItem Value="http://www.google.com/">Google</asp:ListItem> <asp:ListItem Value="http://www.wikipedia.com/">Wikipedia</asp:ListItem> </asp:DropDownList></StatusTemplate>

8. Add the following script between the <head> and </head> tags of your page:<script id="c1d_script" type="text/javascript"> function ddlChange(sender) { var option = sender.options[sender.selectedIndex]; $get("<%= C1Window1.ClientID %>").control.setUrl(option.value); }</script>

9. Switch to Design view and note that your page now looks similar to the following:

77

Run your application and observe:

The dialog window appears with the drop-down list in the status bar; select a Web site from the list and observe that the dialog window loads that Web site:

Setting the Loading Image

By default, an image appears in the status bar while the content of the dialog window is loading. By default this loading image is set to a spinner image. You can set the image used as a spinner using styles. Note that to complete the steps in this topic you should have a small animated image available to replace the default spinner image.

To customize the loading image, complete the following steps:

1. Navigate to the Visual Studio Toolbox and double-click the C1Window icon to add the control to your page.

2. Resize the C1Window control on the page.


78


4. In the C1Window Tasks menu click on the VisuaStyle drop-down arrow and select Office2007Silver.

5. To add content to be loaded, navigate to the Properties window and set the ContentUrl property to a Web site, for example "http://labs.componentone.com/".

6. In the Website menu select Add Existing Item.

7. Locate your image file and then click OK to add it to the project.

Note that in this example the following image was used:

Image Name

spinner.gif

8. Add the following <style> tag to the <head> tag on your page, so that it looks like the following:<head runat="server">...<style>.C1Window_Office2007Silver .C1ContentPanel .C1Spinner{ height:16px; width:16px; background:url('spinner.gif') no-repeat; float:left; margin: 4px 0 0 5px;}</style></head>

Replace "spinner.gif" above with the name of your image. For more about styles, see the Styles (page 33)topic.


The dialog window appears with your spinner image in the status bar when the window's content is being loaded:

79

Customizing the Dialog WindowYou have full control over the initial size and location of the dialog window and the user's ability to resize, reposition, and minimize the dialog window. The following topics describe how customizing the dialog window is as simple as setting a few properties.

Showing the Dialog Window on Page Load

By default the C1Window control is not shown on page load. You can set a dialog window to show on page load by setting the ShowOnLoad property to True in Source view, Design view, or in code.

In Source View

To set the ShowOnLoad property to True add ShowOnLoad="True" to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" ShowOnLoad="True"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In the Properties Window

Select the dialog window and in the Properties window set the ShowOnLoad property to True.

In the C1Window Tasks Menu

Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True:

80

In Code

To set a dialog window to show on page load, add the following code to your project:

Visual BasicC1Window1.ShowOnLoad = True

C#C1Window1.ShowOnLoad = true;

Adding Keyboard Support

The C1Window control lets you easily add keyboard accessibility to the control. You can use the C1Window.AccessKey property to set how the user navigates to the dialog windows and through your user interface.

In the following examples you'll set the C1Window.AccessKey property to w so that pressing the ALT+W key combination at run time brings the C1Window control into focus.

In Source View

In Source view add AccessKey="w" to the <cc1:C1Window> tag so it appears similar to the following:<cc1:C1Window ID="C1Window1" runat="server" AccessKey="w"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" />

<MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

In Design view select the C1Window control and in the Properties window set the C1Window.AccessKeyproperty to w.

In Code

Add the following code to the Page_Load event to set the C1Window.AccessKey property to w:

Visual BasicMe.C1Window1.AccessKey = "w"

C#this.C1Window1.AccessKey = "w";

Preventing Window Resizing

By default users can resize the dialog window at run time, but you can prevent users from doing so by using the AllowResize property. You can set the AllowResize property in Source view, Design view, or in code.

In Source View

81

To prevent users from resizing the C1Window dialog window add AllowResize="False" to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" AllowResize="False"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

To prevent users from resizing the C1Window dialog window navigate to the Properties window and set the AllowResize property to False.

In Code

To allow users to resize the C1Window dialog window in code, add the following code to your project:

Visual BasicC1Window1.AllowResize = False

C#C1Window1.AllowResize = false;

This topic illustrates:

After setting the AllowResize property to True, run the application and observe that you can no longer resize the dialog window at run time by dragging the bottom right corner of the dialog window.

Preventing Window Repositioning

By default users can reposition the dialog window at run time through a drag-and-drop operation. If you do not want users to be able to move the dialog window you can prevent this in Source view, Design view, or in code by setting the AllowMove property.

In Source View

To prevent users from repositioning the C1Window dialog window add AllowMove="False" to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" AllowMove="False"> <CaptionButtons>

82

<CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

To prevent users from repositioning the C1Window dialog window navigate to the Properties window and set AllowMove to False.

In Code

To prevent users from repositioning the C1Window dialog window in code, add the following code to your project:

Visual BasicC1Window1.AllowMove = False

C#C1Window1.AllowMove = false;


Run your application and notice that you cannot reposition the dialog window at run time.

Setting the Window Location

You can control where the dialog window should initially appear through the StartPosition property. You can set the StartPosition property to ByDefault, Page, Parent, Manual, or OffSet. The default position for the dialog window is in the upper left corner of the Web page and by setting the StartPosition property to Manualyou can control the exact location of the dialog window. You can easily set the dialog window's location in the designer or in code.

In Source View

To set the initial location of the C1Window dialog window add text to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" StartPosition="Manual" X="200" Y="100"> <CaptionButtons> <CollapseExpandButton Visible="False" />

83

<CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" />

<PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons></cc1:C1Window>

In Design View

To set the initial location of the C1Window dialog window in the designer, complete the following steps:

Select the C1Window control and in the Properties window set the following properties:

Set the StartPosition property to Manual. If the StartPosition property is set to something other than Manual, changes you make to the X and Y properties will not take effect.

Set the X property to 200.

Set the Y property to 100.

The dialog window will initially appear 200 pixels from the left and 100 pixels from the top of the Web page.

In Code

To set the initial location of the C1Window dialog window in code, add the following code to the Page_Loadevent:

Visual BasicC1Window1.StartPosition = C1WindowPosition.ManualC1Window1.X = 200C1Window.Y = 100

C#C1Window1.StartPosition = C1WindowPosition.Manual;C1Window1.X = 200;C1Window1.Y = 100;


Run your application and note that the dialog window initially appears 200 pixels from the left and 100 pixels from the top of the Web page. For information about setting the dialog window's location at run time, see Setting the Dialog Window Location at Run Time (page 98).

Setting the Height and Width

You can adjust the height and width of the C1Window dialog window in the designer or in code.

In Source View

To set the height and width of the C1Window dialog window add text to the <cc1:Window> tag so it appears similar to the following:

<cc1:C1Window ID="C1Window1" runat="server" Height="100px" Width="200px"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons>

84

</cc1:C1Window>

In Design View

To set the height and width of the C1Window dialog window in the designer, simply drag the bottom right corner of the dialog window to set the initial dialog window size:

Or

To set the height and width of the C1Window dialog window in the Properties window, expand the Layout node and enter the Height and Width properties in the Properties window:

In Code

To set the height and width of the C1Window dialog window in code, add the following code to the Page_Loadevent:

Visual Basic' Set the dimensions of the dialog window to 100 pixels tall and 200 pixels wide.C1Window1.Height = Unit.Pixel(100)C1Window1.Width = Unit.Pixel(200)

C#// Set the dimensions of the dialog window to 100 pixels tall and 200 pixels wide.C1Window1.Height = Unit.Pixel(100);

85

C1Window1.Width = Unit.Pixel(200);

Using the MinimizeZoneElementID Property

The MinimizeZoneElementId property allows you to indicate a form element used to dock dialog windows. When the dialog windows are docked, they will appear similar to windows docked on a task bar. In the following example, you will create a panel control and three dialog windows that dock within that panel control.

Complete the following steps to create three windows that dock within a panel:

1. From the Toolbox add the following controls to your Web page:

One Panel control

Three C1Window controls

2. For each C1Window control, open the C1Window Tasks menu from its smart tag and click on theVisualStyle drop-down arrow and select the following schemes:

Set the C1Window1 scheme to Office2007Black.

Set the C1Window2 scheme to Office2007Blue.

Set the C1Window3 scheme to Office2007Silver.

3. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to set the size, style, and location of the controls:

Visual Basic' Set Panel1's size and style.Panel1.BorderColor = System.Drawing.Color.DarkBluePanel1.BorderStyle = BorderStyle.DashedPanel1.BorderWidth = 2Panel1.Height = 112Panel1.Width = 115

' Show the dialog windows on page load.C1Window1.ShowOnLoad = TrueC1Window2.ShowOnLoad = TrueC1Window3.ShowOnLoad = True

' Do not show the status bar.C1Window1.StatusVisible = FalseC1Window2.StatusVisible = FalseC1Window3.StatusVisible = False

' Set C1Window1's size and starting position.C1Window1.Height = 135C1Window1.Width = 200C1Window1.StartPosition = C1WindowPosition.ManualC1Window1.X = 100C1Window1.Y = 10


86


C#// Set Panel1's size and style.Panel1.BorderColor = System.Drawing.Color.DarkBlue;Panel1.BorderStyle = BorderStyle.Dashed;Panel1.BorderWidth = 2;Panel1.Height = 112;Panel1.Width = 115;

// Show the dialog windows on page load.C1Window1.ShowOnLoad = true;C1Window2.ShowOnLoad = true;C1Window3.ShowOnLoad = true;

// Do not show the status bar.C1Window1.StatusVisible = false;C1Window2.StatusVisible = false;C1Window3.StatusVisible = false;

// Set C1Window1's size and starting position.C1Window1.Height = 135;C1Window1.Width = 200;C1Window1.StartPosition = C1WindowPosition.Manual;C1Window1.X = 100;C1Window1.Y = 10;

// Set C1Window2's size and starting position.C1Window2.Height = 135;C1Window2.Width = 200;C1Window2.StartPosition = C1WindowPosition.Manual;C1Window2.X = 125;C1Window2.Y = 35;

// Set C1Window3's size and starting position.C1Window3.Height = 135; C1Window3.Width = 200;C1Window3.StartPosition = C1WindowPosition.Manual;C1Window3.X = 150;C1Window3.Y = 60;

4. Add the following code to set the MinimizeZoneElementId property for the C1Window controls:

Visual Basic' Set the MinimizeZoneElementId for each dialog window.C1Window1.MinimizeZoneElementId = "Panel1"C1Window2.MinimizeZoneElementId = "Panel1"C1Window3.MinimizeZoneElementId = "Panel1"

C#// Set the MinimizeZoneElementId for each dialog window.C1Window1.MinimizeZoneElementId = "Panel1";

87

C1Window2.MinimizeZoneElementId = "Panel1";C1Window3.MinimizeZoneElementId = "Panel1";


Run the program. The Web page will appear similar to the following:

Minimize the dialog windows. When minimized, the dialog windows appear docked within the panel control:

Programming TasksThe following topics detail how you can create modeless and modal dialog windows programmatically. For more information about modeless and modal dialog windows, see Modal and Modeless Dialog Windows (page 26).

Creating a Modeless Dialog Window in Code

This topic details how to create a modeless dialog window in code. For more information about modeless dialog windows see the topic, Modeless Dialog Windows (page 27).

Complete the following steps to create a modeless C1Window in code:

1. Add a reference to the C1.Web.UI.Controls.2.dll file in your project.

2. Navigate to the Toolbox and double-click the PlaceHolder icon to add the control to your page.

3. Switch to Source view and add the following JavaScript just above the opening <html> tag to get and show the modeless dialog window:

<script type="text/javascript"> var form_dialog; function openWindow(dialog) { form_dialog = dialog.control; form_dialog.show();

88

}</script>

4. Return to Design View and double-click the page to switch to Code view and create the Page_Load event.

5. Add the following at the top of the page to import the C1.Web.UI.Controls.C1Window namespace:

Visual BasicImports C1.Web.UI.Controls.C1Window

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

6. In the Page_Load event add the following code to create the content, style, and general appearance for the modeless dialog window:

Visual Basic'Create a hyperlink and add it to the page's controls.Dim hyprlnk As HyperLink = New HyperLinkhyprlnk.Text = "Show Modeless Dialog Window"Page.Controls.Add(hyprlnk)

' Create a new C1Window control and add it to the page's controls.Dim dialog As C1Window = New C1WindowPlaceHolder1.Controls.Add(dialog)

' Set the dialog window's caption bar content.dialog.Text = " Information"dialog.CaptionButtons.MaximizeButton.Visible = Falsedialog.CaptionButtons.MinimizeButton.Visible = Falsedialog.StatusVisible = False

' Set the dialog window's initial position.dialog.StartPosition = C1WindowPosition.Manualdialog.X = 50dialog.Y = 50

' Set the dialog window's initial size.dialog.Width = Unit.Pixel(250)dialog.Height = Unit.Pixel(150)

' Set the open dialog window handler.hyprlnk.NavigateUrl = String.Format("javascript:openWindow({0});", dialog.ClientID))

C#//Create a hyperlink and add it to the page's controls.HyperLink hyprlnk = new HyperLink();hyprlnk.Text = "Show Modeless Dialog Window";Page.Controls.Add(hyprlnk);

// Create a new C1Window control and add it to the page's controls.C1Window dialog = new C1Window();PlaceHolder1.Controls.Add(dialog);

// Set the dialog window's caption bar content.dialog.Text = " Information";dialog.CaptionButtons.MaximizeButton.Visible = false;dialog.CaptionButtons.MinimizeButton.Visible = false;dialog.StatusVisible = false;

89

// Set dialog window's initial position.dialog.StartPosition = C1WindowPosition.Manual;dialog.X = 50;dialog.Y = 50;

// Set dialog window's initial size.dialog.Width = Unit.Pixel(250);dialog.Height = Unit.Pixel(150);

// Set the open dialog window handler.hyprlnk.NavigateUrl = String.Format("javascript:openWindow({0});", dialog.ClientID);


Run the program and click on the Show Modeless Dialog Window link; the dialog window will appear similar to the following:

Creating a Modal Dialog Window in Code

This topic details how to create a modal dialog window in code. A modal dialog window is a dialog window that must be closed before the user can continue working with the application. For more information about modal dialog windows see the topic, Modal Dialog Windows (page 27).

Complete the following steps to create a modal dialog window:

1. Add a reference to the C1.Web.UI.Controls.2.dll file in your project.

2. Navigate to the Toolbox and double-click the PlaceHolder icon to add the control to your page.

3. Switch to Source view and add the following JavaScript just before the opening <html> tag to get and show the modal dialog window:

<script type="text/javascript"> var form_dialog; function showModalDialog(dialog) { form_dialog = dialog.control; dialog.control.showModal(dialog); }</script>

4. Return to Design View and double-click the page to switch to Code view and create the Page_Load event.

5. Add the following at the top of the page to import the C1.Web.UI.Controls.C1Window namespace:

Visual Basic

90

Imports C1.Web.UI.Controls.C1Window

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

6. In the Page_Load procedure add the following code to create the content, style, and general appearance for the modal dialog window:

Visual Basic' Create two hyperlinks and add them to the page's controls.Dim link1 As HyperLink = New HyperLinklink1.Text = "Show Modal Dialog Window <BR/>"Page.Controls.Add(link1)Dim link2 As HyperLink = New HyperLinklink2.Text = " Navigate Away"Page.Controls.Add(link2)

' Create a new C1Window control and add it to the page's controls.Dim dialog As C1Window = New C1WindowPlaceHolder1.Controls.Add(dialog)dialog.VisualStyle = "Vista"

' Set caption bar content.dialog.Text = " Modal Dialog Window"dialog.CaptionButtons.MaximizeButton.Visible = Falsedialog.CaptionButtons.MinimizeButton.Visible = Falsedialog.StatusVisible = False

' Set initial position.dialog.StartPosition = C1WindowPosition.Manualdialog.X = 10dialog.Y = 60

' Set initial size.dialog.Width = Unit.Pixel(250)dialog.Height = Unit.Pixel(150)

' Set the hyperlink navigation.link1.NavigateUrl = String.Format("javascript:showModalDialog({0});", dialog.ClientID)link2.NavigateUrl = "http://www.componentone.com"

C#// Create two hyperlinks and add them to the page's controls.Hyperlink link1 = new HyperLink;link1.Text = "Show Modal Dialog Window <BR/>";Page.Controls.Add(link1);Hyperlink link2 = new HyperLink;link2.Text = " Navigate Away";Page.Controls.Add(link2);

// Create a new C1Window control and add it to the page's controls.C1Window dialog = new C1Window();PlaceHolder1.Controls.Add(dialog);dialog.VisualStyle = "Vista";

' Set caption bar content.dialog.Text = " Modal Dialog Window";

91

dialog.CaptionButtons.MaximizeButton.Visible = false;dialog.CaptionButtons.MinimizeButton.Visible = false;dialog.StatusVisible = false;

// Set initial position.dialog.StartPosition = C1WindowPosition.Manual;dialog.X = 10;dialog.Y = 60;

// Set initial size.dialog.Width = Unit.Pixel(250);dialog.Height = Unit.Pixel(150);

// Set the hyperlink navigation.link1.NavigateUrl = String.Format("javascript:showModalDialog({0});", dialog.ClientID);link2.NavigateUrl = "http://www.componentone.com";


Run the program and click on the Show Modal Window link; the dialog window will appear on the Web page similar to the following:

Attempt to click the Navigate Away link. Notice that you cannot click the link or interact with elements on the page unless you close the dialog window.

Setting the ChildrenAsTriggers Property

The ChildrenAsTriggers property sets the ChildrenAsTriggers of the embedded UpdatePanels. When the ChildrenAsTriggers property of C1Window is set to True, the ChildrenAsTriggers of the UpdatePanels is set to True and UpdateMode is set to Always. If the C1Window's ChildrenAsTriggers property is set to False, the ChildrenAsTriggers of the UpdatePanels is set to False and UpdateMode is set to Conditionalautomatically.

The following steps provide an example of using the ChildrenAsTriggers property:

1. Add the following markup to the aspx page:

Markup to Add<c1controls:C1Window id="C1Window1" height="155" runat="server"

92

startposition="Manual" width="503" ShowOnLoad="true" ChildrenAsTriggers="true"> <CaptionButtons> <CollapseExpandButton Visible="true" /> <PinButton Visible="true" /> <ReloadButton Visible="true" /> </CaptionButtons> <ContentTemplate> <asp:Label ID="lblContent" runat="server" /> <asp:Button ID="btnPostBack" runat="server" Text="PostBackFromC1Window" OnClick="C1Window1ChildrenPostBack" /> </ContentTemplate> <StatusTemplate> <asp:Label ID="lblStatus" runat="server" /> </StatusTemplate> </c1controls:C1Window>

2. Switch to Code view and implement the ChildrenPostBack method to handle the button click event.

C#protected void C1Window1ChildrenPostBack(object sender, EventArgs e){ lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now;}

3. Run the project and at run time, click on the button within the C1Window control. Notice that both labels in the content and status areas are updated. This is because you set ChildrenAsTriggers to True.

4. Return to the project and set the ChildrenAsTriggers to False. Run the application again and notice that label text will not be updated on clicking the button at run time.

5. Add the following code to explicitly update content update panel in ChildrenPostBack:

C#protected void C1Window1ChildrenPostBack(object sender, EventArgs e){ lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now;(C1Window1.FindControl("c1contentupdatepanel") as UpdatePanel).Update();}

6. Run the project and notice that the content of the label is updated when the button is clicked.

7. Add the following code to update the status label:

C#protected void C1Window1ChildrenPostBack(object sender, EventArgs e){ lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now;(C1Window1.FindControl("c1contentupdatepanel") as UpdatePanel).Update();(C1Window1.FindControl("c1statusupdatepanel") as UpdatePanel).Update();}

93

Client-Side TasksThe following topics detail how you make changes to the dialog window at run time. By using Window for ASP.NET AJAX's client-side code, you can implement many features to your Web page without the need to send information to the Web server which takes time. Thus, using client-side code can increase the efficiency of your Web site. For more information, see the Working with Client-Side Script (page 53) topic.

Setting the ContentURL Property at Run Time

In C1Window you can include external content in a dialog window. This means that you can have the content of another Web page in your project appear in your website or event the content of a Web site outside of your project. Pointing to external content is simple using the ContentURL property.

To change the dialog window's ContentURL property at run time, call the set_contentURL method on the client side to get and set the content of the dialog window. To set the ContentURL in design time or in code instead, see Showing External Content in the Content Area (page 59).

Complete the following steps to set the ContentURL property on the client side:


2. Click on the Source tab to switch to the .aspx code. Note that the code in the body of the page lookssimilar to the following:<body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:C1Window ID="C1Window1" runat="server"> </cc1:C1Window> </div> </form></body>

3. To customize the location and size of the dialog window, add text to the <cc1:C1Window> tag so it looks like the following:

<cc1:C1Window ID="C1Window1" runat="server" Height="250px" Width="375px" ShowOnLoad="True" StartPosition="Manual" X="10" Y="80">

This sets the ShowOnLoad property to True, the Width property to 375px, the Height property to 225px, the StartPosition property to Manual, the X property to 10, and the Y property to 80.

4. Enter the following code after the </cc1:C1Window> tag to create a text box and a button to get and set the content of the dialog window:

<br /><input id="TxtUrl" type="text" value="http://www.componentone.com" /><input id="button1" type="button" value="Set ContentUrl" onclick="dialog.setUrl(document.getElementById('TxtUrl').value)" />

5. Click on the Design tab to switch to design view. Notice that the size of the dialog window reflects the changes you just made.

6. Click the control's smart tag ( ) to open the C1Window Tasks menu.

7. In the C1Window Tasks menu, click on the VisuaStyle drop-down arrow and select Office2007Black.

8. Double-click the page to switch to the Code view and create the Page_Load event handler.

9. Add the following code to the Page_Load event handler to initialize the C1Window control:

Visual Basic

94

Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))

C#Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)));


1. Run the project and click the Set ContentURL button.

The Web page will appear as follows:

2. Enter a new URL in the text box and click the Set ContentURL button again.

The Web site you have just entered will be loaded into the dialog window.

Adding a New Title to the Caption Bar at Run Time

To change the text on the dialog window's caption bar at run time, call the set_text method on the client side to get and set the input value entered from the text box. In the following example a C1Window dialog window is added to the Web page with a text box to enter a new title in and a button to set the new title.

Complete the following steps to add a new text to the caption bar at run time:


2. Click once on the C1Window control to select it and in the Properties window set the following properties:

Set the ShowOnLoad property to True.


Set the StartPosition property to Manual.

95

Set the X property to 10px.

Set the Y property to 100px.

3. Click on the Source tab to switch to the .aspx code. Notice that the properties you just set are visible within the <cc1:C1Window> tag. The following code should appear in the body of your .aspx file:

<body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:C1Window ID="C1Window1" runat="server" ShowOnLoad="True" StartPosition="Manual" Width="225px" X="10" Y="100"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> </form></body>

4. Enter the following code after the </cc1:C1Window> tag to create text box and button controls to get and set the value of the title for the dialog window:

<br /><strong>Title</strong><br /><input id="TextTitle" type="text" value="New Title" /><input id="bSetTitle" type="button" value="Set Title" onclick="dialog.set_text(document.getElementById('TextTitle').value)"/><br />

Switch to Design view. Note that the elements you added are reflected on your page.

5. Double-click the page to switch to the Code view and create the Page_Load event handler.

6. Add the following code to the Page_Load event:

Visual BasicForm.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))



1. Enter a new title in the text box, for example: "Reminder".

2. Click the Set Title button.

The Web page will appear as follows:

96

Calling the Show and Hide Methods at Run Time

You can use JavaScript to call the Show and Hide methods to show or hide a C1Window dialog window. In the following example, you will add a C1Window control to your page and two buttons: one that will show the dialog window and one that will hide the dialog window when shown.

To call the Show and Hide methods, complete the following steps:

1. Navigate to the Visual Studio Toolbox, and double-click C1Window to add the C1Window control to your page.


3. Click on the VisuaStyle drop-down arrow and select Office2007Blue.

4. Navigate to the Properties window and set the Width property to 210px.

5. Click on the Source tab to switch to the .aspx code. The following code should appear within the <body>tag of your .aspx file:

<body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" Width="210px" X="0" Y="0"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> </form></body>

6. Enter the following code after the </cc1:C1Window> tag to create a button to show the dialog window and another button to hide the dialog window:

97

<br /><strong>Window<br /> </strong><input id="bShow" type="button" value="Show" onclick="dialog.show()" /> <input id="bHide" type="button" value="Hide" onclick="dialog.hide()"/><br /><br />

7. Switch to Design view.

8. Double-click the Web page to switch to Code view and create an event handler for the Load event.

9. Enter the following code in the Page_Load event to initialize the control:




Run the application and observe that when you click the Show button the dialog window appears and when you click the Hide button the dialog window no longer appears.

Resizing the Dialog Window at Run Time

You can easily resize the height and width of the dialog window at run time. In the following steps you'll call the get_style().height and get_style().width methods on the client side to resize the dialog window based on values entered in text boxes. In the following example a C1Window dialog window is added to the Web page with two text boxes to enter height and width values and a button to resize the dialog window.

Complete the following steps to resize the dialog window at run time:

1. In Design view, navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page.

2. Click on the Source tab to switch to the .aspx code.

3. Update the <cc1:C1Window> tag to show the dialog window on page load and set the initial dialog window size and location:

<cc1:C1Window ID="C1Window1" runat="server" Height="100px" ShowOnLoad="True" Width="225px" StartPosition="Manual" X="10" Y="80">

4. Enter the following code just after the </cc1:C1Window> tag to create text box and button controls to set the dialog window height and width:

<strong>Set Dialog Window Height and Width</strong><br/><label>Set Height:</label> <input id="HeightBox" type="text" value="100" style="width:30px"/> <label>Set Width:</label> <input id="WidthBox" type="text" value="225" style="width:30px"/> <input id="resizeButton" runat="server" type="button" value="Resize" onclick="dialog.resize(parseInt(document.getElementById('WidthBox').value), parseInt(document.getElementById('HeightBox').value))" />

5. Switch to Design view.

6. Double-click the form to switch to Code view create the Page_Load event handler.

98




Run the application and observe:

1. Enter new values in the height or width text boxes, for example set the Set Height text box to 100 and the Set Width text box to 100.

2. Click the Resize button.

The dialog window resizes to the entered values:

Setting the Dialog Window Location at Run Time

You can easily change the location of the dialog window at run time. In the following steps you'll call the move(x,y) method on the client side to move the dialog window to a location specified in text boxes. In the following example a C1Window dialog window is added to the Web page with two text boxes to enter the horizontal (X) and vertical (Y) location and a button to move the dialog window.

Complete the following steps to resize the dialog window at run time:

1. Navigate to the Visual Studio Toolbox, and double-click C1Window to add the C1Window control to your page.



3. Click on the VisuaStyle drop-down arrow and select Office2007Silver.

4. Click on the Source tab to switch to the .aspx code.

5. Update the <cc1:C1Window> tag to show the dialog window on page load and set the initial dialog window size and location:

<cc1:C1Window ID="C1Window1" runat="server"VisualStyle="Office2007Silver" VisualStylePath="~/C1WebControls/VisualStyles" Height="175px" ShowOnLoad="True" Width="225px" StartPosition="Manual" X="10" Y="90">

6. Enter the following code after the </cc1:C1Window> tag to create text box and button controls to set the dialog window's horizontal and vertical location:

99

<strong>Set Dialog Window Location</strong><br/><label>Horizontal:</label> <input id="xValue" type="text" value="10" style="width:30px"/> <label>Vertical:</label> <input id="yValue" type="text" value="90" style="width:30px"/> <input id="moveButton" runat="server" type="button" value="Set Location" onclick="dialog.move(parseInt(document.getElementById('xValue').value),parseInt(document.getElementById('yValue').value))"/>

7. Switch to Design view. Notice that the changes you made are now reflected on the page.

8. Double-click the form to switch to Code view and create the Page_Load event handler.




Run the application and observe:

1. Enter new values in the horizontal and vertical text boxes, for example set the Horizontal text box to 100and the Vertical text box to 50.

2. Click the Set Location button.

The dialog window moves to reflect the entered values:

window for asp.net ajax

Documents

protected void c1window1childrenpostback

protected void page load

caption bar iconyou

toggle button styles

improves application performance

c1window tasks menu

users perform actions

traditional dialog box