ComponentOne

GridView for ASP.NET Wijmo

Copyright 1987-2012 GrapeCity, Inc. All rights reserved. ComponentOne, a division of GrapeCity 201 South Highland Avenue, Third Floor Pittsburgh, PA 15206 USA

Internet: Web site: Sales

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

E-mail: [email protected] Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)

Trademarks The ComponentOne product name is a trademark and ComponentOne is a registered trademark of GrapeCity, Inc. All other trademarks used herein are the properties of their respective owners. Warranty ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and handling) to ComponentOne. Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was written. We are not responsible for any errors or omissions. ComponentOnes liability is limited to the amount you pai d for the product. ComponentOne is not liable for any special, consequential, or other damages for any reason. Copying and Distribution While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in seeing that it is used by licensed users only.

This manual was produced using ComponentOne Doc-To-Help.

Table of Contents
ComponentOne GridView for ASP.NET Wijmo Overview .............................................................................1 Help with ComponentOne Studio for ASP.NET Wijmo .............................................................................. 1 Upgrading From GridView for ASP.NET AJAX ......................................................................................... 1 Migrating an Existing Application ................................................................................................... 2 C1BoundField.DataFormatString .................................................................................................... 2 Key Features ................................................................................................................................................3 GridView for ASP.NET Wijmo Quick Start ...................................................................................................5 Step 1 of 3: Binding C1GridView to a DataSource........................................................................................ 5 Step 2 of 3: Customizing the C1GridView Control ....................................................................................... 6 Step 3 of 3: Running the Application ............................................................................................................. 7 Wijmo Top Tips ...........................................................................................................................................9 Design-Time Support ....................................................................................................................................9 C1GridView Smart Tag ............................................................................................................................... 10 C1GridView Context Menu ......................................................................................................................... 11 Property Builder ........................................................................................................................................... 12 General Tab .................................................................................................................................... 13 Columns Tab .................................................................................................................................. 15 Paging Tab...................................................................................................................................... 16 Format Tab ..................................................................................................................................... 18 Grouping Tab ................................................................................................................................. 19 Working with GridView for ASP.NET Wijmo ............................................................................................. 20 Themes ......................................................................................................................................................... 21 Editing Rows................................................................................................................................................ 24 Grouping ...................................................................................................................................................... 24 Setting Grouping Properties at Design Time ................................................................................. 25 Collapsing and Expanding Groups ................................................................................................ 25 Sorting .......................................................................................................................................................... 26 Filtering ........................................................................................................................................................ 27 Paging........................................................................................................................................................... 29

iii

Using AJAX ................................................................................................................................................. 30 GridView for ASP.NET Wijmo Samples ..................................................................................................... 31 GridView for ASP.NET Wijmo Task-Based Help ......................................................................................... 32 Binding the Grid to a Data Source............................................................................................................... 32 Binding the Grid in a Web Site Project .......................................................................................... 32 Binding the Grid in a Web Application Project ............................................................................. 33 Automatically Updating the Data Source ...................................................................................... 33 Using the Property Builder........................................................................................................................... 34 Setting Properties Using the Property Builder ................................................................................ 34 Adding Columns Using the Property Builder ................................................................................ 36 Formatting the Grid's Content ..................................................................................................................... 36 Automatically Sorting Columns ..................................................................................................... 36 Hiding Specified Columns .............................................................................................................. 37 Setting the Footer Text ................................................................................................................... 37 Creating Column Header Bands .................................................................................................... 39 Formatting a Column as Currency ................................................................................................. 41 Adding Controls to a Column...................................................................................................................... 42 Adding Template Columns ............................................................................................................ 42 Binding Template Columns............................................................................................................ 43 Adding CheckBox or ListBox Controls to a Column .................................................................... 45 Adding ComponentOne Input for ASP.NET Wijmo Controls ..................................................... 46 Setting Column Width ................................................................................................................................. 48 Merging Rows .............................................................................................................................................. 49 Creating a Pageable Grid ............................................................................................................................. 50 Creating a Scrollable Grid ............................................................................................................................ 51 Getting a Value from a Cell ......................................................................................................................... 52 Updating the Grid with AJAX..................................................................................................................... 52 Moving Columns ............................................................................................................................ 53 Editing a Record ............................................................................................................................. 53 Paging the Grid .............................................................................................................................. 54 Selecting a Record .......................................................................................................................... 54 Sorting Columns ............................................................................................................................. 55 Filtering Columns........................................................................................................................... 55 Updating the Grid at Run Time ................................................................................................................... 56 GridView for ASP.NET Wijmo Client-Side Reference .................................................................................. 57

iv

ComponentOne GridView for ASP.NET Wijmo Overview

Display items from a data source in an interactive, fully customizable table with ComponentOne GridView for ASP.NET Wijmo. Interactively select, edit, delete, sort, and group data. Show data across multiple pages making it easy for end-users to page through data. For a list of the latest features added to ComponentOne Studio for ASP.NET Wijmo, visit What's New in Studio for ASP.NET Wijmo.
Getting Started

Get started with the following topics: - Key Features (page 3) - Quick Start (page 5)Task-Based Help (page 32) - Upgrading From GridView for ASP.NET AJAX (page 1)

Help with ComponentOne Studio for ASP.NET Wijmo

Getting Started For information on installing ComponentOne Studio for ASP.NET Wijmo, licensing, technical support, namespaces and creating a project with the control, please visit Getting Started with Studio for ASP.NET Wijmo. What's New For a list of the latest features added to ComponentOne Studio for ASP.NET Wijmo, visit What's New in Studio for ASP.NET Wijmo.

Upgrading From GridView for ASP.NET AJAX

If you're currently a user of the GridView for ASP.NET AJAX product, you may find GridView for ASP.NET Wijmo to both be very familiar and different. This control is a versatile Web grid with some impressive capabilities. The following topics detail the migration process for GridView for ASP.NET Wijmo. Prerequisites There are two prerequisites that you will need to get started with the migration: Studio for ASP.NET Wijmo controls. You can download and install these controls from the ComponentOne Web site. To save some time, be sure to select the check boxes during the installation process to add the controls to the Toolbox and install product samples. NorthWind sample database. This sample database will be located in your Documents folder under ComponentOne Samples/Common/C1NWind.mdb.

If you do not have an existing GridView for ASP.NET AJAX project to migrate to GridView for ASP.NET Wijmo, begin by creating one before completing the migration steps. Create a new ASP.NET Web application in Visual Studio and binding it to data following the steps outlined in the ComponentOne GridView for ASP.NET AJAX Quick Start to create a sample C1GridView application.

Migrating an Existing Application

Once you've installed the ASP.NET Wijmo controls and created and opened a sample GridView for ASP.NET AJAX application, you can begin migrating the application to using GridView for ASP.NET Wijmo. Complete the following steps: 1. 2. Add references to GridView for ASP.NET Wijmo. In the Solution Explorer, right-click the project and choose Add Reference. In the Add Reference dialog box, locate and select the C1.Web.Wijmo.Controls.4.dll and C1.Web.UI.4.dll assemblies and click OK. These assemblies re typically installed in the C:/Program Files (x86)/ComponentOne/Studio for ASP.NET Wijmo/bin/v4 folder. You will notice that there are multiple C1.Web.UI assemblies in the installation directory. Each targets a specific framework. In the Solution Explorer, right-click the project and choose Add Reference. In the Add Reference dialog box, locate and select the C1.Web.Wijmo.Controls.Design.4.dll assembly and click OK. This assembly is typically installed in the C:/Program Files (x86)/ComponenOne/Studio for ASP.NET Wijmo/bin/v4/Designer. With the assemblies added to the project, you can now add the Wijmo C1GridView control to the page. 5. 6. 7. Navigate to the Default.aspx page in the Solution Explorer. Right-click the Default.aspx page and select View Designer. In Design View, navigate to the Toolbox and locate the C1GridView Wijmo control. Drag an instance of C1GridView onto the page. Open the C1GridView Tasks menu and set the data source for this C1GridView control to the same data source as the GridView for ASP.NET AJAX control. While in the Tasks menu note the theme drop-down menu. You will notice a change from the C1GridView control's predecessor. There are several new themes that are available for you to utilize. For example, select the Midnight theme. Another feature in the task menu is the ability to save and load layouts to and from your C1GridView control. This new functionality accessible from the Tasks menu will prove useful for larger projects. 8. 9. Select Property builder from the C1GridView Tasks menu. In the Property builder edit the settings to the same settings as the original grid. In the tabs of the C1GridView control's property builder you will set these properties identical to the previous grid.

3. 4.

10. Once the settings have been set in the property builder, click Apply and OK to close the window. 11. Remove the Script Manager from the page. You will need to remove the script manager that you placed onto your page for the Wijmo grid to function properly. Keep in mind that this will effectively render the old grid useless as it needs the Script Manager to function. DO NOT remove your old grid until you have tested the functionality of the new one. Once the new grid has been tested, you may remove the old one. 12. Remove the old C1GridView control from the page. You can follow these steps to convert other applications to using GridView for ASP.NET Wijmo.

C1BoundField.DataFormatString
There is one additional consideration when migrating projects to using GridView for ASP.NET Wijmo. The previous version, Component One GridView for ASP.NET AJAX uses .NET format specifiers to specify the format in which the data in a given column will be displayed. You have the option to select the format of a given column with the DataFormatString property found in the C1GridView Tasks menu. This version, GridView for ASP.NET Wijmo, on the other hand makes use of the JQuery.glob (globalization) format specifiers. These format specifiers offer a huge variety of formatting possibilities across multiple cultures.

Using the JQuery.glob specifiers, you can format the DataFormatString property with a host of different date/time types, currency types and so much more. With JQuery.glob you can accurately format the correct date/time format for a specific culture or language and also accurately translate the headings into a given language. This is a great improvement in C1GridView's formatting possibilities. A comprehensive sample of the JQuery.glob format specifiers can be downloaded from Scott Guthrie's Web site.

Key Features
ComponentOne GridView for ASP.NET Wijmo allows you to interactively select, edit, delete, sort, and group data. ComponentOne GridView for ASP.NET Wijmo includes advanced features that enable developers to build intuitive, professional-looking Web applications quickly and easily: Microsoft GridView Compatibility ComponentOne GridView is fully compatible with Microsoft's GridView control, so you can upgrade existing ASP.NET applications easily and be productive immediately. Filtering GridView supports a built-in data-entry row below the column headers for custom end-user operations such as searching and filtering records. You can easily filter data by enabling the showFilter option.. Custom Grid Formatting Intuitive formatting lets you customize your grids to get the look and functionally you want. Automatically create columns, display borders and gridlines, allow editing, sort data, and much more. Editing Make edits to your data in the grid and save or cancel changes. Row Merging Configure your grid to automatically merge together rows containing the same value. Your end result is a clean, well-organized grid. Embed Input Controls Enhance data entry and interactivity by incorporating Input for ASP.NET Wijmo controls in your grid. Embed the masked editor, date time editor, numeric editor, percent editor, and currency editor into any grid column. Embed Controls and Images Into Any Grid Column Display check boxes, list boxes, buttons, images, and more. Code-free Grid Customization Manage column collection, paging behavior, and edit the grids design without writing any UI code. With GridView's extensive design-time support, adding customized grid functionality to your Web site has never been easier. Automatically Resize Columns and Rows By setting a single property, GridView will automatically size column width and row height when the grid is scrolled to adjust to fit the longest text in a column. You can also enable or disable automatic sizing for specific columns and rows. Bands Column headers can span over multiple columns enabling you to create a hierarchical structure. For example, organize several column subheadings under another, broader column header. Grouping and Aggregates

Configure your grid in outline mode to enable the end-user to collapse and expand the groups by clicking on the group headers. You can also determine whether groups will be initially collapsed or expanded. The grid will display expanded/collapsed icons next to each group header row. Grouped rows can display aggregate data such as counts or sums. Reusable Templates Save and load grid templates to create multiple grids with the same look and feel throughout a project and across projects. Theming With just a click of the SmartTag, change the GridView's look by selecting one of the 6 premium themes (Arctic, Midnight, Aristo, Rocket, Cobalt, and Sterling). Optionally, use ThemeRoller from jQuery UI to create a customized theme! CSS Support Use a cascading style sheet (CSS) style to define custom skins. CSS support allows you to match the grid to your organization's standards.

GridView for ASP.NET Wijmo Quick Start

In this quick start you'll explore the functionality of ComponentOne GridView for ASP.NET Wijmo. In the following steps you'll create a simple bound grid application using the C1GridView control. You'll add the C1GridView control to a project, bind the control to a datasource, customize the grid's appearance and behavior, and explore some of the run-time interactions possible with the control.

Step 1 of 3: Binding C1GridView to a DataSource

In this step you'll begin the quick start by creating a new project and adding the C1GridView control to your project. You'll then bind the C1GridView control to a datasource. Note that in this example, you'll be using the Northwind database, C1Nwind.mdb, installed by default in the ComponentOne Samples\Common folder installed in your MyDocuments folder (Documents in Vista). Complete the following steps to begin: 1. 2. From the Visual Studio File menu select New Project. The New Project dialog box will appear. In the New Project dialog box expand a language in the left-hand pane and select Web. In the right pane, choose ASP.NET Empty Web Application, enter a Name for your application, and select OK. A new application will be created. In the Solution Explorer, right-click the project and choose Add Reference. In the Add Reference dialog box, locate and select the C1.Web.Wijmo.Controls and C1.Web.Wijmo.Controls.Design assemblies and click OK. The references will be added. Right-click the project in the Solution Explorer and from the context menu choose Add New Item. In the Add New Item dialog box choose Web Form from the list of templates, name the item "Default.aspx", and click Add. The new page should open. In the Solution Explorer, right click the project name and choose Add | New Folder. Name the new folder "App_Data". Navigate to the Visual Studio Toolbox and double-click the C1GridView icon to add the control to your project. In the Solution Explorer window, right-click the App_Data folder and select Add Existing Item in the context menu.

3. 4. 5. 6. 7. 8. 9.

10. In the Add Existing Item dialog box, navigate to where the Northwind database is located, by default in the samples directory, select C1Nwind.mdb, and click Add to close the dialog box and add the file to your project. 11. Click the C1GridView control's smart tag to open the C1GridView Tasks menu. 12. Click the Choose Data Source drop-down arrow, and select <New data source>: The Data Source Configuration Wizard will open. 13. Configure your data source by completing the following steps: In Visual Studio 2012: a. On the Choose a Data Source Type screen, select Database, leave the default ID entered, and click OK.

b. c.

On the Choose Your Data Connection screen, click the drop-down arrow and select the C1NWind.mdb database. Click Next to continue.

d. Click Next on the next screen to use the default connection string. In previous versions of Visual Studio: a. b. c. On the Choose a Data Source Type screen, select Access Database. Leave the default ID entered, and click OK. On the Choose a Database screen, click the Browse button to locate a database. In the Select Microsoft Access Database dialog box, click the App_Data folder in the Project folders list, select the C1Nwind.mdb file in the Contents of folder pane, and click OK. The Nwind.mdb database should now be listed on the Choose a Database screen.

d. Click Next to continue. 14. On the Configure the Select Statement screen, confirm that the Specify columns from a table or view radio button is selected, under Name choose Products from the drop-down list, and in the Columns pane choose the asterisk (*) check box to select all the columns. Click Next to continue. 15. You can test the query on the Test Query page, and select Finish to close the wizard and complete binding the grid. Note that the grid columns now reflect the datasource. That's all you need to do to create a simple grid application! The grid is now bound Northwind database. If you run your project now, you'll have a fully-functional grid application where you can interact with data in a tabular form and you'll be able to access and interact with the data from the Products table of the database. In the next steps of this quick start you'll customize the grid's appearance and behavior and explore the grid's run-time interactions.

Step 2 of 3: Customizing the C1GridView Control

In the previous step of the quick start you created a simple grid application and bound the grid to a datasource. In this step you'll customize the initial grid application further by changing the grid's appearance and behavior settings. Complete the following steps to continue: 1. 2. 3. 4. 5. 6. 7. 8. Click once on the C1GridView control to select it and navigate to the Properties window. Click the drop-down arrow next to the Theme property and select arctic in the list of themes. For more information, see the Themes (page 21) topic. Click the C1GridView control's smart tag, and in the C1GridView Tasks menu, select Property builder. The C1GridView Properties dialog box will open. On the General tab, select the Allow sorting check box. Under Client-side select the Allow column moving check box. Click the Paging tab, and click the Allow paging check box. Note that, by default, Bottom is selected for the position of the navigation, and the Numeric mode is selected. Click the Columns tab in the C1GridView Properties dialog box. Here you can add and remove columns and change column settings. In the Selected columns list, choose any columns you wish to remove and press the button. For example, remove the ProductID, SupplierID, CategoryID, UnitsOnOrder, and ReorderLevel columns. Click Apply to apply your changes, and click OK to close the C1GridView Properties dialog box.

You've now completed binding the C1GridView control and customizing the grid's appearance and behavior settings. In the next, and final, step you'll run your application to observe the changes you made.

Step 3 of 3: Running the Application

In the previous steps of the quick start you created a simple grid application, bound the grid to a datasource, and customized the grid's appearance and behavior. In this step you'll run the grid application and explore some of the run-time interactions possible with the C1GridView control. Complete the following steps to continue: 1. In Visual Studio, select Debug | Start Debugging to run your application. The grid will look similar to the following at run time:

2. 3. 4.

Sort a column, by clicking in a column's header. In the following image. Move a column by clicking on a column header once and dragging it to another location in the grid's header. Page forward in the grid, by clicking once on a number page indicator at the bottom of the grid.

Congratulations! You've completed the C1GridView quick start. If you'd like to continue exploring GridView for ASP.NET Wijmo, see the GridView for ASP.NET Wijmo Samples (page 31) and take a look at the GridView for ASP.NET Wijmo Task-Based Help (page 32) topics.

Wijmo Top Tips

The following tips may help you troubleshoot when working with Studio for ASP.NET Wijmo. Tip 1: Prevent poor page rendering in quirks mode by editing the meta tag to fix rendering. If a user's browser is rendering a page in quirks mode, widgets and controls may not appear correctly on the page. This is indicated by a broken page icon in the address bar. In Compatibility View, the browser uses an older rendering engine.

Users can set this view that causes the issue. To prevent rendering in quirks mode, you can force the page to render with the latest browser. Add the following meta tag to the header of the page: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Design-Time Support
GridView for ASP.NET Wijmo provides visual editing to make it easier to create a grid application. The following sections describe how to use C1GridView's design-time environment to configure the C1GridView control: Tasks Menu A smart tag represents a shortcut tasks menu that provides the most commonly used properties in each control. You can invoke each control's tasks menu by clicking on the smart tag ( ) in the upper-right corner of the control. For more information on how to use the smart tag in C1GridView, see C1GridView Smart Tag (page 10). Context Menu The context menu represents a shortcut menu that provides common Visual Studio commands, as well as commands specific to the C1GridView control. You can display the C1GridView context menu by right-clicking anywhere on the grid. For more information on how to use the context menu in C1GridView, see C1GridView Context Menu (page 11). Property Builder Quickly customize the appearance and behavior of the C1GridView control using the C1GridView Properties dialog box. For more information on how to access and use the Property builder in C1GridView, see Property Builder (page 12). Properties Window You can also easily configure C1GridView at design time using the Properties window in Visual Studio. You can access the Properties window by right-clicking the control and selecting Properties.

C1GridView Smart Tag

A smart tag represents a short-cut Tasks menu that provides the most commonly used properties of a component. To access the C1GridView Tasks menu, click the smart tag in the upper-right corner of the C1GridView control. The C1GridView Tasks menu appears.

Note that when the grid is bound to a data source, the Tasks menu lists additional options and appears similar to the following:

The C1GridView Tasks menu operates as follows: Choose Data Source

10

Choose an existing data source or create a new connection through the Data Source Configuration Wizard. See Binding the Grid to a Data Source (page 32) for more information. Configure Data Source This option invokes the Data Source Configuration Wizard to configure the data source. This option only appears if the C1GridView control is bound to a data source. Refresh Schema This option refreshes the data source's schema. This option only appears if the C1GridView control is bound to a data source. Property builder Opens the Property builder where you can set properties and customize the grid. See Using the Property Builder (page 34) for more information. Load Layout Allows you to load an XML layout file. When you click this option the Open dialog box opens allowing you to select a file to load. Save Layout Allows you to save the layout file as an XML file. When you click this option the Save dialog box opens allowing you to select a file to load. Theme Clicking the Theme drop-down box allows you to select from various visual schemes. For more information about available visual styles, see Themes (page 21). Use CDN Selecting the Use CDN check box will indicate that the widget extender must load client resources from a content delivery network. By default this box is not checked. CDN Path Indicates the path for the content delivery network. Enter a URL here to change the path. About Opens the About ComponentOne Studio for ASP.NET Wijmo dialog box which displays the version number as well as licensing, registration and purchasing information, and additional online resources. Add Extender Clicking the Add Extender item opens the Extender Wizard, allowing you to add an extender to the control. Edit Templates Clicking this option invokes Template Editing Mode.

C1GridView Context Menu

Right-click anywhere on the grid to display the C1GridView context menu, which is a context menu that Visual Studio provides for all .NET controls, although the C1GridView context menu has a few extra features.

11

The context menu commands operate as follows: Show Smart Tag This option shows the smart tag for the C1GridView control. For more information on how to use the smart tag and available features, see C1GridView Smart Tag (page 10). Edit Template Select Edit Template to edit the EmptyData Template or Pager Template. Choosing one of these options will invoke Template Editing Mode. End Template Editing This option ends Template Editing Mode if you're currently editing a template. If you're not in Template Editing Mode, this option will not be available.

Property Builder
The Property builder allows you to easily customize the appearance and behavior of the C1GridView control. To access the Property builder, select Property builder from the C1GridView Tasks menu (see C1GridView Smart Tag (page 10) for details). The C1GridView Properties dialog box appears:

12

The C1GridView Properties window consists of five tabs:

Tab General Description Displays the data source and allows you to set headers, footers, and sorting properties. Allows you to specify the types of columns that appear and set the properties for each. Lets you determine whether paging is used, and allows you to customize how and where it appears. Allows you to set the font, color and alignment of the grid and everything within it, including the headers, footers, the pager, specific items, and columns. Lets you set column grouping properties and determine how the group header and footer rows should be formatted and displayed.

Columns

Paging

Format

Grouping

General Tab
The General tab of the Property builder displays the data source and allows you to set headers, footers, and sorting properties. The General tab consists of Data, Header and Footer, and Behavior settings:

13

The General tab includes the following options: DataSourceID: Displays the current data source. For information about data binding, see Binding the Grid to a Data Source (page 32). DataMember: Displays the current data member. Show header: When this check box is selected (default) the ShowHeader property is set to True and the grid's header is visible. Show footer: When this check box is selected the ShowFooter property is set to True and the grid's header is visible. For an example, see Setting the Footer Text (page 37). By default, this check box is not selected and ShowFooter is False. Show filter: Shows a filter row at the top of the grid. By default, this check box is not selected and ShowFilter is False. Allow sorting: When this check box is selected the AllowSorting property is set to True and users can sort the grid at run time. By default, this check box is not selected and AllowSorting is False. For more information about sorting, see the Sorting (page 26) topic.

14

Allow column moving: When this check box is selected the AllowColMoving property is set to True and columns can be moved and reordered in the grid at run time. By default this check box is unchecked and AllowPaging is False. Allow column resizing: When this check box is selected the AllowColSizing property is set to True and columns can be resized in the grid at run time. See the Creating a Pageable Grid (page 50) topic for an example. By default this check box is unchecked and AllowColSizing is False. Allow grouping: When this check box is selected the grouping area appears at the top of the grid. By default this check box is unchecked and grouping is not included.

Columns Tab
The Columns tab of the Property builder allows you to specify the types of columns that appear and set the properties for each. The Columns tab consists of Column generation, Column list, and Column properties sections:

The Columns tab includes the following options and sections:

15

Create columns automatically at run time: When this check box is selected (default) the AutoGenerateColumns property is set to True and column objects are generated and displayed automatically. Note that when the grid is bound, this option may be automatically deselected. Available columns: This window lists the available column types. Available column types include: C1Band: displays a banding column used to create multilevel column headers. C1BoundField: displays a column bound to a field in a data source. C1ButtonField: displays a command button for each item. C1CheckBoxField: displays a Boolean check box for each item. C1CommandField: displays a column containing editing commands for each item. C1HyperLinkField: displays each item as a hyperlink. C1TemplateField: displays each item in the column following a specified template.

When the grid is bound to a data source, the columns available from that data source will be listed under the Data Fields option in the Available columns window. Selected columns: This window lists the current selected columns. When the grid is bound to a data source, the bound columns will appear in this window. To add a columns to the Selected columns list, choose a column in the Available columns list and click the Move arrow button to move the item to the Selected columns list. To move the order of columns, select the Up and Down arrows to the right of the window. To remove a column from the list, click the Delete button to the right of the window. Column properties: This list displays the available properties for a column. To change a column's properties, click on that column in the Selected columns list and click the text box or drop-down arrow next to a property in the Column properties window to modify its value.

Paging Tab
The Paging tab of the Property builder allows you to determine whether paging is used and lets you customize how and where it appears. For more information about paging, see the Paging (page 29) topic. The Paging tab includes the Paging and Page Navigation sections:

16

The Paging tab includes the following options: Allow paging: When this check box is selected the AllowPaging property is set to True and paging is included in the grid. See the Creating a Pageable Grid (page 50) topic for an example. By default this check box is unchecked and AllowPaging is False. Allow custom paging: When the Allow paging check box is selected, this option is available. When this check box is selected custom paging is allowed. By default this check box is unchecked. Page size: When the Allow paging check box is selected, this option is available. The Page size text box sets the PageSize property and allows you to choose how many items are visible on the grid on each page. By default, PageSize is 10. Show navigation: This option is available when the Allow paging check box is selected. When this check box is selected (default) paging controls appear on the grid. Position: This option is available when the Allow paging and Show navigation check boxes are selected. This option lets you determine where the pager controls will appear in the grid. Options include: Bottom: Paging controls will appear at the bottom of the grid. This is the default setting. Top: Paging controls will appear at the top of the grid. TopAndBottom: Paging controls will appear both at the top and bottom of the grid.

17

Mode: This option is available when the Allow paging and Show navigation check boxes are selected. This option lets you determine what kind of pager controls should appear on the grid. Options include: NextPrevious: Previous and Next button pager controls will used. Numeric: Numbered link button pager controls that allow users to access pages directly will be used . This is the default setting. NextPreviousFirstLast: Previous, Next , First, and Last button pager controls will be used. NumericFirstLast: Numbered and First, and Last button pager controls will be used.

Buttons count: This option is only available when Numeric or NumericFirstLast is selected and it determines the number of page buttons to display in the pager control. First page text , First page image class, Last page text , and Last page image image class: These options are only available when NextPreviousFirstLast or NumericFirstLast is selected: The First page text option determines the text to display for the First page button. The First page image class option determines the image to display for the First page button. Click the button next to the First page image class text box to select an image. The Last page text option determines the text to display for the Last page button. The Last page image class option determines the image to display for the Last page button. Click the button next to the Last page image class text box to select an image.

Next page text , Next page image class, Previous page text , and Previous page image class: These options are only available when NextPrevious or NextPreviousFirstLast is selected: The Next page text option determines the text to display for the Next page button. The Next page image class option determines the image to display for the Next page button. Click the button next to the Next page image class text box to select an image. The Previous page text option determines the text to display for the Previous page button. The Previous page image class option determines the image to display for the Previous page button. Click the button next to the Previous page image class text box to select an image.

Format Tab
The Format tab of the Property builder allows you to set the font, color and alignment of the grid and everything within it, including the headers, footers, the pager, specific items, and columns. The Format tab includes the Objects, Columns, and Column properties sections:

18

The Format tab includes the following sections: Objects: Displays the available objects. Choose a object to set it's formatting properties in the Column properties window. Columns: Displays the list of available columns. If the grid is bound, the bound columns will appear in this list. Choose a column to set it's formatting properties in the Column properties window. Column properties: When an object or column is selected from the appropriate pane, the Column properties window displays the available formatting properties that can be set for that object or column.

Grouping Tab
The Grouping tab of the Property builder allows you to set column grouping properties and determine how the group header and footer rows should be formatted and displayed. For more information about grouping, see the Grouping (page 24) topic. The Grouping tab includes the Column list and Grouping properties sections:

19

The Grouping tab includes the following sections: Column list: Displays the list of available columns. If the grid is bound, the bound columns will appear in this list. Choose a column to set it's grouping properties in the Grouping properties window. Grouping properties: When an column is selected from Column list, the Grouping properties window displays the available grouping properties that can be set for that column. You can customize grouping behavior and set how the group header and footer rows should be formatted and displayed.

Working with GridView for ASP.NET Wijmo

ComponentOne GridView for ASP.NET Wijmo allows you to select, edit, delete, filter, and sort the items displayed in the table generated by the C1GridView component. GridView for ASP.NET Wijmo also supports paging, so data can be displayed across multiple pages, which are accessed by default or customized navigation buttons. The columns of a table created using the C1GridView component correspond to the fields in a data source. You can control which columns are displayed, the types of columns to display, and the appearance of the whole table.

20

Using the AutoGenerateColumns property, you can generate columns automatically, manually, or both. Setting this property to True (default) creates a C1BoundField for each field in the data source. Setting this property to False allows you to specify the columns to display, which are added to the Columns collection.
Note: Explicitly declared columns are rendered first, followed by automatically generated columns. Automatically generated columns are not added to the Columns collection.

Class Hierarchy The following list summarizes the class relationships between the more important classes included in the GridView for ASP.NET Wijmo: C1.Web.Wijmo.Controls.C1GridView.C1GridView : System.Web.UI.WebControls.WebControl Encapsulates most of the grid functionality. This component is shown in the Visual Studio's Toolbox. C1.Web.Wijmo.Controls.C1GridView.C1Field : System.Object Base class for columns. C1.Web.Wijmo.Controls.C1GridView.C1GridViewRow : System.Web.UI.WebControls.TableRow Grid items. C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowCollection : System.Collections.CollectionBase Collection of items. C1.Web.Wijmo.Controls.C1GridView.PagerStyle : System.Web.UI.WebControls.TableItemStyle Style of the Pager. Determines if and how the pager is displayed. C1.Web.Wijmo.Controls.C1GridView.GroupInfo : System.Object Used to determine how and where grouped header and footer rows are displayed.

Themes
C1GridView includes themes allowing you to easily change the control's appearance. The control includes several built-in themes allowing you to customize the control's appearance to your application. You can easily change themes from the C1GridView Tasks menu, from the Properties window, and in code. Changing Themes You can change the theme of a C1GridView at design time using the Properties window: 1. 2. Click the C1GridView control once to select it, and navigate to the Properties window. In the Properties window, click the Theme drop-down arrow and select a style, for example rocket. The theme you selected is applied to your grid. Included Themes The following themes are included in GridView for ASP.NET Wijmo: arctic The following image displays the arctic theme: arctic aristo cobalt midnight rocket sterling

21

aristo The following image displays the aristo theme. This is the default appearance of C1GridView.

cobalt The following image displays the cobalt theme:

22

midnight The following image displays the midnight theme:

rocket The following image displays the rocket theme:

23

sterling The following image displays the sterling theme:

Editing Rows
Each row in the C1GridView component represents a record in the data source. You can select, edit, delete, and apply different styles to your rows. If you are creating data manually, by adding a C1ButtonField and code for the RowEditing, C1GridView.UpdateCommand and RowCancelingEdit events, you can select each row to be edited or deleted. If you connect to the data source control, this is all taken care for you automatically. The EditRowStyle property allows you to determine the appearance of the rows. For additional information on editing rows, see GridView for ASP.NET Wijmo Task-Based Help (page 32). The RowMerge property allows you to merge rows containing identical text. You can use the Property builder to specify which rows to merge and how they are merged. For additional information, see Merging Rows (page 49). You can use AJAX to update the grid when the user edits a record at run time by setting the Action property. For more information, see Editing a Record (page 53).

Grouping
The C1GridView data grouping features allow you to automatically calculate data aggregates and create trees with nodes that can be collapsed and expanded. If ShowGroupArea is set to True, a grouping area will appear at the top of the grid:

24

To group at run time, simply drag a column header into the grouping area. Note that you may need to set the AllowColMoving property to True to allow run-time column manipulation. The C1GridView data grouping features are controlled by two properties of the C1Field class: The GroupInfo property determines whether a group should be created for the column, as well as the appearance, position, and content of the group header and group footer rows. The Aggregate property determines the type of aggregate that should be calculated for this column and included in the group header and footer rows.

Typically, you will set the GroupInfo property for columns that contain categories that you would like to group on (for example, OrderYear, Country, and so on). You will set the Aggregate property for columns that contain the values that you want to aggregate on (for example, Amount, Sales, Expenses, and so on). You can customize the text that appears in the grouping area by setting the GroupAreaCaption property.

Setting Grouping Properties at Design Time

You can set up the Grouping properties at design time using the Property builder. You will use three tabs in the C1GridView Properties dialog box to set up each aspect of data grouping: Grouping tab: This tab contains a list of columns. For each column that you want to group on, set the Position property to determine where the group header and footer rows should be displayed (set Position to None to remove grouping for a column). Also set the HeaderText (and/or FooterText) property to determine what will be displayed in the group header/footer rows. Optionally, set up the group header and footer styles. See Grouping Tab (page 19) for more information. Columns tab: Set the Aggregate property on each column that you want to aggregate on. Usually, these will be columns that contain numeric values, and will not be grouped on. See Columns Tab (page 15) for more information. Format tab: Select each column that you are grouping on and set the styles for the group header and group footer rows. Typically, you will set the background color so the group headers and footers stand out from the regular rows. See Format Tab (page 18) for more information.

For additional information on the Property builder, see Property Builder (page 12).

Collapsing and Expanding Groups

GridView for ASP.NET Wijmo generates client-side script that allows users to collapse and expand the groups without round trips to the server.

25

If you set the OutlineMode property to StartCollapsed or StartExpanded, the grid will display expanded/collapsed icons next to each group header row. The users can click these icons to collapse and expand the groups to see the overall structure or the details of the data. The behavior for the outline nodes is as follows: Click: o o If the node is currently expanded, it becomes collapsed. All subordinate group headers and data are hidden. If the node is currently collapsed, it becomes expanded. If there are any subordinate group headers, they are displayed in the collapsed state. If there are no subordinate group headers, the data is displayed. All nodes and data below the node that was clicked are displayed.

SHIFT-Click: o

You can select different icons for the group headers using the CollapsedImageClass and ExpandedImageClass properties. For additional information on grouping, see the GridView for ASP.NET Wijmo Task-Based Help (page 32).

Sorting
The C1GridView control provides built-in sorting functionality without requiring any coding. You can further customize the sort functionality of the C1GridView control by using custom SortExpression property values for columns as well as by using the Sorting and Sorted events. You can enable the default sorting behavior in the C1GridView control by setting its AllowSorting property to True. When AllowSorting is True, the C1GridView control renders a LinkButton control in the column headers and implicitly sets the SortExpression property of each column to the name of the data field to which it is bound. For example, if the grid contains a column that displays the City column of the Employees table in the Northwind sample database, the SortExpression of that column will be set to City. You can determine or set the sort direction with the SortDirection property (Ascending, Descending, or None). At run time, users can click the LinkButton control in a column heading to sort by that column. Clicking the link causes the page to perform a postback and raises the C1GridView control's Sorting event. After the query has executed, the grid's Sorted event is raised. Finally, the data source control rebinds the C1GridView control to the results of the resorted query. When a column is sorted, the column header will display a sort indicator at run time (an arrow icon) indicating the direction of the sort. In the following image, the Skaters column was sorted:

26

Note that if the data source control does not support sorting and a sorting operation is performed in the C1GridView control, the C1GridView control throws the NotSupportedException exception. You can catch this exception in a handler for the Sorting event and check the data source to determine whether sorting is supported, or by using your own sorting logic. You can use AJAX to update the grid when the user sorts a column at run time by setting the Action property. For an example, see Sorting Columns (page 55).

Filtering
The C1GridView control provides built-in data filtering functionality without requiring any coding. To be able to filter data at run time, the ShowFilter property must be set to True (by default this is False). When ShowFilter is True a filter bar appears at the top of the grid just under the grid's column headings. To filter data in the grid at run time, simply type text in the filter bar, click the drop-down arrow in the filter row in the column you are filtering, and select a filter type from the menu. To remove the filter, click the drop-down arrow in the filter row in the column you are filtering and select NoFilter. In the following image, the Discount column has been filtered so entries equal to "25%" appear:

27

You can choose what the filter condition should be by setting the FilterOperator property (note that you can set this property in the Columns tab of the Property builder). By default FilterOperator is set to Contains, but you can set the FilterOperator to the following options:
Option NoFilter Contains (default) NotContain BeginsWith EndsWith Equals NotEqual Greater Less GreaterOrEqual LessOrEqual IsEmpty NotIsEmpty IsNull NotIsNull Custom Description No filter is applied. The filter term is contained in the column. The filter term is not contained in the column. Items in the column begin with the filter term. Items in the column end with the filter term. Items in the column equal the filter term exactly. Items in the column do not equal the filter term exactly. Items in the column are less than the (numeric) filter term. Items in the column are greater than the (numeric) filter term. Items in the column are greater than or equal to the (numeric) filter term. Items in the column are less than or equal to the (numeric) filter term. Items in the column are empty. Items in the column are not empty. Items in the column are null. Items in the column are not null. Custom filter is applied.

You can customize the appearance of the filter bar by setting the FilterStyle property. To show a filter button, you should either set AutoGenerateFilterButton to True or manually create a C1CommandField and set its ShowFilterButton property to True. If no filter button is visible, the user can trigger the filter by pressing the ENTER key.

28

You can use AJAX to update the grid when the user filters columns at run time by setting the Action property. For more information, see Filtering Columns (page 55).

Paging
The C1GridView control provides built-in data paging functionality without requiring any coding. By default the grid is displayed in one continuous window. If you choose, you can display the grid on multipage "pages". If paging is set, at run time users can navigate each page of the grid through buttons or links at the top or bottom of the grid. For an example of adding paging, see the Creating a Pageable Grid (page 50) topic. To be able to page data at run time, the AllowPaging property must be set to True (by default this is False). When Visible is True paging navigation appears by default at the bottom of the grid in the grid's footer. You can change the position of the paging controls, if you choose, by setting the Position property. By default, 10 items appear on each page of the grid. You can change this number, by setting the PageSize property. For example, in the image below the PageSize has been set to 5. By default the paging controls appear as numeric links:

You can change the appearance of the paging controls by setting the Mode property. You can set the Mode property to the following options:
Mode NextPrevious Numeric (default) NextPreviousFirstLast NumericFirstLast Description A set of pagination controls consisting of Previous and Next buttons. A set of pagination controls consisting of numbered link buttons to access pages directly. A set of pagination controls consisting of Previous, Next, First, and Last buttons. A set of pagination controls consisting of numbered and First and Last link buttons.

To customize the pager controls, you can set the PagerSettings. Note that the paging properties are easily accessed at design time on the Paging tab of the Property builder (the C1GridView Properties dialog box). You can use AJAX to update the grid when the user pages the grid at run time by setting the Action property. For more information, see Paging the Grid (page 54).

29

Using AJAX
Asynchronous JavaScript and XML (AJAX) provides a very effective way of communicating with data which resides on a server. This means that Web pages (ASP.NET Web applications) can execute server-side logic and update various page elements without reloading the entire page. This is a highly efficient way to present data via Web applications. It saves page reloading time and provides a more streamlined user experience. AJAX allows GridView for ASP.NET Wijmo to load data without having to do a postback to the server, minimizing load time and greatly improving the end-user experience. Using C1GridView's Callback feature, the grid calls back to the server to retrieve only the information that is requested, unlike with a server postback, where the whole page must be reloaded to update the grid. End-users can quickly modify a grid without that annoying flicker of the screen during load time. You can use the Callback feature for editing the grid, grouping and outlook grouping, paging, row selection, sorting, and scrolling the grid by simply setting C1GridView's Action property to one of the following options: None: All actions are performed via postback. ColMove: Column moving is performed via callbacks. Editing: Editing is performed via callbacks. Paging: Paging is performed via callbacks. Selection: Row selection is performed via callbacks. Sorting: Sorting is performed via callbacks. Filtering: Filtering is performed via callbacks. All: All actions on the grid are performed via callbacks.

For more information on using GridView for ASP.NET Wijmo and AJAX, see the Updating the Grid with AJAX (page 52) topic.

30

GridView for ASP.NET Wijmo Samples

Please be advised that this ComponentOne software tool is accompanied by various sample projects and/or demos which may make use of other development tools included with the ComponentOne Studios. Samples can be accessed from the ComponentOne ControlExplorer. To view samples, on your desktop, click the Start button and then click All Programs | ComponentOne | Studio for ASP.NET Wijmo | Samples . The ControlExplorer sample includes a section that details some of the functionality available in the C1GridView control. C# Samples The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET Wijmo detail the C1GridView control's functionality:
Sample Overview Description The C1GridView displays the values of a data source in a table where each column represents a field and each row represents a record. This sample demonstrates a simple sortable grid. The C1GridView supports server editing. This sample shows how to use custom data binding to bind the C1GridView to a dataset stored in the session object, how to use template fields to implement custom editors and how to use UpdateBindings collections of the template fields to automatically update the dataset with the Update method when custom data binding is used. C1GridView supports several modes of client-side cell selection. This sample shows these modes and demonstrates how to use the clientside object model to change selection mode without sending requests to the server. The C1GridView supports an intuitive user interface for filtering the rows in the grid. This sample demonstrates filtering. This sample shows how to use bands to organize column headers into a hierarchical structure. It also shows you how to sort columns and use a drag-and-drop operation to reorder columns. Paging is allowed if the AllowPaging property is set to True. This sample demonstrates paging. The C1GridView supports data grouping against one or more columns. The column will be grouped if the GroupInfo.Position property is set to a value other than None. This sample demonstrates grouping. The C1GridView supports aggregates calculation against one or more grouped columns. It is possible to calculate aggregate values for each group of data rows. An aggregate can be calculate for any column with compatible data type if the column is preceded by a grouped column. C1GridView supports aggregate functions like Sum, Count, Min, Max and other. The C1GridView supports both horizontal and vertical scrolling. Scrolling is allowed if the ScrollMode property is set to value other than None. When scrolling is used, C1GridView's header is automatically fixed. The C1GridView supports operations on the current cell. The current cell is a data cell having focus. C1GridView highlights the current cell

CustomEditing

ClientSideSelection

Filtering Columns

Paging GroupArea

Aggregates

Scrolling

CurrentCell

31

position, tracks it changes, and allows the retrieval of data value. GroupRowsCustomStyling ClientSideEditing In this sample group header cells are styled using the .wijmo-wijgrid .wijmo-wijgrid-groupheaderrow CSS sequence. The C1GridView supports client editing. This sample shows how to update a dataset stored in the session object when client editing is used and how to provide client-side custom editors. The C1GridView supports row merging. Identical values of the particular column can be spanned within a single cell. Row merging is allowed if the RowMerge property of the column is set to value other than None. This sample demonstrates sorting. Sorting is allowed if the AllowSorting property is set to True. End-user sorting is allowed if the SortExpression property of the column is set to non-empty value.

Merging

Sorting

GridView for ASP.NET Wijmo TaskBased Help

The task-based help assumes that you are familiar with programming in Visual Studio .NET, know what a DataSet is, and know how to use bound controls in general. By following the steps outlined in the help, you will be able to create projects demonstrating a variety of C1GridView features and get a good sense of what C1GridView can do. The help uses the standard Northwind Access database, Nwind.mdb, for bound data, which is installed by default in the ComponentOne Samples\Common folder in your MyDocuments folder (Documents in Vista). The database is referred to by filename instead of the full pathname for the sake of brevity.
Note: Depending on where you store the projects and database files, you may need to change the location of the Nwind.mdb reference in the projects.

Each task-based help topic also assumes that you have created a new ASP.NET project, have placed a bound C1GridView control on the form, and have used the Imports (Visual Basic) or using (C#) statement for the C1.Web.Wijmo.Controls.C1GridView namespace and relevant System namespaces. For additional information, see Binding the Grid to a Data Source (page 32).

Binding the Grid to a Data Source

The following topics demonstrate how to bind C1GridView to a data source control. The steps for binding C1GridView to a data source are slightly different in a Web site project from a Web application project.

Binding the Grid in a Web Site Project

To bind C1GridView to a data source control in a Web Site project, complete the following steps: 1. 2. 3. 4. 5. 6. In the Solution Explorer, right click the project name and choose Add | New Folder. Name the new folder "App_Data". In the Solution Explorer, right-click the App_Data folder, and then click Add Existing Item. Locate the Nwind.mdb file, installed by default in the samples folder. In the Add Existing item dialog box, click the Nwind.mdb file, and then click Add. Go back to the Default.aspx page. Select the C1GridView control, and click the Smart Tag (page 10) to open the C1GridView Tasks menu.

32

7. 8. 9.

Click the Choose Data Source drop-down arrow and select <New data source>. In the Data Source Configuration Wizard, select Access Database and click OK. Click Browse and select App_Data under Project folders in the Select Microsoft Access Database dialog box.

10. Choose Nwind.mdb in the Contents of folder pane on the right-hand side and click OK. 11. Click Next . The Configure the Select Statement window appears. a. b. c. Confirm that the Specify columns from a table or view option is selected. In the Name drop-down list, select Products. In the Columns box, select ProductID, ProductName, QuantityPerUnit, and UnitsInStock or desired other check boxes.

12. Click Next . The Test Query page appears. Optionally, click Test Query to test your query. 13. Click Finish to close the wizard and add the data source.

Binding the Grid in a Web Application Project

To bind C1GridView to a data source control in a Web Application project, complete the following steps: 1. 2. 3. 4. 5. 6. 7. 8. In the project, select Project | Add Existing Item. Locate and select the Nwind.mdb file, installed by default in the samples folder, and click Add. The Data Source Configuration Wizard appears. Check the Tables check box and click Finish. Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, click the Choose Data Source drop-down arrow and select <New data source>. The Data Source Configuration Wizard appears. Select Access Database and click OK. Click the Browse button and select the Nwind.mdb that appears under Contents of folder. Click OK and then Next. The Configure the Select Statement window appears. a. b. c. 9. Make sure the Specify columns from a table or view option is selected. In the Name drop-down list, select Products. In the Columns box, select ProductID, ProductName, QuantityPerUnit, and UnitsInStock or other desired check boxes.

Click Next . The Test Query page appears. Optionally, click Test Query to test your query.

10. Click Finish to close the wizard and add the data source.

Automatically Updating the Data Source

This topic illustrates how to create an editable grid using templates and a DataSource control. Complete the following steps: 1. Create a grid and bind it to a DataSource control; see Binding the Grid to a Data Source (page 32) topic for details. Use the Suppliers table in the Northwind database and retrieve the SupplierID, CompanyName, ContactName, and Address fields. Configure UpdateQuery: a. Right-click the AccessDataSource1 component and then click Properties. In the Properties tab click the ellipsis button next to UpdateQuery. The Command and Parameter Editor dialog box appears.

2.

33

b. c.

Click Query Builder, select the Suppliers table and click Add. Insert the following text in UPDATE command and click OK to close the Query Builder: UPDATE Suppliers SET CompanyName = ?, ContactName = ?, Address = ? WHERE (SupplierID = ?)

d. e. f. g. 3. 4. 5. 6.

Click the Add Parameter button and rename the parameter "SupplierID". Click Show advanced properties and set the Type property to Int32 In the same way, add CompanyName, ContactName, Address parameters, but set their Types to String. Click OK to close the Command and Parameter Editor dialog box.

Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, in the Choose Data Source box, click AccessDataSource1, if necessary. Right-click the C1GridView control and click Properties. In the Properties window set the DataKeyNames value to SupplierID. In the Properties window, set the AllowClientEditing property to True.

Using the Property Builder

The Property builder allows you to easily customize the appearance and behavior of the C1GridView control. Using the Property builder, you can determine whether to show headers and footers, customize paging and page navigation, and format the appearance of the C1GridView control. To access the Property builder, select Property builder from the C1GridView Tasks menu. The C1GridView Properties dialog box appears. For more information about the Property builder and the available options, see the Property Builder (page 12) topic.

Setting Properties Using the Property Builder

The C1GridView Properties dialog box allows you to easily set properties to customize the C1GridView control's appearance and behavior. To set properties using the Property builder, complete the following steps: 1. Right-click C1GridView and select Show Smart Tag from the context menu. Select Property builder from the C1GridView Tasks menu. The C1GridView Properties dialog box appears. 2. From the C1GridView Properties dialog box, select one of the following tabs in the left column. For this example, the Columns tab is selected. The C1GridView Properties dialog box includes five tabs as follows:
Tab General Description Displays the data source and allows you to set headers, footers, and sorting properties. See General tab (page 13) for more information. Allows you to specify the types of columns that appear and set the properties for each. See Columns tab (page 15) for more information. You can determine whether paging is used, and you can customize how and where it appears. See Paging tab (page 16) for more information. Allows you to set the font, color and alignment of the grid and everything within it, including the headers, footers, the pager, specific

Columns

Paging

Format

34

items, and columns. See Format tab (page 18) for more information. Grouping You can determine whether a column is grouped on and how the group header and footer rows should be formatted and displayed. See Grouping tab (page 19) for more information.

3. 4. 5.

Choose one of the columns in the list of Selected columns. Set the desired properties under Column properties and click Apply. Once you are finished setting the properties, click OK.

Alternatively, C1GridView properties can be set using the Properties window at design time. 1. 2. 3. Select the C1GridView control. Select Properties Window from the View menu on the Visual Studio toolbar. In the Properties window, set any of the desired properties.

35

Adding Columns Using the Property Builder

Using the C1GridView Properties dialog box, you can also add and remove columns and determine the types of columns to display. Available column types include: 1. 2. 3. 4. C1Band: displays a banding column used to create multilevel column headers. C1BoundField: displays a column bound to a field in a data source. C1ButtonField: displays a command button for each item. C1CheckBoxField: displays a Boolean check box for each item. C1CommandField: displays a column containing editing commands for each item. C1HyperLinkField: displays each item as a hyperlink. C1TemplateField: displays each item in the column following a specified template. Right-click C1GridView control and select Show Smart Tag from the context menu. Select Property builder from the C1GridView Tasks menu. The C1GridView Properties dialog box appears. Click the Columns tab in the left pane. For more information about the Columns tab, see the Columns tab (page 15) topic. Under Column List, select the desired column from the list of Available columns. Click the arrow button between the column lists to create a column under the list of Selected columns. In the image below a HyperLink column was added:

To add columns, complete the following steps:

Note: When the check box next to Create columns automatically at run time is selected (default), bound columns are automatically created. If you deselect the box, you must manually create columns.

Formatting the Grid's Content

The following task-based help topics explain how to format your grid, including customizing the grid's content, column headers, footers, and more.

Automatically Sorting Columns

To configure the grid to automatically sort a column, complete the following steps: 1. Select the C1GridView control and set the AllowSorting property to True. Visual Basic

36

C1GridView1.AllowSorting = True 2. 3. C# C1GridView1.AllowSorting = true;

Set the C1GridView.DataSourceID property. Run your application and click the HeaderText of the column you want to sort.

Sample Project Available For the complete sample, see the Sorting page located in the ControlExplorer sample. See GridView for ASP.NET Wijmo Samples (page 31) for more information.

Hiding Specified Columns

You can choose to hide columns in the C1GridView control by setting the Visible property for those columns to False. To specify the columns to be displayed in C1GridView, complete the following steps: 1. 2. 3. 4. 5. 6. Right-click C1GridView and select Show Smart Tag from the context menu. Select Property builder from the C1GridView Tasks menu. The C1GridView Properties dialog box appears. Click the Columns tab in the left pane. Deselect the Create columns automatically at run time check box if it is selected. Select a column that you do not want to appear from the list of Selected columns. Under Column properties, set the Visible property to False. Do this for any column in the data source that you do not want to appear in the grid. Note that you can also remove columns from being displayed by selecting the column in the Selected columns list and clicking the Delete button ("X"). 7. Click OK to save your settings and close the C1GridView Properties dialog box.

What You've Accomplished Run your application and observe that the columns that you changed the visibility for do not appear in the grid at run time.

Setting the Footer Text

This topic demonstrates how to show a footer and set its text in C1GridView at design time and programmatically. In the Designer Complete the following steps: 1. 2. 3. 4. 5. Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, click Property builder. The C1GridView Properties window appears. On the General tab, check the Show footer check box. Select the Columns tab and deselect Create columns automatically at run time if it is selected. Choose a column in the list of Selected columns. Enter the desired text in the FooterText property.

In Source View Switch to Source view and complete the following: steps: 1. Set the following text to the <wijmo:C1GridView> tag::

37

Set the AutoGenerateColumns property to False. Set the ShowFooter property to True.

It will appear similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" DataSourceID="AccessDataSource1" AutogenerateColumns="False" ShowFooter="True"> 2. Set the footer text for individual columns using the FooterText property by adding the following FooterText="Total Price" text within a <wijmo:C1BoundField> tag, so it appears similar to the following: <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" FooterText="Footer"> This will set the FooterText property. In Code Open the Code Editor and set the following properties in code: Set the AutoGenerateColumns property to False. Set the ShowFooter property to True. Set the footer text for individual columns using the FooterText property. This property must be set before the DataBind method is called. Visual Basic C1GridView1.AutoGenerateColumns = False C1GridView1.ShowFooter = True C1GridView1.Columns(0).FooterText = "Footer" C# C1GridView1.AutoGenerateColumns = false; C1GridView1.ShowFooter = true; C1GridView1.Columns[0].FooterText = "Footer";

For example, add the following code to the Page_Load event:

What You've Accomplished This example sets the footer text for the first column to "Footer".

Note: The footer text can only be set for columns that are not automatically generated.

38

Creating Column Header Bands

This topic demonstrates how to create multi-column headers using C1Band at design time and programmatically. In the Designer Complete the following steps: 1. 2. 3. 4. 5. 6. 7. Right-click the C1GridView control and then click Show Smart Tag. In the C1GridView Tasks menu, click Property builder. The C1GridView Properties window appears. Select the Columns tab and deselect the Create columns automatically at run time check box if it is selected. Choose the Band column from the list of Available columns. Click the arrow button between the column lists to move a Band column to the list of Selected columns. Select the new Band column and enter some text in the HeaderText property. In this example, we entered "Products" in the HeaderText property. To place the band above the ProductID and ProductName columns, select the Band column and click the Up arrow to place it at the top of the list of Selected columns. Select the ProductID column and click the Up arrow until it appears on a level within the Band column. Do the same for the ProductName column.

8. In Code

Click OK.

Add the following code to the Page_Load event to add dynamic band headers: Visual Basic ' Disable the automatic creation of C1BoundField objects. Me.C1GridView1.AutoGenerateColumns = False ' Create the Band column. Dim band As New C1.Web.Wijmo.Controls.C1GridView.C1Band ' Set the header text to Products. band.HeaderText = "Products" ' Add the ProductID column to the Band column. Dim col As New C1.Web.Wijmo.Controls.C1GridView.C1BoundField col.HeaderText = "ProductID" col.DataField = "ProductID" band.Columns.Add(col)

39

' Add the ProductName column to the Band column. col = New C1.Web.Wijmo.Controls.C1GridView.C1BoundField col.HeaderText = "ProductName" col.DataField = "ProductName" band.Columns.Add(col) ' Remove the existing ProductID and ProductName columns in the grid. Me.C1GridView1.Columns.RemoveAt(0) Me.C1GridView1.Columns.RemoveAt(0) ' Insert the Band column in the grid. Me.C1GridView1.Columns.Insert(0, band) C# // Disable the automatic creation of C1BoundField objects. C1GridView1.AutoGenerateColumns = false; // Create the Band column. C1Band band = new C1Band(); // Set the header text to Products. band.HeaderText = "Products"; // Add the ProductID column to the Band column. C1BoundField col = new C1BoundField(); col.HeaderText = col.DataField = "ProductID"; band.Columns.Add(col); // Add the ProductName column to the Band column. col = new C1BoundField(); col.HeaderText = col.DataField = "ProductName"; band.Columns.Add(col); // Remove the existing ProductID and ProductName columns in the grid. this.C1GridView1.Columns.RemoveAt(0); this.C1GridView1.Columns.RemoveAt(0); // Insert the Band column in the grid. this.C1GridView1.Columns.Insert(0, band); What You've Accomplished When you run the project, the ProductID and ProductName columns appear under the Products Band column.

40

Formatting a Column as Currency

You can easily format the display of a column in the C1GridView control. For example, in this topic you'll format the UnitPrice column of the Products table to appear as currency. For more information about customizing column formatting, see the description of the DataFormatString property. In the Designer Complete the following steps: 1. 2. 3. 4. 5. 6. Click the C1GridView control's smart tag and select Property builder in the C1GridView Tasks menu. The C1GridView Properties dialog box will appear. Select the Columns tab in the left pane. Click the UnitPrice column in the Selected columns list. In the Column properties window, scroll down to the DataFormatString property. Click the drop-down arrow next to DataFormatString and select c. Click OK to save your settings and close the C1GridView Properties dialog box.

In Source View Switch to Source view and add DataFormatString="c" to the <wijmo:C1BoundField> tag, so it appears similar to the following: <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" DataFormatString="c"> In Code Add the following code to the Page_Load event to format the column: Visual Basic ' Format the UnitPrice column. CType(C1GridView1.Columns(2), C1.Web.Wijmo.Controls.C1GridView.C1BoundField).DataFormatString = "c" C# // Format the UnitPrice column. ((C1.Web.Wijmo.Controls.C1GridView.C1BoundField)C1GridView1.Columns[2]).Da taFormatString = "c";

Note that you may need to change the index of the column in the above code.

41

What You've Accomplished Run your application and observe that the UnitPrice column appears formatted as currency:

Adding Controls to a Column

Adding arbitrary controls to grid columns is simple using template columns. The following task-based help topics will walk you through adding templates columns, adding controls to template columns, and binding controls in template columns.

Adding Template Columns

To add template columns to C1GridView, complete the following steps: 1. 2. 3. 4. 5. 6. Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, click Property builder. The C1GridView Properties window appears. Click the Columns tab. Click the button to remove all columns from the Selected columns list.

Select Template Field from the Available columns list. Click the arrow button between the column lists to copy the Template Column to the Selected columns list. Repeat this task three times to create three more (and a total of four) Template Columns. Under Column properties, set each column's HeaderText property to "Supplier #", "Contact name", "Company name", and "Address" respectively and click Apply.
Note: To view changes to each Template Column, you must click the Apply button.

7. 8.

From the Available columns list, expand the Command Field node and select Edit, Update, Cancel. Click the arrow button between the column lists to copy the Edit, Update, Cancel into the Selected columns list. The Selected columns list should look like this:

42

Click OK to close the C1GridView Properties dialog box.

Binding Template Columns

This topic explains how to bind the following to a data source: a non-editable template column and a template column that can be edited at run time. Note that this topic assumes you have completed the Adding Template Columns (page 42) topic. Binding a non-editable template column To bind a non-editable template column Supplier # to a data source, complete the following steps: 1. 2. Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, click Edit Templates. The template editor appears:

3.

Click the C1GridView Smart Tag and select Column[0] Supplier # from the Display drop-down list. The template editor appears:

43

4. 5. 6. 7. 8.

From the Standard tab in the Toolbox, drag a Label control into the Item Template section. If the Label Tasks menu does not appear, click the Label1 Smart Tag, and then click Edit DataBindings. The Label1 DataBindings window appears. Select Text in the Bindable properties list, and then select the SupplierID field from the Bound to box. Click OK. Click the C1GridView Smart Tag, and select End Template Editing from the C1GridView Tasks menu.

Binding editable template columns To bind editable template columns Contact name, Company name, and Address to a data source, complete the following steps: 1. 2. 3. 4. 5. Click C1GridView's smart tag and select Edit Templates. Select Column[1] Contact name from the Display drop-down list. From the Standard tab in the Toolbox, drag a Label control into the Item Template section. If the Label Tasks menu does not appear, click the Label2 Smart Tag, and then click Edit DataBindings. The Label2 DataBindings window appears. Select Text in the Bindable properties list, and then select the ContactName field from the Bound to combo box.

44

6. 7. 8. 9.

Click OK. From the Standard tab in the Toolbox, drag a TextBox control into the EditItem Template section. If the TextBox Tasks menu does not appear, click the TextBox1 Smart Tag, and then click Edit DataBindings. Select Text in the Bindable properties list, and then select the ContactName field from the Bound to check box.

10. Make sure that the Two-way databinding check box is selected and click OK. 11. Repeat the steps above for the Company name and Address columns. Bind them to the CompanyName and Address fields accordingly. 12. Click the C1GridView Smart Tag and select End Template Editing from the C1GridView Tasks menu. What You've Accomplished Run the project. When you click the Edit button in the first row, an editable text box appears for each column except for the Supplier # column. You can edit the information, and click Update to update the database or click Cancel to ignore any edits you made.

Adding CheckBox or ListBox Controls to a Column

To use the standard ASP.NET CheckBox and ListBox controls to display data for a column, complete the following steps: 1. 2. 3. 4. 5. 6. 7. 8. Right-click C1GridView and select Show Smart Tag from the context menu. From the C1GridView Tasks menu, select Property builder. The C1GridView Properties dialog box appears. Click the Columns tab in the left pane. Under Column List, select Template Field from the list of Available columns. Click the arrow button between the column lists to copy the Template Field to the list of Selected columns. Select the new Template Field and set the desired properties under Column properties. This might include adding a header or footer to the column, fixing the column's size or position, and so on. Click OK to return to the form. Click the C1GridView Smart Tag and select Edit Templates from the C1GridView Tasks menu. Click the Display drop-down arrow and choose the new Template Field you created. The template editor Document appears.

45

9.

Select the ItemTemplate section.

10. Double-click the CheckBox or ListBox control in the Visual Studio Toolbox to add it to the ItemTemplate section. Note that you can format the CheckBox or ListBox using the Properties window. 11. Click the C1GridView Smart Tag and select End Template Editing from the C1GridView Tasks menu.

Adding ComponentOne Input for ASP.NET Wijmo Controls

ComponentOne GridView for ASP.NET Wijmo is fully compatible with ComponentOne Input for ASP.NET Wijmo controls. Using the Input for ASP.NET Wijmo controls, you can easily add in data validation to your grid, including masked, date, numeric, percent, and currency editing.
Note: For more information about ComponentOne Input for ASP.NET Wijmo, see the Input for ASP.NET Wijmo documentation.

In the following steps you'll create template columns in the C1GridView control and add the C1InputNumeric and C1InputCurrency controls to those columns. Note that in the follow steps it is assumed that you have created a C1GridView control and bound it to the Products table of the NorthWind database. Complete the following steps: 1. 2. 3. 4. Right-click C1GridView and select Show Smart Tag from the context menu. From the C1GridView Tasks menu, select Property builder. The C1GridView Properties dialog box appears. Click the Columns tab in the left pane. If the Create columns automatically at run time check box is selected, deselect it. In the Selected columns list, remove the following columns by selecting the column and clicking the Delete button: ProductID, SupplierID, CategoryID, UnitPrice, UnitsInStock, UnitsOnOrder, and ReorderLevel. Note that you'll add template columns to replace most of these columns. 5. 6. 7. 8. 9. In the Available columns list, select Template Field from the list of column types. Click the arrow button between the column lists to copy the Template Field to the list of Selected columns. Repeat this step two more times, so that you've added a total of three template columns. Set the HeaderText property for each template column to "Price", "Stock", and "Ordered", respectively. Using the Down arrow button, move the Discontinued column to the bottom of the Selected columns list. Click OK to return to close the C1GridView Properties dialog box and return to the form.

10. Click the C1GridView Smart Tag and select Edit Templates from the C1GridView Tasks menu. 11. Add the C1InputCurrency control to the Price column: a. b. c. In the C1GridView Tasks menu, click the Display drop-down arrow and under Column[2] Price, choose Item Template. The Item Template editor appears. Click in the body area of the template, navigate to the Visual Studio Toolbox, and double-click the C1InputCurrency control to add it to the ItemTemplate.

d. Click the C1InputCurrency control's smart tag, and select Edit DataBindings from the C1InputCurrency Tasks menu. This will open the C1InputCurrency DataBindings dialog box. e. In the C1InputCurrency DataBindings dialog box, select the Show all properties check box if it is not already selected.

46

f. g.

Select Value in the list of Bindable properties, choose the Field binding radio button, and in the Bound to drop-down list, select UnitPrice. Click OK to save your settings and close the C1InputCurrency DataBindings dialog box.

h. Click once on the C1InputCurrency control to select it and in the Properties window set the Width property to "60px". 12. Add the C1InputNumeric control to the Stock column: a. b. c. Click the C1GridView Smart Tag, click the Display drop-down arrow, and under Column[3] Stock, choose Item Template. Click in the body area of the template, navigate to the Visual Studio Toolbox, and double-click the C1InputNumeric control to add it to the ItemTemplate. Click the C1InputNumeric control's smart tag, and select Edit DataBindings from the C1InputNumeric Tasks menu. This will open the C1InputNumeric DataBindings dialog box.

d. In the C1InputCurrency DataBindings dialog box, select the Show all properties check box if it is not already selected. e. f. g. Select Value in the list of Bindable properties, choose the Field binding radio button, and in the Bound to drop-down list, select UnitsInStock. Click OK to save your settings and close the C1InputNumeric DataBindings dialog box. Click once on the C1InputNumeric control to select it and in the Properties window set the Width property to "60px".

h. Click the C1InputNumeric control's smart tag and, in the C1InputNumeric Tasks menu, enter "0" in the DecimalPlaces text box. 13. Add the C1InputNumeric control to the Ordered column: a. b. c. Click the C1GridView Smart Tag, click the Display drop-down arrow, and under Column[4] Ordered, choose Item Template. Click in the body area of the template, navigate to the Visual Studio Toolbox, and double-click the C1InputNumeric control to add it to the ItemTemplate. Click the C1InputNumeric control's smart tag, and select Edit DataBindings from the C1InputNumeric Tasks menu. This will open the C1InputNumeric DataBindings dialog box.

d. In the C1InputCurrency DataBindings dialog box, select the Show all properties check box if it is not already selected. e. f. g. Select Value in the list of Bindable properties, choose the Field binding radio button, and in the Bound to drop-down list, select UnitsOnOrder. Click OK to save your settings and close the C1InputNumeric DataBindings dialog box. Click once on the C1InputNumeric control to select it and in the Properties window set the Width property to "60px".

h. Click the C1InputNumeric control's smart tag and, in the C1InputNumeric Tasks menu, enter "200" in the MaxValue text box. 14. Click the C1GridView Smart Tag and select End Template Editing from the C1GridView Tasks menu. What You've Accomplished Run your application and observe that the grid now uses ComponentOne Input for ASP.NET Wijmo controls in the Price, Stock, and Ordered columns:

47

Setting Column Width

This topic demonstrates how to set the width of a column in C1GridView. A column's width can be specified in code if the column is not automatically generated. To set the column width: 1. 2. 3. Set the AutoGenerateColumns property of C1GridView to False. Specify the columns to appear in C1GridView. See Hiding Specified Columns (page 37) for more information. Set the width of the third column, for example, via the Code Editor or at design time: Add the following code after the DataBind method is called: OR OR Edit the column's markup to include a Width element: <wijmo:C1BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" Width="500"> What You've Accomplished In this topic you learned how to change the width of a column. In this example, the third column is 500 pixels: From the Property builder, select Format tab in the left pane and select a column from the list of Columns on the right. Change the Width property to 500 Pixels, and click OK. Visual Basic C1GridView1.Columns(2).ItemStyle.Width = New Unit(500) C# C1GridView1.Columns[2].ItemStyle.Width = new Unit(500);

48

Merging Rows
This topic demonstrates how to merge rows containing identical text in C1GridView. The RowMerge property allows the selected column to merge rows with the same text. For example in the following image, setting the RowMerge property to Free allows the Property column to merge the rows with the same text:

In Code Use the RowMerge property of the C1GridView class to determine if and how rows are merged: Visual Basic CType(C1GridView1.Columns(0), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free C#

49

((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[0]).RowMerg e = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free; In Source View Set the RowMerge property in the column's markup: <wijmo:C1GridView ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <wijmo:C1BoundField DataField="ProductName" SortExpression="ProductName" HeaderText="Name" RowMerge="Free" /> <wijmo:C1BoundField DataField="OrderID" SortExpression="OrderID" HeaderText="OrderID" /> <wijmo:C1BoundField DataField="Quantity" SortExpression="Quantity" HeaderText="Quantity" /> <wijmo:C1BoundField DataField="Total" SortExpression="Total" HeaderText="Totals" /> </Columns> </wijmo:C1GridView> In Design View The RowMerge property can also be accessed in the Property Builder. Simply select a column from the list of Selected columns, click the drop-down arrow next to the RowMerge property and choose Free or Restricted. The default is None.
Sample Project Available For the complete sample, see the Merging page located in the ControlExplorer sample. See GridView for ASP.NET Wijmo Samples (page 31) for more information.

Creating a Pageable Grid

This topic demonstrates how to display the contents of C1GridView on multiple pages, navigate through those pages and set the number of items to be displayed on each page. For more information, see the Paging (page 29) topic. In the Designer Complete the following steps: 1. 2. 3. 4. Right-click the C1GridView control and then click Show Smart Tag. On the C1GridView Tasks menu, click Property builder. The C1GridView Properties window appears. Select the Paging tab and check the Allow paging check box. This sets the AllowPaging property to True. Specify the number of rows to appear on the page in the Page size text box, for example "4". The Show navigation check box under Page navigation is selected by default. This places the page navigation buttons on the page. You can specify their location on the page by clicking the Position dropdown arrow and selecting Bottom, Top, or TopAndBottom. The Mode property is set to Numeric by default, so numeric navigation buttons appear on the page.

In Source View Complete the following steps: 1. Add AllowPaging="True" and PageSize="4" to the <wijmo:C1GridView> tag to set the AllowPaging property to True and the PageSize property to move through the pages of data from the data source four items at a time: <wijmo:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1"

50

VisualStylePath="~/C1WebControls/VisualStyles" AllowPaging="True" PageSize="4"> The Mode property is set to Numeric by default, so numeric navigation buttons appear on the page. 2. If you want to change the position of the navigation buttons, set the Position to Top or TopAndBottom by adding <PagerSettings Position="TopAndBottom"/> or <PagerSettings Position="TopAndBottom"/> between the <wijmo:C1GridView> and </wijmo:C1GridView> tags.

In Code Complete the following steps: 1. Set AllowPaging property to True and PageSize to 4 to move through the pages of data from the data source four items at a time. The Mode property is set to Numeric by default, so numeric navigation buttons appear on the page. Visual Basic C1GridView1.AllowPaging = True C1GridView1.PageSize = 4 C# C1GridView1.AllowPaging = true; C1GridView1.PageSize = 4;

2.

If you want to change the position of the navigation buttons, set the Position to Top or TopAndBottom.

What You've Accomplished Run your application and observe that paging controls appear at the bottom of the grid, and that 4 items are displayed on each page:

Creating a Scrollable Grid

To enable vertical and horizontal scrolling in a C1GridView control, select the C1GridView control and set the ScrollMode property to a ScrollMode enumeration value. For example, use the following code: Visual Basic ' Set the grid's height and width. C1GridView1.Height = 250 C1GridView1.Width = 450

51

' Turn scrolling on and set both horizontal and vertical scrolling. C1GridView1.ScrollMode = Both C# // Set the grid's height and width. C1GridView1.Height = 250; C1GridView1.Width = 450; // Turn scrolling on and set both horizontal and vertical scrolling. C1GridView1.ScrollMode = Both;

The grid will have both horizontal and vertical scrollbars. Note that the Height and Width properties must be specified in order for the scrollbars to appear and scroll properly.

Getting a Value from a Cell

By default client-side selection information is unavailable on the server. However, you can track when the current cell position changes and send this data to server at postback. For example, complete the following steps: 1. Add the following script to your application's markup: <script type="text/javascript"> function onCurrentCellChanged(e, args) { $("#currentCellValue").val($(e.target).c1gridview("currentCell").value()); } </script> 2. Edit the C1GridView's markup so it appears similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" DataSourceID="AccessDataSource1" AutogenerateColumns="false" OnClientCurrentCellChanged="onCurrentCellChanged"> <Columns> <wijmo:C1BoundField DataField="OrderID" HeaderText="OrderID" /> <wijmo:C1BoundField DataField="Quantity" HeaderText="Quantity" /> </Columns> </wijmo:C1GridView> Switch to Code View and add the following code to your application: protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterHiddenField("currentCellValue", null); if (IsPostBack) { string currentCellValue = Page.Request["currentCellValue"]; } }

3.

This code allows you to track when the current cell position changes and send this data to server at postback.

Updating the Grid with AJAX

The following task-based help items demonstrate setting C1GridView properties to use AJAX to update the grid, including moving columns, paging, sorting, filtering and more. Note that multiple Action may be selected for a grid, or you can set the Action property to All for all actions on the grid to be performed via callbacks.

52

Moving Columns
You can use AJAX to update the grid when the user moves columns at run time. For example, you can update the grid with AJAX on column move in the Designer, in Source view, and in code. In the Designer To enable AJAX when moving a column, complete the following steps: 1. 2. Select the C1GridView control and set the AllowColMoving property to True in the Properties window. If you run the program now, you will notice that the whole page refreshes when you move a column. In the project, with C1GridView still selected, click the drop-down arrow next to the Action property in the Properties window and check the ColMove check box.

In Source View Switch to Source view and add AllowColMoving="True" and CallbackOptions="ColMove" to the <wijmo:C1GridView> tag, so it appears similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowColMoving="True" CallbackOptions="ColMove"> In Code To enable AJAX when moving a column, add the following code to the Page_Load event: Visual Basic C1GridView1.AllowColMoving = True C1GridView1.CallbackOptions = CallbackOptions.ColMove C# C1GridView1.AllowColMoving = true; C1GridView1.CallbackOptions = CallbackOptions.ColMove;

What You've Accomplished Run the program and move a column. You will notice only the grid refreshes, not the entire page.

Editing a Record
You can use AJAX to update the grid when the user edits a record at run time. For more information about editing records, see the Editing Rows (page 24) topic. To enable AJAX when editing a record, complete the following steps: 1. 2. 3. 4. 5. 6. Select the C1GridView control and click the Smart Tag to open the C1GridView Tasks menu. Select Property builder. The C1GridView Properties dialog box (the Property builder) appears. Click the Columns tab and expand the Command Column node in the list of Available columns. Click Edit, Update, Cancel and then click the arrow button to add the Edit, Update, Cancel button column to the list of Selected columns. Click OK to close the Property builder. With the C1GridView control still selected, click the drop-down arrow next to the Action property in the Properties window and check the Editing check box.

What You've Accomplished Run the program and notice that only the grid refreshes when you click the Edit button. The entire page does not have to reload.

53

Paging the Grid

You can use AJAX to update the grid when the user pages the grid at run time. For example, you can update the grid with AJAX on grid paging in the Designer, in Source view, and in code. For more information about paging, see Paging (page 29) and Creating a Pageable Grid (page 50). In the Designer To enable AJAX when paging through a C1GridView, complete the following steps: 1. 2. 3. 4. 5. Select the C1GridView control and click the Smart Tag to open the C1GridView Tasks menu. Select Property builder. The C1GridView Properties dialog box (the Property builder) appears. Click the Paging tab and select the Allow paging check box in the Paging section. Click OK to close the Property builder. With the C1GridView control still selected, click the drop-down arrow next to the Action property in the Properties window and check the Paging check box.

In Source View Switch to Source view and add AllowPaging="True" and CallbackOptions="Paging" to the <wijmo:C1GridView> tag, so it appears similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowPaging="True" CallbackOptions="Paging"> In Code To enable AJAX when filtering a column, add the following code to the Page_Load event: Visual Basic C1GridView1.AllowPaging = True C1GridView1.CallbackOptions = CallbackOptions.Paging C# C1GridView1.AllowPaging = true; C1GridView1.CallbackOptions = CallbackOptions.Paging;

What You've Accomplished Run the program and click the paging navigation at the bottom of the grid. Notice that only the grid refreshes as you page through it. The entire page is not reloaded.

Selecting a Record
You can use AJAX to update the grid when the user selects a record at run time. To enable AJAX when selecting a record, complete the following steps: 1. 2. 3. 4. 5. 6. 7. Select the C1GridView control and click the Smart Tag to open the C1GridView Tasks menu. Select Property builder. The C1GridView Properties dialog box (the Property builder) appears. Click the Columns tab and expand the Command Column node in the list of Available columns. Click Select and then click the arrow button to add a Select button column to the list of Selected columns. Click the Format tab and choose Selected Items in the list of Objects. Click the Back color drop-down arrow and choose a color. This will highlight the selected record in the grid. Click OK to close the Property builder.

54

8.

With the C1GridView control still selected, click the drop-down arrow next to the Action property in the Properties window and check the Selection check box.

What You've Accomplished Run the program and notice that only the grid refreshes when you select a record in the grid.

Sorting Columns
You can use AJAX to update the grid when the user sorts a column at run time. For example, you can update the grid with AJAX on column sort in the Designer, in Source view, and in code. For more information about sorting, see the Sorting (page 26) topic. In the Designer To enable AJAX when sorting on a column, complete the following steps: 1. 2. 3. 4. 5. Select the C1GridView control and click the Smart Tag to open the C1GridView Tasks menu. Select Property builder. The C1GridView Properties dialog box (the Property builder) appears. Click the General tab and select the Allow sorting check box in the Behavior section. Click OK to close the Property builder. If you run the program now, you will notice that the whole page refreshes when you sort a column. In the project, with the C1GridView control still selected, click the drop-down arrow next to the Action property in the Properties window and check the Sorting check box.

In Source View Switch to Source view and add AllowSorting="True" and CallbackOptions="Sorting" to the <wijmo:C1GridView> tag, so it appears similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowSorting="True" CallbackOptions="Sorting"> In Code To enable AJAX when filtering a column, add the following code to the Page_Load event: Visual Basic C1GridView1.AllowSorting = True C1GridView1.CallbackOptions = CallbackOptions.Sorting C# C1GridView1.AllowSorting = true; C1GridView1.CallbackOptions = CallbackOptions.Sorting;

What You've Accomplished Now when you run the program and sort a column, you will notice that only the grid, and not the entire page, refreshes.

Filtering Columns
You can use AJAX to update the grid when the user filters columns at run time. For example, you can update the grid with AJAX on filtering in the Designer, in Source view, and in code. For more information about filtering columns, see the Filtering (page 27) topic. In the Designer To enable AJAX when filtering a column, complete the following steps: 1. Select the C1GridView control and navigate to the Properties window.

55

2. 3. 4.

In the Properties window, set the ShowFilter property to True. If you run the program now, you will notice that the whole page refreshes when you filter a column. In the project, with the C1GridView control still selected, click the drop-down arrow next to the Action property in the Properties window and check the Filtering check box.

In Source View Switch to Source view and add ShowFilter="True" and CallbackOptions="Filtering" to the <wijmo:C1GridView> tag, so it appears similar to the following: <wijmo:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" ShowFilter="True" CallbackOptions="Filtering"> In Code To enable AJAX when filtering a column, add the following code to the Page_Load event: Visual Basic C1GridView1.ShowFilter = True C1GridView1.CallbackOptions = CallbackOptions.Filtering C# C1GridView1.ShowFilter = true; C1GridView1.CallbackOptions = CallbackOptions.Filtering;

What You've Accomplished Now when you run the program and filter a column, you will notice that only the grid refreshes.

Updating the Grid at Run Time

While you can use the RowUpdating event to edit the grid's underlying data source, another option is to use the client-side Update() method. The RowUpdating event gets fired when the client side Update() method is called. In some situations you may prefer this method to send edits done by user to server in client-editing mode. In this example, you'll add a button that updates the grid when clicked. Complete the following steps: 1. 2. Select View | Markup to switch to Source view. Add the following markup just above the <wijmo:C1GridView> tag to add a button to the application. <asp:Button ID="btn1" runat="server" Text="Update" OnClientClick="btn_ClientClick()" /> 3. Add the following markup inside the application's <head></head> tags: <script type="text/javascript"> function btn_ClientClick(sender, args) { var grid = $("#C1GridView1"); grid.c1gridview("endEdit"); grid.c1gridview("update"); } </script> This script will update the grid when the button is clicked. What You've Accomplished Run your application and click the Update button the grid will be updated.

56

GridView for ASP.NET Wijmo ClientSide Reference

As part of the amazing ComponentOne Web stack, the Wijmo jQuery UI widgets are optimized for client-side Web development and utilize the power of jQuery for superior performance and ease of use. The ComponentOne Wijmo Web site at http://wijmo.com/widgets/ provides everything you need to know about Wijmo widgets, including demos and samples, documentation, theming examples, support and more. The client-side documentation provides an overview, sample markup, options, events, and methods for each widget. To get started with client-side Web development for GridView for ASP.NET Wijmo, click one of the external links to view our Wijmo wiki documentation. Note that the Overview topic for each of the widgets applies mainly to the widget, not to the server-side ASP.NET Wijmo control. wijgrid dependencies wijgrid enumerations wijgrid options wijgrid events wijgrid methods

57