Visual WebGui V.6.4.0D - New Features and Functionalities PDF

Visual WebGui
V.6.4.0E
New Features and
Functionalities
This documentation and any related computer software help programs (hereinafter referred to as the
“Documentation”) is for the end user’s informational purposes only and is subject to change or withdrawal by
GIZMOX at any time.
This Documentation may not be copied, transferred, reproduced, disclosed, modified or duplicated, in whole or in
part, without the prior written consent of GIZMOX. This Documentation is confidential and proprietary information
of GIZMOX and protected by the copyright laws of the United States and international treaties.
Notwithstanding the foregoing, licensed users may print a reasonable number of copies of the Documentation for
their own internal use, and may make one copy of the related software as reasonably required for back-up and
disaster recovery purposes, provided that all GIZMOX copyright notices and legends are affixed to each reproduced
copy. Only authorized employees, consultants, or agents of the user who are bound by the provisions of the license
for the Product are permitted to have access to such copies.
The right to print copies of the Documentation and to make a copy of the related software is limited to the period
during which the applicable license for the Product remains in full force and effect. Should the license terminate for
any reason, it shall be the user’s responsibility to certify in writing to GIZMOX that all copies and partial copies of
the Documentation have been returned to GIZMOX or destroyed.
EXCEPT AS OTHERWISE STATED IN THE APPLICABLE LICENSE AGREEMENT, TO THE EXTENT PERMITTED BY
APPLICABLE LAW, GIZMOX PROVIDES THIS DOCUMENTATION “AS IS” WITHOUT WARRANTY OF ANY KIND,
INCLUDING WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE OR NONINFRINGEMENT. IN NO EVENT WILL GIZMOX BE LIABLE TO THE END USER OR ANY
THIRD PARTY FOR ANY LOSS OR DAMAGE, DIRECT OR INDIRECT, FROM THE USE OF THIS DOCUMENTATION,
INCLUDING WITHOUT LIMITATION, LOST PROFITS, BUSINESS INTERRUPTION, GOODWILL, OR LOST DATA, EVEN
IF GIZMOX IS EXPRESSLY ADVISED OF SUCH LOSS OR DAMAGE.
The use of any product referenced in the Documentation is governed by the end user’s applicable license
agreement.
The manufacturer of this Documentation is Gizmox.
Provided with “Restricted Rights.” Use, duplication or disclosure by the United States Government is subject to the
restrictions set forth in FAR Sections 12.212, 52.227-14, and 52.227-19(c)(1) - (2) and DFARS Section 252.227-
7014(b)(3), as applicable, or their successors.
All trademarks, trade names, service marks, and logos referenced herein belong to their respective companies.
Copyright © 2012 Gizmox. All rights reserved.

Contents
Chapter 1: Introduction ..................................................................................................... 6

About this Document ............................................................................................................... 6
Requirements ......................................................................................................................... 6
Adding References ............................................................................................................. 6
Registering the New Controls .............................................................................................. 9
Registering Namespaces and Controls Using the Property Pages ...................................... 10
Registering Namespaces and Controls Using the Web.config File ...................................... 14
Adding the New Controls to the Toolbox ............................................................................. 16
Chapter 2: RibbonBar ...................................................................................................... 19

Exploring the RibbonBar ......................................................................................................... 19
Quick Access Toolbar ............................................................................................................. 20
Adding a Quick Access Toolbar to the RibbonBar.................................................................. 21
Adding Buttons to the Quick Access Toolbar ........................................................................ 23
Changing the Height of the Quick Access Toolbar Panel ........................................................ 29
Using the Quick Access Toolbar Button ............................................................................... 31
Adding Context Items to the Quick Access Toolbar Menu ...................................................... 33
Start Menu and Button........................................................................................................... 36
Adding a Start Menu Button to the RibbonBar ..................................................................... 38
Adding an Image to the Start Menu Button ......................................................................... 40
Changing the Surrounding Area of the Start Button ............................................................. 42
Changing the Start Menu Button Diameter and Location ....................................................... 44
Changing the Start Menu Button Diameter .................................................................... 44
Changing the Start Menu Button Location ..................................................................... 45
Adding Static Menu Items to the Start Menu ....................................................................... 47
Changing the Size of the Start Menu .................................................................................. 53
Adding Dynamic Menu Items to the Start Menu ................................................................... 55
Expand Button ...................................................................................................................... 62
Adding an Expand Button to the RibbonBar ......................................................................... 62
Chapter 3: DataGridView ................................................................................................. 65

Hierarchical Grid ................................................................................................................... 65
Requirements.................................................................................................................. 66
Creating a Hierarchical Grid using the Designer ................................................................... 66
Creating a Hierarchical Grid through Code .......................................................................... 78
Events............................................................................................................................ 88
Setting the Expanding Button Mode ................................................................................... 91
Setting the Height of the Expanding Panel .......................................................................... 93
Introduction
Setting the Colors of the Nested Tables .............................................................................. 98

Column Chooser................................................................................................................... 100
Adding a Column Chooser ................................................................................................ 101
Using the Column Chooser ............................................................................................... 102
Filtering by Column using a Filter Row .................................................................................... 105
Understanding the Filter Row Feature ................................................................................ 105
Requirements................................................................................................................. 107
Adding a Filter Row ......................................................................................................... 108
Setting the Maximum Number of Filtering Values ................................................................ 110
Grouping by Column ............................................................................................................. 112
Requirements................................................................................................................. 114
Grouping by Column at Run-Time ..................................................................................... 114
Enabling the Grouping by Column Functionality for Run-Time ......................................... 114
Grouping by Column at Run-Time ............................................................................... 116
Grouping by Column at Design-Time ................................................................................. 120
Selecting Columns for Grouping .................................................................................. 120
Hiding the Grouping Drop Area ................................................................................... 123
Grouping by Column using Command Buttons .................................................................... 124
Customizing the Header of Grouped Columns ..................................................................... 126
Setting the Content of the Grouped Column Header ...................................................... 128
Setting the Colors of the Grouped Column Header ......................................................... 130
Adding an Item Count to the Grouped Column Header ................................................... 132
Displaying a Grid Caption ...................................................................................................... 137
Column Fill Mode.................................................................................................................. 139
Setting the Fill Mode for the Columns of an Entire Table ...................................................... 139
Setting the Fill Mode for a Specific Column ........................................................................ 141
EditOnEnter Mode for Cells .................................................................................................... 142
Dotted Style for Borders and Cells .......................................................................................... 144
Border Style................................................................................................................... 144
Cell Border Style ............................................................................................................ 146
Chapter 4: ExpandableGroupBox................................................................................. 148

Exploring the ExpandableGroupBox Control ............................................................................. 148
Adding an ExpandableGroupBox ............................................................................................. 149
Setting the Default State of an ExpandableGroupBox as Collapsed ............................................. 150
Changing the Order of the Text and Image of the ExpandableGroupBox Header ........................... 152
Creating an Accordion Behavior ............................................................................................. 154
Chapter 5: Miscellaneous .............................................................................................. 162

Strip Controls ...................................................................................................................... 162
ToolStrip ....................................................................................................................... 162
MenuStrip ...................................................................................................................... 165
ContextMenuStrip ........................................................................................................... 168
4
VWG V.6.4D – New Features
About this Document
StatusStrip .................................................................................................................... 172

Placing Tabs across the Bottom of the TabControl .................................................................... 175
Applying Character Casing to a ComboBox .............................................................................. 177
Loading RTF Files using the RichTextBox ................................................................................. 178
Changing the RadioButton Appearance ................................................................................... 181
Appendix A: Adding Images and Other Resources to VWG Projects ....................... 183
Using the Default Location of Images ...................................................................................... 183
Changing the Default Location of Images ................................................................................ 184
Adding a Custom Folder for Resources .................................................................................... 189
Appendix B: Creating Themes and Using the Theme Designer ................................. 190
Creating a Theme................................................................................................................. 190
Using the Theme Designer .................................................................................................... 193
5
Introduction
Introduction
Chapter 1: Introduction
About this Document

This document introduces and describes the new features and
functionalities of Visual WebGui (VWG) Version 6.4.0D.
VWG Version 6.4.0D WinWeb is functionally equivalent to VWG Version

Beta4 JQT (.NETHTML5).
Note: A detailed description of the new DockingManager control is not

included in this document. This description, along with other related
information, will be included in the next version of the document.
Important! The new features and functionalities described in this

document are Beta release.
Requirements
To use the new controls and functionalities, you need to perform the
following steps to prepare your VWG application project:
1. Adding references, see the section below.
2. Registering the new controls, see page 9.
3. Adding the new controls to the Toolbox, see page 16.
Adding References
Notes:
 In the following section some distinction is made between "with
sources" and "without sources" installations. "With sources"
installation means installing “with sources” installation package,
and either work with the source code in that installation, or work
with Visual WebGui SVN source code. "Without sources"
installation means working with a standard Visual WebGui
framework version, with no access to its source code.
6
Requirements
 The standard set of assemblies that are required for developing

Visual WebGui projects using Visual WebGui framework "without
sources" includes:
 Gizmox.WebGUI.Client
 Gizmox.WebGUI.Common
 Gizmox.WebGUI.Forms
 Gizmox.WebGUI.Server
 Gizmox.WebGUI.Forms.Themes
When using “with sources” installation, the following assemblies
are required for a standard development as well:
 Gizmox.WebGUI.Common.Design
 Gizmox.WebGUI.Forms.Design
To use the new controls and functionalities, you need to add as

references the following assemblies that contain them:
 Gizmox.WebGUI.Forms.Professional
 Gizmox.WebGUI.Forms.Office
 Gizmox.WebGUI.Forms.Converters (for the RichTextBox only,
see page 178)
When using "with sources" installation, to work with the new features
and functionalities in the Designer, you also need to add as references
the following assemblies:
 Gizmox.WebGUI.Forms.Professional.Design
 Gizmox.WebGUI.Forms.Office.Design
Note: If you are using “without sources” installation, these assemblies

exist in the GAC.
7
Introduction
Introduction
 To add a reference to VWG project:

1. On the Solution Explorer, right-click the References folder, and
select Add Reference from the pop-up menu:
The Add Reference dialog box opens:
2. On the .NET tab of the Add Reference dialog box, select the
assemblies you want to add to your project, and click OK.
The selected assemblies are added to your project.
Note: Make sure that the Copy Local property of all Gizmox
assemblies is set to True.
8
Requirements
Registering the New Controls
After referencing the required assemblies to your project, there are

two new controls that you need to register – the ExpandableGroupBox
and the DockingManager controls.
Note: For using the new features of VWG v.6.4.0E, registration is only
required for the two controls mentioned above. Most of the standard
out-of-the-box controls do not require registration.
If a control that requires registration is used in your project, and it is

not registered, once you run the application, a runtime exception is
thrown.
You can either register each control separately, or you can register at
once all the controls that have the same namespace. Registering a
namespace is quicker than registering each control individually.
However, since everything you register is downloaded to the client,
and it might influence your application performance, you should
consider which method is best for you.
You can register the controls using the Property pages of your
project, which are integrated in your VWG project, or using the
Web.config file.
9
Introduction
Introduction
Registering Namespaces and Controls Using the Property Pages
 To register controls and namespaces using the Property pages

of your project:
1. To open the Property pages, on the Solution Explorer, right-click
your project and select Properties:
Notes:
 To open the Property pages of your project, you can also
perform the following:
 C# - Double-click the Properties folder in your project.
 VB.NET – Double-click the My Project folder in your
project.
 When using Visual WebGui Express Studio for Visual Studio
Express and Visual Web Developer Express, Visual WebGui
Integration tabs are not available on the Property pages. For
these versions, you should manually register the controls using
the Web.config file, as described on page 14.
10
Requirements
The Property pages appear:
2. Click the Registration tab on the left to open it, and on the
Controls section, click the Add button:
11
Introduction
Introduction
The Choose Controls dialog box appears:
3. Perform one of the following:

Note: You can select and register multiple namespaces and
controls.
 To register a namespace – click the Namespace tab to open
it, select the check box of the namespace you want to register,
and click OK:
The selected namespace is now registered.
12
Requirements
 To register a control – click the Controls tab to open it,

select the check box of the control you want to register, and
click OK:
Note: To easily locate a control, enter the control name in the

Filter box.
The selected control is now registered.
The controls and namespaces you registered appear on the
Controls section of the Registration tab:
13
Introduction
Introduction
Registering Namespaces and Controls Using the Web.config File
 To register controls and namespaces using the Web.config file:

1. To open the Web.config file, on the Solution Explorer, double-click
it:
The Web.config file appears:
14
Requirements
2. On the Controls section, register a namespace or a control

according to the following:
 To register a namespace – use the following example to
register the required namespaces:
<Control Type="Gizmox.WebGUI.Forms.*, Gizmox.WebGUI.Forms.Professional,
Version=4.0.5701.0,
Culture=neutral,
PublicKeyToken=6b5c571512bede7c" />
The registration of a namespace consists of the following:

 The namespace with an asterisk (meaning, every control
that is included in the namespace):
Gizmox.WebGUI.Forms.*
 The assembly name:
Gizmox.WebGUI.Forms.Professional
 The version number of the VWG assembly:
Version=4.0.5701.0
Note: The versions of the available VWG assemblies are as
follows:
 MS .NET4.0 (Visual Studio 2010) – Version=4.0.5701.0
 The culture of the assembly in RFC-1766 format, or
"neutral" for language-independent assemblies:
Culture=neutral
 String value of public key token in hexadecimal format:
PublicKeyToken=d50c2c7452ba77d9
 To register a control – use the following example to register

the required controls:
<Control Type="Gizmox.WebGUI.Forms.ExpandableGroupBox,
Gizmox.WebGUI.Forms.Professional, Version=4.0.5701.0, Culture=neutral,
PublicKeyToken=6b5c571512bede7c" />
The registration of a control consists of the following:

 The name of the control along with the namespace that
contains it (full qualified name):
Gizmox.WebGUI.Forms.ExpandableGroupBox
15
Introduction
Introduction
 The assembly name:

Gizmox.WebGUI.Forms.Professional
 The version number of the VWG assembly:
Version=4.0.5701.0
Note: For the list of available versions, see the Note in the
above section.
 The culture of the assembly in RFC-1766 format, or
"neutral" for language-independent assemblies:
Culture=neutral
 String value of public key token in hexadecimal format:
PublicKeyToken=d50c2c7452ba77d9
Adding the New Controls to the Toolbox
After referencing the required assemblies to your project, the new

controls should appear on your Toolbox. However, there might be
cases when the new controls do not appear on the Toolbox and you
need to add them manually.
 To manually add individual controls to the Toolbox:

1. On the Toolbox, right-click the All VisualWebGui section, and
select Choose Items from the context menu:
16
Requirements
The Choose Toolbox Items dialog box appears:
Note: To easily locate a control, enter the control name in the

Filter box.
2. On the .NET Framework Components tab, select the check

boxes of the DockingManager and ExpandableGroupBox, and
click OK.
The selected controls are added to your Toolbox.
Note: The new controls might be added to your Toolbox not in an
alphabetical order. To place them in the right order, right-click the
All VisualWebGui section, and select Sort Items Alphabetically
from the context menu.
Notes:
 In some cases, duplicate controls appear in the Toolbox. This
may happen when you manually add controls to the Toolbox,
and then upgrade VWG framework version. To remove the
redundant controls, right-click the Toolbox, and select Reset
Toolbox from the context menu. Then close your form, and re-
open it in the Designer. This procedure clears the Toolbox, and
then adds to it the default controls. However, you may need to
manually add again the new controls that are described in this
chapter.
17
Introduction
Introduction
 If you followed the necessary steps and you still do not see the
new controls, follow these steps:
1. Remove the existing references to Gizmox assemblies.
2. Add again references to the required Gizmox
assemblies.
3. Build the project or solution, and make sure you do not
have any compilation errors.
4. Close Visual Studio.
5. Re-open Visual Studio.
6. Add again the controls to the Toolbox.
18
Exploring the RibbonBar
Chapter 2: RibbonBar
This chapter introduces the new features of the RibbonBar control and
describes the following: adding and customizing a Quick Access
Toolbar, adding a Start Menu and a Start Button and creating static
and dynamic menu items, and adding an Expand button to the
RibbonBar.
Exploring the RibbonBar

The RibbonBar control has several new features that can increase the
ability of the user to quickly discover and use the features and
functions of your application. The new features include:
 Quick Access Toolbar, see page 20.
 Start Menu and Button, see page 36
 Expand Button, see page 62.
Quick Access Toolbar Quick Access Toolbar Button
Start Button
Start Menu
Expand Button
19
RibbonBar
RibbonBar
Note: To add images to the new features of the RibbonBar, you need
to create a Resources/Images folder in your project, and to save the
images there. To learn more about adding images to VWG projects and
controls, see ‎Appendix A: Adding Images, page 183.
Quick Access Toolbar

A Quick Access Toolbar is a small toolbar that appears by default
above the RibbonBar. It can contain a set of frequently-used
commands for easy access, or it can contain unique commands that
are not available elsewhere in the RibbonBar. The set of commands
that are displayed on the Quick Access Toolbar are independent of the
tab that is currently displayed.
When the Quick Access Toolbar is displayed on a running application, it

contains a built-in button. This Quick Access Toolbar button enables
the user to change the location of the Quick Access Toolbar – either
above or below the RibbonBar. It also provides the user with the ability
to minimize the RibbonBar and to hide its content. The Quick Access
Toolbar button can also display a Menu, which allows the user to
customize the items that appear on the Toolbar.
The Quick Access Toolbar Button
A Quick
Access
Toolbar
The Customization Menu of the Quick Access Toolbar Button
20
Adding a Quick Access Toolbar to the RibbonBar
To add a Quick Access Toolbar to the RibbonBar, you need to make the
built-in Quick Access Toolbar visible, by setting the value of the
ShowQuickAccessToolbar property to True. Then, you need to add
command buttons to the Toolbar, as described on page 23.
 To add a Quick Access Toolbar to the RibbonBar:

1. On the Properties window of the RibbonBar control, set the value of
the ShowQuickAccessToolbar property to True:
In the code-behind, you add the Quick Access Toolbar to the

RibbonBar as follows:
C#
this.ribbonBar1.ShowQuickAccessToolbar = true;
VB.NET
Me.RibbonBar1.ShowQuickAccessToolbar = True
21
RibbonBar
RibbonBar
The Quick Access Toolbar is now added to the RibbonBar. When

you start the application, the Quick Access Toolbar appears above
the RibbonBar:
The Quick Access Toolbar button
An empty Quick
Access Toolbar
22
Adding Buttons to the Quick Access Toolbar
After you made the Quick Access Toolbar visible, you need to add
command buttons to it. To add and customize the command buttons
that you want to display on the Quick Access Toolbar, use the
QuickAccessToolBarItems property.
The Quick Access Toolbar is basically a ToolStrip control. Therefore, it

can contain the same items as the ToolStrip control.
 To add buttons to the Quick Access Toolbar:

1. On the Properties window of the RibbonBar control, click the ellipsis
button next to the QuickAccessToolBarItems property:
23
RibbonBar
RibbonBar
The ToolStripItem Collection Editor dialog box appears:
2. To add a button to the Quick Access Toolbar, click the arrow on the
Add button:
A drop-down list appears, displaying the list of available items that

can be added to the Quick Access Toolbar:
24
3. To add a button, select the ToolStripButton item from the drop-

down list.
Note: To add another item to the Quick Access Toolbar instead of
a standard button, select it from the drop-down list.
A new ToolStripButton is created:
4. To add an image to the new button, on the ToolStripButton

properties pane, click the ellipsis button next to the Image
property:
25
RibbonBar
RibbonBar
The Select Resource dialog box appears:
5. On the Select Resource dialog box, select the image of the

button, and click OK.
You return to the ToolStripItem Collection Editor dialog box.
6. To display only the image of the button on the Quick Access
Toolbar, select the Image option from the DisplayStyle property
drop-down list:
7. Customize other properties of the new button using the

ToolStripButton properties pane.
26
8. To add other buttons to the Quick Access Toolbar, click again the
arrow of the Add button, and select ToolStripButton from the
drop-down list.
All the buttons you add appear on the Members pane:
9. Click OK to save your new settings.

You return to the Form Designer.
The new buttons are now added to the Quick Access Toolbar. When
you start the application, they appear above the RibbonBar:
A Quick Access
Toolbar with
command
buttons
27
RibbonBar
RibbonBar
In the code-behind, you add a toolstrip button to the Quick Access

Toolbar as follows:
C#
// Declaring a ToolStripButton
private ToolStripButton toolStripButton1;
// Creating a new ToolstripBotton object
this.toolStripButton1 = new Gizmox.WebGUI.Forms.ToolStripButton();
// Adding the newly created toolStripButton1 to the Quick Access Toolbar
this.ribbonBar1.QuickAccessToolBarItems.Add(this.toolStripButton1);
// Setting the properties of the newly created toolStripButton1
this.toolStripButton1.DisplayStyle =
Gizmox.WebGUI.Forms.ToolStripItemDisplayStyle.Image;
this.toolStripButton1.Image =
new Gizmox.WebGUI.Common.Resources.ImageResourceHandle("print.png");
this.toolStripButton1.Name = "toolStripButton1";
this.toolStripButton1.Size = new System.Drawing.Size(23, 20);
this.toolStripButton1.Text = "Print";
VB.NET
' Declaring a ToolStripButton
Friend WithEvents ToolStripButton1 As Gizmox.WebGUI.Forms.ToolStripButton
' Creating a new ToolstripBotton object
Me.toolStripButton1 = New Gizmox.WebGUI.Forms.ToolStripButton
' Adding the newly created toolStripButton1 to the Quick Access Toolbar
Me.ribbonBar1.QuickAccessToolBarItems.Add(Me.toolStripButton1)
28
' Setting the properties of the newly created toolStripButton1
Me.toolStripButton1.DisplayStyle = Gizmox.WebGUI.Forms.ToolStripItemDisplayStyle
.Image
Me.toolStripButton1.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHand

le("print.png")
Me.toolStripButton1.Name = "toolStripButton1"
Me.toolStripButton1.Size = New System.Drawing.Size(23, 20)
Me.toolStripButton1.Text = "Print"
Changing the Height of the Quick Access Toolbar Panel
You can change the distance between the Quick Access Toolbar and
the RibbonBar tabs, by resizing the height of the Quick Access Toolbar
panel.
Changing the
panel height of
the Quick
Access Toolbar
Note: You cannot currently change the width of the Quick Access
Toolbar.
29
RibbonBar
RibbonBar
 To change the height of the Quick Access Toolbar panel:

1. On the Properties window of the RibbonBar control, enter your
desired value in the QuickAccessToolBarPanelHeight property:
In the code-behind, you change the height of the Quick Access

Toolbar panel as follows:
C#
this.ribbonBar1.QuickAccessToolBarPanelHeight = 70;
VB.NET
Me.RibbonBar1.QuickAccessToolBarPanelHeight = 70
When you start the application, the distance between the Quick
Access Toolbar and the RibbonBar tabs changes according to the
value you entered.
30
Using the Quick Access Toolbar Button

When clicking the Quick Access Toolbar button at run-time, two
options appear by default - Show Below The Ribbon, and
Minimize The Ribbon:
 Show Below The Ribbon – moves the Quick Access Toolbar

below the RibbonBar:
A Quick Access
Toolbar located
below the
RibbonBar
31
RibbonBar
RibbonBar
To return the Quick Access Toolbar to its default location above

the RibbonBar, click its button and select Show Above The
Ribbon:
 Minimize The Ribbon - collapses the RibbonBar tabs, leaving

only the tab headers visible. The visibility of the Start Button
and the QuickAccessToolbar remains the same:
A minimized
RibbonBar
32
 To maximize the RibbonBar, click the Quick Access Toolbar

button and select Maximize The Ribbon:
Adding Context Items to the Quick Access Toolbar Menu

The Quick Access Toolbar button can include a Customization
Menu, which contains some or all of the items that are displayed
on it. This menu allows the user to customize the Toolbar, by
selecting which items will appear on it:
Quick Access
Toolbar Menu
with items
33
RibbonBar
RibbonBar
By selecting an item from the menu, the user can either display or
remove the item from the Quick Access Toolbar:
Quick Access
Toolbar that
was customized
by the user
To add context items to Quick Access Toolbar Menu, use the

QuickAccessToolBarContextMenuItems property, and select
which items you want to provide for customization.
 To add context items to the Quick Access Toolbar Menu:

1. On the Properties window of the RibbonBar control, click the arrow
button next to the QuickAccessToolBarContextMenuItems
property:
The list of items you added to the Quick Access Toolbar is

displayed.
34
2. Select the check box of the items that you want to display on the
Quick Access Toolbar Menu. The user will be able to remove from
the Quick Access Toolbar the items you select here. You can select
all or some of the items.
In the code-behind, you add context items to the Quick Access

Toolbar Menu as follows:
C#
this.ribbonBar1.QuickAccessToolBarContextMenuItems = new string[] {
"toolStripButton1",
"toolStripButton2"};
VB.NET
Me.RibbonBar1.QuickAccessToolBarContextMenuItems = New String()

{"ToolStripButton1", "ToolStripButton2"}
When you start the application, the items you selected in the
QuickAccessToolBarContextMenuItems property appear on the
Quick Access Toolbar menu:
Context Menu Items that were

added for user customization
35
RibbonBar
RibbonBar
Start Menu and Button

The Start Menu, also known as Application Menu, is similar to the
Windows Start menu. It is an area where a list of commands is
displayed, providing access to common options and functionalities.
Usually, the commands are organized in drop-down menus.
The entry point of the Start Menu is a drop-down button. When the
Start Menu Button is clicked, it opens a menu containing the list of
available commands.
By default, the Start Menu is located in the upper-left corner of the

RibbonBar.
Start Menu
Button
Start Menu
36
The Start Menu is composed of 3 panes - Left, Right, and Bottom:
Left Pane Right Pane
Bottom Pane
Each pane is a ToolStrip control, and all types of ToolStrip Items can
be added to the panes.
Generally, the items that can be added to the Start Menu panes are
either Static or Dynamic. Static items are always displayed on the
Start Menu when it is opened. Dynamic items appear when another
item is clicked.
For example, when the Send to button on the left pane is clicked, the
dynamic items on the right pane appear:
Static Items Dynamic Items
You can add static items to all the panes. Dynamic items usually
appear on the right pane, and they are displayed when a static item on
the left pane is clicked.
 To add static items to the Start Menu, see page 42.
 To add dynamic items to the Start Menu, see page 55.
37
RibbonBar
RibbonBar
Adding a Start Menu Button to the RibbonBar
Before creating a Start Menu, you need to add a Start Menu Button to
the RibbonBar. To add a Start Menu Button, make the built-in Start
Menu Button visible, by setting the value of the ShowStartButton
property to True.
 To add a Start Menu Button to a RibbonBar:

1. On the Properties window of the RibbonBar control, set the value of
the ShowStartButton property to True:
In the code-behind, you add the Start Menu Button to the

RibbonBar as follows:
C#
this.ribbonBar1.ShowStartButton = true;
VB.NET
Me.RibbonBar1.ShowStartButton = True
38
The Start Menu Button is now added to the RibbonBar. When you
start the application, it appears on the upper-left corner of the
RibbonBar:
Start Menu
Button
39
RibbonBar
RibbonBar
Adding an Image to the Start Menu Button
By default, the Start Menu Button is blank. You can add an image to it
by using the StartButtonImage property.
 To add an image to the Start Menu Button:

1. On the Properties windows of the RibbonBar control, click the
ellipsis button next to the StartButtonImage property:
The Select Resource dialog box opens:
The Images sub-folder displays the images you can add to the
Start Menu Button.
40
2. Select the image you want to add to the Start Menu Button, and
click OK.
The image is added to the Start Menu Button.
In the code-behind, you add an image to the Start Menu Button as

follows:
C#
this.ribbonBar1.StartButtonImage = new
Gizmox.WebGUI.Common.Resources.ImageResourceHandle("OrangeButton.png ");
VB.NET
Me.RibbonBar1.StartButtonImage = New
Gizmox.WebGUI.Common.Resources.ImageResourceHandle("OrangeButton.png ")
When you start the application, the image appears on the Start
Menu Button of the RibbonBar:
Start Menu
Button with
an image
41
RibbonBar
RibbonBar
Changing the Surrounding Area of the Start Button
You can change the distance between the Start Button and the Quick
Access Toolbar and RibbonBar tabs, by resizing the surrounding area
of the Start Button.
Resizing the surrounding

area of the Start Button
42
 To change the surrounding area of the Start Button:

1. On the Properties window of the RibbonBar control, change the
value of the StartButtonOffset property to your desired value:
In the code-behind, you change the surrounding area of the Start

Button as follows:
C#
this.ribbonBar1.StartButtonOffset = 100;
VB.NET
Me.RibbonBar1.StartButtonOffset = 100
When you start the application, the distance between the Start
Menu Button and the Quick Access Toolbar and RibbonBar tabs
changes according to the value you entered.
43
RibbonBar
RibbonBar
Changing the Start Menu Button Diameter and Location
You can change the diameter of the Start Menu Button, and change
the location of the Button on the RibbonBar.
 To change the diameter of the Start Menu Button, you need
to change its built-in background images using the Theme
Designer, as described in the following section.
 To change the location of the Start Menu Button, use the
StartButtonDiameterSize property, as described on page 45.
Changing the Start Menu Button Diameter
To change the diameter of the Start Menu Button, you need to edit or
replace the default background images of the Button. You perform this
using the Theme Designer.
 To change the default background images of the Start Menu

Button:
1. Add a new theme to your project, register it, build your project,
and open the Theme Designer.
Note: For more information about using themes, see ‎Appendix B:
Creating Themes and Using the Theme Designer, page 190.
2. On the Theme Designer, to change the background images of the
Start Button, select from the Skins pane on the left the
RibbonBarStartButton, located in the
Control\UserControl\RibbonBar folder:
44
On the Resources pane on the right appear all the button images
that compose the Start Menu Button. Each button image is
designed for a different state.
3. Edit or replace the images of the existing Start Button.
When you start the application, the new or changed images of the
Start Menu Button appear.
Changing the Start Menu Button Location
You can change location of the Start Menu Button in relation to the
upper-left corner of the RibbonBar. Using the
StartButtonDiameterSize property of the RibbonBar, you can either
increase or decrease the distance between the Start Button and the
upper-left corner. This option is useful when you want to use either a
bigger or smaller Start Button, and you want to change its location
according to its new size.
In the following example, the value of the StartButtonDiameterSize

property is lower than the default value, thus decreasing the distance
between the Start Button and the upper-left corner:
Decreasing the
distance between
the Start Button
and the upper-left
corner
45
RibbonBar
RibbonBar
In the following example, the value of the StartButtonDiameterSize

property is higher than the default value, thus increasing the distance
between the Start Button and the upper-left corner:
Increasing the
distance between
the Start Button
and the upper-left
corner
 To change the Start Menu Button location:

1. On the Properties window of the RibbonBar control, change the
StartButtonDiameterSize property value to your desired value:
46
In the code-behind, you change the location of the Start Button as

follows:
C#
this.ribbonBar1.StartButtonDiameterSize = 50;
VB.NET
Me.RibbonBar1.StartButtonDiameterSize = 50
2. Use the values of the StartButtonOffset property (see page 42)

and the QuickAccessToolBarPanelHeight property (see page
29) to position the Start Button at your desired location.
Adding Static Menu Items to the Start Menu
Static menu items are items that are always displayed on the Start
Menu when it is opened. They can be added to all the panes of the
Start Menu – the left, right, and bottom pane. Since the panes of the
Start Menu are ToolStrip controls, all types of ToolStrip items can be
added to them.
Notes:
 The following section describes how to add command buttons to
the Start Menu. However, you can use these instructions to add
other items to the Start Menu, such as ComboBox, TextBox, and a
drop-down button.
 To add dynamic items to a static item, see page 55.
47
RibbonBar
RibbonBar
 To add static menu items to the Start Menu:

1. On the Properties window of the RibbonBar control, select
StartMenuProperties  LeftToolStripProperties  Items, and
click the ellipsis button on the right:
Note: These instructions describe how to add static items to the

left pane of the Start Menu. To add static items to another pane,
select either RightToolStripProperties or
BottomToolStripProperties.
The ToolStripItem Collection Editor dialog box appears:
48
3. To add an item to the Start menu, click the arrow on the Add
button:
A drop-down list appears, displaying the list of available items that

can be added to the Start Menu:
Note: To add another item to the Start Menu instead of a standard

button, select the desired item from the drop-down list.
4. To add a button, select from the drop-down the ToolStripButton
item.
A new ToolStripButton is created:
49
RibbonBar
RibbonBar
5. To change the text of the button, use the Text property on the
ToolStripButton properties pane.
6. To add an image to the new button, on the ToolStripButton
properties pane, click the ellipsis button next to the Image
property:
The Select Resource dialog box appears:
7. On the Select Resource dialog box, select the desired image, and
click OK.
You return to the ToolStripItem Collection Editor dialog box.
50
8. Customize other properties of the new button using the properties

pane.
9. To add other buttons to the Start Menu, click again the arrow on
the Add button, and select ToolStripButton from the drop-down
list.
All the buttons you add appear on the Members pane:
10.Click OK to save your new settings.

You return to the Form Designer.
The new buttons are now added to the Start Menu. When you start
the application, they appear when the Start Button is clicked:
51
RibbonBar
RibbonBar
In the code-behind, you can add a toolstrip button of the Start

Menu as follows:
C#
// Declaring a ToolStripButton
private ToolStripButton tbtnNew;
// Creating a new ToolstripBotton object
this.tbtnNew = new Gizmox.WebGUI.Forms.ToolStripButton();
// Adding the newly created ToolStripButton to the left pane of the Start
// Menu
this.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(tbtnNew);
// Setting the properties of the newly created ToolStripButton
this.tbtnNew.Image = new Gizmox.WebGUI.Common.Resources.ImageResourceHandle("New

.gif");
this.tbtnNew.Name = "New";
this.tbtnNew.Size = new System.Drawing.Size(62, 28);
this.tbtnNew.Text = "New";
VB.NET
' Declaring a ToolStripButton
Friend WithEvents tbtnNew As ToolStripButton
' Creating a new ToolstripBotton object
Me.tbtnNew = New Gizmox.WebGUI.Forms.ToolStripButton
' Adding the newly created ToolStripButton to the left pane of the Start
' Menu
Me.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(Me.tbtnNew)
52
' Setting the properties of the newly created ToolStripButton
Me.tbtnNew.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle("New.g

if")
Me.tbtnNew.Name = "New"
Me.tbtnNew.Size = New System.Drawing.Size(62, 28)
Me.tbtnNew.Text = "New"
Changing the Size of the Start Menu
You can change the size of the Start Menu to fit the options you
entered to it.
Resizing the
Start Menu
53
RibbonBar
RibbonBar
 To change the size of the Start Menu:

 On the Properties window of the RibbonBar control, select
StartMenuProperties  StartMenuSize, and enter new values
to the Width and Height properties:
In the code-behind, you change the size of the Start Menu as

follows:
C#
this.ribbonBar1.StartMenuProperties.StartMenuSize = new System.Drawing.Size(400,

400);
VB.NET
Me.RibbonBar1.StartMenuProperties.StartMenuSize = New System.Drawing.Size(400,

400)
When you restart the application, the size of the Start Menu
changes according to the values you entered.
54
Adding Dynamic Menu Items to the Start Menu
Dynamic items are items that appear when another item is clicked:
Static Item
Dynamic Items
Usually, dynamic items appear on the right pane, and they are
displayed when a static item on the left pane is clicked.
Dynamic items cannot be added using the Designer, only through

code.
The following example shows 3 dynamic items - Doc, Folder, and

Package. These dynamic items appear when the New static item is
clicked:
55
RibbonBar
RibbonBar
These dynamic items also appear as default when the Start Menu
Button is clicked, as the GenerateNewItemList code line demonstrates in
this example:
C#
public RibbonBar_Sample()
InitializeComponent();
GenerateNewItemList();
private void New_Click(object sender, EventArgs e)
private void GenerateNewItemList()
{
// Adding the first dynamic item
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear();
ToolStripButton objButtonDoc = new ToolStripButton("Doc");
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
objButtonDoc.Image = new
Gizmox.WebGUI.Common.Resources.ImageResourceHandle("doc.png");
objButtonDoc.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonDoc);
// Adding the second dynamic item
ToolStripButton objButtonFolder = new ToolStripButton("Folder");
objButtonFolder.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
objButtonFolder.Image = new
Gizmox.WebGUI.Common.Resources.ImageResourceHandle("folder.png");
objButtonFolder.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonFolde
r);
56
// Adding the third dynamic item
ToolStripButton objButtonPackage = new ToolStripButton("Package");
objButtonPackage.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
objButtonPackage.Image = new
Gizmox.WebGUI.Common.Resources.ImageResourceHandle("package.png");
objButtonPackage.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonPacka
ge);
VB.NET
Public Sub New()
InitializeComponent()
GenerateNewItemList()
End Sub
Private Sub New_Click(sender As Object, e As EventArgs)
End Sub
Private Sub GenerateNewItemList()
' Adding the first dynamic item
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear()
Dim objButtonDoc As New ToolStripButton("Doc")
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonDoc.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle("doc

.png")
objButtonDoc.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonDoc)
57
RibbonBar
RibbonBar
' Adding the second dynamic item
Dim objButtonFolder As New ToolStripButton("Folder")
objButtonFolder.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonFolder.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle("

folder.png")
objButtonFolder.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonFolde
r)
' Adding the third dynamic item
Dim objButtonPackage As New ToolStripButton("Package")
objButtonPackage.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonPackage.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle(

"package.png")
objButtonPackage.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonPacka
ge)
End Sub
 To add a dynamic menu item to the Start Menu:

1. Add a Click event to the static item on the left pane of the menu,
in this example - the New button:
C#
// Register an event handler
this.toolStripButton1.Click += this.New_Click;
// Define an event handler method
private void New_Click(object sender, EventArgs e)
{
// Define a default item list
58
VB.NET
' Register an event handler
AddHandler Me.toolStripButton1.Click, AddressOf New_Click
' Define an event handler method
Private Sub New_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
2. Define a method to add the dynamic items:

C#
private void GenerateNewItemList()
{
this.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(tbtnN
ew);
// Invoke a Clear method to clear the dynamic content that

// is currently displayed
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear();
// Create a new dynamic item for the right pane of the menu
// in this example - the Doc button
ToolStripButton objButtonDoc = new ToolStripButton("Doc");
// Align the text of the new dynamic item
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
// Add an image
objButtonDoc.Image = new Gizmox.WebGUI.Common.Resources.ImageResourceHandle

("doc.png");
// Align the image
objButtonDoc.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
59
RibbonBar
RibbonBar
// Add the new dynamic item to the right pane of the menu
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButton
Doc);
}
VB.NET
Private Sub GenerateNewItemList()

' Invoke a Clear method to clear the dynamic content that is
' currently displayed
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear()
' Create a new dynamic item for the right pane of the menu, in this
' example - the Doc button
Dim objButtonDoc As ToolStripButton = New ToolStripButton("Doc")
' Align the text of the new dynamic item
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
' Add an image
objButtonDoc.Image = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle

("doc.png")
' Align the image
objButtonDoc.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
' Add the new dynamic item to the right pane of the menu
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButton
Doc)
End Sub
60
You now created one dynamic item as follows:
To add additional dynamic items to the Start Menu, repeat the

above steps.
61
RibbonBar
RibbonBar
Expand Button
The Expand button enables the user to expand/collapse the RibbonBar
in order to show/hide its content. Once the user clicks the Expand
button, the RibbonBar is minimized, and only its tab headers are
shown.
Adding an Expand Button to the RibbonBar
To add an Expand button to RibbonBar, all you need to do is to make

the built-in Expand button visible, by setting the value of the
ShowExpandButton property to True.
 To add an Expand button to the RibbonBar:

1. On the Properties windows of the RibbonBar control, set the value
of the ShowExpandButton property to True:
The built-in Expand button will become visible at run-time.
62
Expand Button
In the code-behind, you add the Expand button as follows:

C#
this.ribbonBar1.ShowExpandButton = true;
VB.NET
Me.RibbonBar1.ShowExpandButton = True
When you start the application, the Expand button appears on the
upper right corner of the RibbonBar:
Expand button
63
RibbonBar
RibbonBar
When clicking the Expand button, the content of the tabs

disappears:
Clicking the Expand button hides the

RibbonBar content
 To bring back the RibbonBar content, click the Expand button

again.
64
Hierarchical Grid
Chapter 3: DataGridView
This chapter introduces the new features and functionalities of the
DataGridView control and describes the following: creating a
Hierarchical Grid, adding and using a Column Chooser, adding a Filter
Row for column filtering, adding a Grouping by Column functionality,
displaying a caption on the DataGridView, setting the Fill mode for
columns and the EditOnEnter mode for cells, and using Dotted style for
borders and cells.
Hierarchical Grid
The Hierarchical Grid functionality of the DataGridView control enables
you to display hierarchical data in the form of nested tables. If you
have interrelated tables, you can organize their content in a
subordinate relationship:
A Hierarchical
Grid that is
composed of
three
interrelated
tables
65
DataGridView
DataGridView
Requirements
To create a Hierarchical Grid, the following requirements need to be

met:
 The data source needs to be a BindingSource. The value of the
DataSource property of the BindingSource must be a DataSet.
This requirement applies to all DataTables that participate in the
Hierarchical Grid.
 A parent and child DataTables must have at least one column
whose content is identical. The names of the columns do not have
to be identical.
Creating a Hierarchical Grid using the Designer
Note: To explore the code behind the Hierarchical Grid creation, see
Creating a Hierarchical Grid through Code, page 78.
 To create a Hierarchical Grid:

1. Add a DataGridView control to the form.
2. To add the DataSet to the DataGridView, on the Properties window
of the DataGridView control, click the arrow next to the
DataSource property. Then, click the Add Project Data Source
link :
66
Hierarchical Grid
The Data Source Configuration Wizard appears:
Note: You can also add the DataSet through code, as described on
page 78.
3. Follow the wizard steps to add the DataSet. In the Choose Your
Database Objects page, select the objects you want to include in
your DataSet and present as nested tables:
4. Click the Finish button.

The DataSource property now includes the DataSet you added.
67
DataGridView
DataGridView
5. From the DataSet that appears in the DataSource property,

select the table you want to act as the parent table:
A bindingSource component is automatically created for the table

you attached to the DataSource:
68
Hierarchical Grid
6. To add a child table, add a second bindingSource component to the

form. Then, set its DataSource property to the existing DataSet,
and set its DataMember property to the child table.
7. To add another child table, repeat step ‎6.
8. Register a Load event to the form:
9. On the Code Editor, call the Fill method to fill with values the
relevant DataTables in the DataSet using Table Adapters, as
follows:
C#
private void Form1_Load(object sender, EventArgs e)
this.ordersTableAdapter1.Fill(this.northWindDataSet1.Orders);
this.order_DetailsTableAdapter1.Fill(this.northWindDataSet1.Order_Details);
this.productsTableAdapter1.Fill(this.northWindDataSet1.Products);
69
DataGridView
DataGridView
VB.NET
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Me.ordersTableAdapter1.Fill(Me.northWindDataSet1.Orders)
Me.order_DetailsTableAdapter1.Fill(Me.northWindDataSet1.Order_Details)
Me.productsTableAdapter1.Fill(Me.northWindDataSet1.Products)
End Sub
10. To create a hierarchal relation between two tables, on the

Properties window of the DataGridView control, click the ellipsis
button next to the HierarchicInfos property:
70
Hierarchical Grid
The HierarchicInfo Collection Editor dialog box appears:
11. On the HierarchicInfo Collection Editor dialog box, click the

Add button to add a new hierarchic connection. The new hierarchic
connection appears on the Members pane:
71
DataGridView
DataGridView
Note: Each hierarchicInfo item connects two tables. To create

additional nested tables, add additional hierarchicInfo items. The
order of the hierarchicInfo items determines the hierarchy level
of the nested tables.
The first hierarchicInfo item defines the relationship between the
first level of the hierarchy (a row on the top level of the Grid) and
the second level of the hierarchy. The second hierarchicInfo item
defines the relationship between the second and third levels of the
hierarchy, and so on.
When the Grid is rendered, the first hierarchy level (the root) is
rendered at the top of the Grid. Every additional level, defined by a
hierarchicInfo item, is then rendered below it once it is
expended:
First
hierarchicInfo
item
Second
hierarchicInfo
item
72
Hierarchical Grid
12. To connect the hierarchicInfo item to a bindingSource

component, on the properties pane on the left, click the arrow
button next to the BindedSource property.
The list of available bindingSource components appears:
13. From the BindedSource drop-down list, select bindingSource2

to set it as the child table.
14. On the FilteringDataMembers property, click the ellipsis button:
73
DataGridView
DataGridView
The FilterRelation Collection Editor dialog box appears:
This dialog box enables you to define which column in the parent
and child tables will act as the interrelated column.
15. Click the Add button to add a new filter. The new filter appears on
the Members pane:
74
Hierarchical Grid
16. On the properties pane, define the interrelated column as follows:

 On the SourceColumnDataName property, enter the name of
the column in the parent table that you want to connect to the
column in the child table.
 On the TargetColumnDataName property, enter the name of
the column in the child table that you want to connect to the
column in the parent table.
Notes:
 The names of the source and target columns do not have to be
identical. However, the content of the columns must be
identical.
 If you add more than one filter, the existing filters has an And
connection. This means that only items that meet both criteria
will be displayed.
The FilterRelation Collection Editor dialog box should look

similar to the following:
17. Click OK to save your setting.

You return to the HierarchicInfo Collection Editor dialog box.
75
DataGridView
DataGridView
18. [Optional] If you want to add the Column Chooser functionality to

the hierarchical grid, you can give a name to the child table. This
name will appear on the drop-down list of the Column Chooser
dialog box, which allows the user to show the column headers of
only one of the interrelated tables:
A child table
with a
customized
name
Notes:
 If you do not give a special name to the child table, the default
name of the table will be displayed on the Column Chooser
dialog box.
 For more information about the Column Chooser, see page 100.
To name the child table for the Column Chooser, on the
HierarchicInfo Collection Editor dialog box, on the
HierarchyName property, enter your desired name:
76
Hierarchical Grid
19. Click OK to save your setting.

When you start the application, the parent table is displayed:
When clicking the Expand button on the left side of the table, the
second table appears:
Note: If there are more levels, an Expand button will appear for
each level.
77
DataGridView
DataGridView
Creating a Hierarchical Grid through Code
In addition to creating a Hierarchical Grid using the Designer, you can

also create it through code.
In the following example, a Hierarchical Grid was created through code

for three tables – Orders, Order Description, and Products. The
interrelated columns were OrderID and ProductID:
Note: The following code does not include the definition of all the
columns in the DataGridView.
78
Hierarchical Grid
C#
private void InitializeComponent()
this.components = new System.ComponentModel.Container();
// Add a DataGridView control
this.dataGridView1 = new Gizmox.WebGUI.Forms.DataGridView();
// Add columns to the DataGridView control
this.dataGridViewTextBoxColumn1 = new
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn();
// Define a DataSet
this.northWindDataSet1 = new HierarchicDGV.NorthWindDataSet();
// Define bindingSource components for each table
this.bindingSource1 = new Gizmox.WebGUI.Forms.BindingSource(this.components);
// Define a TableAdaptaer for each table
this.ordersTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.OrdersTableAdapter();
this.order_DetailsTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.Order_DetailsTableAdapter();
this.productsTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.ProductsTableAdapter();
79
DataGridView
DataGridView
// Define hierarchicInfo items for setting a hierarchal relation between

// two tables
this.hierarchicInfo1 = new Gizmox.WebGUI.Forms.HierarchicInfo();
this.hierarchicInfo2 = new Gizmox.WebGUI.Forms.HierarchicInfo();
// Add filterRelation components for defining the column in the parent

// and child tables that will act as the interrelated column
this.filterRelation1 = new Gizmox.WebGUI.Forms.FilterRelation();
this.filterRelation2 = new Gizmox.WebGUI.Forms.FilterRelation();
((System.ComponentModel.ISupportInitialize)(this.dataGridView1)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource1)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this.northWindDataSet1)).BeginInit()
;
this.SuspendLayout();
// dataGridView1
this.dataGridView1.AutoGenerateColumns = false;
this.dataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.FixedSingle;
this.dataGridView1.ColumnHeadersHeightSizeMode =
Gizmox.WebGUI.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
this.dataGridView1.Columns.AddRange(new Gizmox.WebGUI.Forms.DataGridViewColumn[]
{
this.dataGridViewTextBoxColumn1,
80
Hierarchical Grid
this.dataGridViewTextBoxColumn14});
this.dataGridView1.DataSource = this.bindingSource1;
this.dataGridView1.HierarchicInfos.Add(this.hierarchicInfo1);
this.dataGridView1.HierarchicInfos.Add(this.hierarchicInfo2);
this.dataGridView1.Location = new System.Drawing.Point(9, 9);
this.dataGridView1.Name = "dataGridView1";
this.dataGridView1.RowTemplate.DefaultCellStyle.FormatProvider = new
System.Globalization.CultureInfo("is-IS");
this.dataGridView1.RowTemplate.Height = 26;
this.dataGridView1.Size = new System.Drawing.Size(746, 518);
this.dataGridView1.TabIndex = 0;
this.dataGridView1.HierarchicGridCreated += new
Gizmox.WebGUI.Forms.HierarchicDataGridViewCreatedEventHandler(this.dataGridView1
_HierarchicGridCreated);
// dataGridViewTextBoxColumn1
this.dataGridViewTextBoxColumn1.DataPropertyName = "OrderID";
this.dataGridViewTextBoxColumn1.HeaderText = "OrderID";
this.dataGridViewTextBoxColumn1.Name = "dataGridViewTextBoxColumn1";
this.dataGridViewTextBoxColumn1.ReadOnly = true;
this.dataGridViewTextBoxColumn2.DataPropertyName = "CustomerID";
this.dataGridViewTextBoxColumn2.HeaderText = "CustomerID";
this.dataGridViewTextBoxColumn3.DataPropertyName = "EmployeeID";
this.dataGridViewTextBoxColumn3.HeaderText = "EmployeeID";
81
DataGridView
DataGridView
// bindingSource1
this.bindingSource1.DataMember = "Orders";
this.bindingSource1.DataSource = this.northWindDataSet1;
// northWindDataSet1
this.northWindDataSet1.DataSetName = "NorthWindDataSet";
this.northWindDataSet1.SchemaSerializationMode =
System.Data.SchemaSerializationMode.IncludeSchema;
// hierarchicInfo1
this.hierarchicInfo1.BindedSource = this.bindingSource2;
this.hierarchicInfo1.FilteringDataMembers.Add(this.filterRelation1);
this.hierarchicInfo1.HierarchyName = "The Order Details";
// bindingSource2
this.bindingSource2.DataMember = "Order Details";
// filterRelation1
this.filterRelation1.SourceColumnDataName = "OrderID";
this.filterRelation1.TargetColumnDataName = "OrderID";
// ordersTableAdapter1
this.ordersTableAdapter1.ClearBeforeFill = true;
// order_DetailsTableAdapter1
this.order_DetailsTableAdapter1.ClearBeforeFill = true;
// productsTableAdapter1
this.productsTableAdapter1.ClearBeforeFill = true;
// bindingSource3
this.bindingSource3.DataMember = "Products";
82
Hierarchical Grid
// hierarchicInfo2
this.hierarchicInfo2.BindedSource = this.bindingSource3;
this.hierarchicInfo2.FilteringDataMembers.Add(this.filterRelation2);
this.hierarchicInfo2.HierarchyName = "Product Info";
// filterRelation2
this.filterRelation2.SourceColumnDataName = "ProductID";
this.filterRelation2.TargetColumnDataName = "ProductID";
// Form1
this.Controls.Add(this.dataGridView1);
this.Size = new System.Drawing.Size(966, 536);
this.Text = "Form1";
this.Load += new System.EventHandler(this.Form1_Load);
((System.ComponentModel.ISupportInitialize)(this.dataGridView1)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource1)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.northWindDataSet1)).EndInit();
this.ResumeLayout(false);
83
DataGridView
DataGridView
VB.NET
Private Sub InitializeComponent()
Me.components = New System.ComponentModel.Container()
' Add a DataGridView control
Me.dataGridView1 = New Gizmox.WebGUI.Forms.DataGridView()
' Add columns to the DataGridView control
Me.dataGridViewTextBoxColumn1 = New
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn()
' Define a DataSet
Me.northWindDataSet1 = New HierarchicDGV_VB.NorthWindDataSet()
' Define bindingSource components for each table
Me.bindingSource1 = New Gizmox.WebGUI.Forms.BindingSource(Me.components)
' Define a TableAdaptaer for each table
Me.ordersTableAdapter1 = New NorthWindDataSetTableAdapters.OrdersTableAdapter
Me.order_DetailsTableAdapter1 = New
NorthWindDataSetTableAdapters.Order_DetailsTableAdapter
Me.productsTableAdapter1 = New
NorthWindDataSetTableAdapters.ProductsTableAdapter
' Define hierarchicInfo items for setting a hierarchal relation between

' two tables
Me.hierarchicInfo1 = New Gizmox.WebGUI.Forms.HierarchicInfo
Me.hierarchicInfo2 = New Gizmox.WebGUI.Forms.HierarchicInfo
84
Hierarchical Grid
' Add filterRelation components for defining the column in the parent and
' child tables that will act as the interrelated column
Me.filterRelation1 = New Gizmox.WebGUI.Forms.FilterRelation
Me.filterRelation2 = New Gizmox.WebGUI.Forms.FilterRelation
CType(Me.dataGridView1, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.bindingSource1, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.northWindDataSet1,
System.ComponentModel.ISupportInitialize).BeginInit()
Me.SuspendLayout()
' dataGridView1
Me.dataGridView1.AutoGenerateColumns = False
Me.dataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.FixedSingle
Me.dataGridView1.ColumnHeadersHeightSizeMode =
Gizmox.WebGUI.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize
Me.dataGridView1.Columns.AddRange(New Gizmox.WebGUI.Forms.DataGridViewColumn()
{Me.dataGridViewTextBoxColumn1, Me.dataGridViewTextBoxColumn2,
Me.dataGridViewTextBoxColumn3, Me.dataGridViewTextBoxColumn4,
Me.dataGridViewTextBoxColumn13, Me.dataGridViewTextBoxColumn14})
Me.dataGridView1.DataSource = Me.bindingSource1
Me.dataGridView1.HierarchicInfos.Add(Me.hierarchicInfo1)
Me.dataGridView1.HierarchicInfos.Add(Me.hierarchicInfo2)
Me.dataGridView1.Location = New System.Drawing.Point(9, 9)
Me.dataGridView1.Name = "dataGridView1"
Me.dataGridView1.RowTemplate.DefaultCellStyle.FormatProvider = New
System.Globalization.CultureInfo("is-IS")
Me.dataGridView1.Size = New System.Drawing.Size(775, 518)
Me.dataGridView1.TabIndex = 0
AddHandler dataGridView1.HierarchicGridCreated, AddressOf

Me.dataGridView1_HierarchicGridCreated
85
DataGridView
DataGridView
' dataGridViewTextBoxColumn1
Me.dataGridViewTextBoxColumn1.DataPropertyName = "OrderID"
Me.dataGridViewTextBoxColumn1.HeaderText = "OrderID"
Me.dataGridViewTextBoxColumn1.Name = "dataGridViewTextBoxColumn1"
Me.dataGridViewTextBoxColumn1.ReadOnly = True
Me.dataGridViewTextBoxColumn2.DataPropertyName = "CustomerID"
Me.dataGridViewTextBoxColumn2.HeaderText = "CustomerID"
Me.dataGridViewTextBoxColumn3.DataPropertyName = "EmployeeID"
Me.dataGridViewTextBoxColumn3.HeaderText = "EmployeeID"
' bindingSource1
Me.bindingSource1.DataMember = "Orders"
Me.bindingSource1.DataSource = Me.northWindDataSet1
' northWindDataSet1
Me.northWindDataSet1.DataSetName = "NorthWindDataSet"
Me.northWindDataSet1.SchemaSerializationMode =
System.Data.SchemaSerializationMode.IncludeSchema
' hierarchicInfo1
Me.hierarchicInfo1.BindedSource = Me.bindingSource2
Me.hierarchicInfo1.FilteringDataMembers.Add(Me.filterRelation1)
Me.hierarchicInfo1.HierarchyName = "The Order Details"
' bindingSource2
Me.bindingSource2.DataMember = "Order Details"
86
Hierarchical Grid
' filterRelation1
Me.filterRelation1.SourceColumnDataName = "OrderID"
Me.filterRelation1.TargetColumnDataName = "OrderID"
' ordersTableAdapter1
Me.ordersTableAdapter1.ClearBeforeFill = True
' order_DetailsTableAdapter1
Me.order_DetailsTableAdapter1.ClearBeforeFill = True
' productsTableAdapter1
Me.productsTableAdapter1.ClearBeforeFill = True
' bindingSource3
Me.bindingSource3.DataMember = "Products"
' hierarchicInfo2
Me.hierarchicInfo2.BindedSource = Me.bindingSource3
Me.hierarchicInfo2.FilteringDataMembers.Add(Me.filterRelation2)
Me.hierarchicInfo2.HierarchyName = "Product Info"
' filterRelation2
Me.filterRelation2.SourceColumnDataName = "ProductID"
Me.filterRelation2.TargetColumnDataName = "ProductID"
' Form1
Me.Controls.Add(Me.dataGridView1)
Me.Size = New System.Drawing.Size(966, 536)
Me.Text = "Form1"
AddHandler Load, AddressOf Me.Form1_Load
87
DataGridView
DataGridView
CType(Me.dataGridView1, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.bindingSource1, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.northWindDataSet1, System.ComponentModel.ISupportInitialize).EndInit()
Me.ResumeLayout(False)
End Sub
Events
The Hierarchical Grid has the following unique events:

 HierarchicGridCreated – fires once the Expanding button is
clicked, and a new Hierarchic Grid is created. This event fires
before the RowExpanding event, and can be used to set required
properties for the child grid.
Note: The HierarchicGridCreated will fire on the parent
DataGridView for all the child grids that are created. The
e.NewlyCreatedGrid.HierarchyLevel can be used to know for which
level the grid is created.
You can see examples of the HierarchicGridCreated event, on
Setting the Height of the Expanding Panel, page 93, and Setting
the Colors of the Nested Tables, page 98.
88
Hierarchical Grid
 RowExpanding – fires once the Expanding button is clicked, and

before the row is expanded (but after HiearchicGridCreated is
fired). This event allows you, for example, to prevent the row from
expanding, if a certain condition is met.
For example:
C#
private void dataGridView1_RowExpanding(object sender, RowExpandingEventArgs e)
{
// Do not expand for customerID = TOMSP
if
(((DataRowView)e.ExpandingRow.DataBoundItem).Row["CustomerID"].ToString()
== "TOMSP")
e.Cancel = true;
VB.NET
Private Sub dataGridView1_RowExpanding(ByVal sender As Object, ByVal e As

RowExpandingEventArgs) Handles dataGridView1.RowExpanding
' Do not expand for customerID = TOMSP
If (CType(e.ExpandingRow.DataBoundItem,
DataRowView).Row("CustomerID").ToString = "TOMSP") Then
e.Cancel = True
End If
End Sub
89
DataGridView
DataGridView
 RowExpanded – fires after the Expanding button is clicked, and

once the row is expanded.
For example:
C#
private void dataGridView1_RowExpanded(object sender, RowExpandedEventArgs e)
// Show MessageBox on expanding VINET customer
if (((DataRowView)e.ExpandedRow.DataBoundItem).Row["CustomerID"].ToString()
== "VINET")
MessageBox.Show("You expanded VINET customer");
VB.NET
Private Sub dataGridView1_RowExpanded(ByVal sender As Object, ByVal e As

RowExpandedEventArgs) Handles dataGridView1.RowExpanded
' Show MessageBox on expanding VINET customer
If (CType(e.ExpandedRow.DataBoundItem,
DataRowView).Row("CustomerID").ToString = "VINET") Then
MessageBox.Show("You expanded VINET customer")
End If
End Sub
90
Hierarchical Grid
Setting the Expanding Button Mode
You can determine the mode of the Expanding button using the
ExpansionIndicator property. The ExpansionIndicator property
has the following modes:
 Always – the Expanding button is always shown, even if there is
no nested table.
 Never – the Expanding button is never shown.
 CheckOnExpand – the Expanding button is shown by default,
even if there is no nested table. However, if there is no nested
table, once the Expanding button is clicked, the table does not
expand, and the Expanding button disappears.
The Expanding
button
disappears
after a click,
when no
nested table is
available
Note: The CheckOnDisplay mode is currently not implemented.
 To set the Expanding button mode:

 On the Properties window of the DataGridView control, click the
arrow next to the ExpansionIndicator property, and select your
desired mode from the drop-down list:
91
DataGridView
DataGridView
In the code-behind, you set the Expanding button mode as follows:

C#
this.dataGridView1.ExpansionIndicator =
Gizmox.WebGUI.Forms.ShowExpansionIndicator.CheckOnExpand;
VB.NET
Me.dataGridView1.ExpansionIndicator =
Gizmox.WebGUI.Forms.ShowExpansionIndicator.CheckOnExpand
92
Hierarchical Grid
Setting the Height of the Expanding Panel
You can set the height of the expanding panel of the nested tables to
automatically match the displayed content.
Setting the
height of the
expanding
panel to match
the displayed
content
 To set the height of the expanding panel to match the displayed

content:
1. Register a HierarchicGridCreated event handler to the
DataGridView control:
93
DataGridView
DataGridView
2. Add the following code:

Note: When the HierarchicGridCreated event fires, the number of
rows for the child grid is not known. Registering a
DataBindingComplete event handler on the child grid is used as a
helper in this example, to calculate the desired height of the child
grid and to base it on the number of rows.
C#
private void dataGridView1_HierarchicGridCreated(object sender,

HierarchicDataGridViewCreatedEventArgs e)
switch (e.NewlyCreatedGrid.HierarchyLevel)
case 1:
e.NewlyCreatedGrid.DataBindingComplete += new
DataGridViewBindingCompleteEventHandler(NewlyCreatedGrid_DataBinding
Complete);
break;
case 2:
e.NewlyCreatedGrid.DataBindingComplete += new
DataGridViewBindingCompleteEventHandler(NewlyCreatedGrid_DataBinding
Complete2);
break;
default:
break;
}
}
void NewlyCreatedGrid_DataBindingComplete(object sender,
DataGridViewBindingCompleteEventArgs e)
DataGridView objDataGridView = (sender as DataGridView);
objDataGridView.Height = GetDataGridViewHeight(objDataGridView);
// Registering to the DataBindingComplete event - calculating the height

// and expanding the parent table + update
void NewlyCreatedGrid_DataBindingComplete2(object sender,

DataGridViewBindingCompleteEventArgs e)
94
Hierarchical Grid
HierarchicDataGridView objDataGridView = (sender as

HierarchicDataGridView);
if (objDataGridView != null)
objDataGridView.Height = GetDataGridViewHeight(objDataGridView);
objDataGridView.ContainingRow.DataGridView.Height +=
objDataGridView.Height;
objDataGridView.RootGrid.Update();
// Calculating the required height of the DataGridView according to

// existing rows
private int GetDataGridViewHeight(DataGridView objDataGridView)
int intRowsHeight = 0;
foreach (DataGridViewRow objRow in objDataGridView.Rows)
intRowsHeight += objRow.Height;
if (objDataGridView.AllowUserToAddRows)
intRowsHeight += 50;
return intRowsHeight;
95
DataGridView
DataGridView
VB.NET
Private Sub dataGridView1_HierarchicGridCreated(ByVal sender As Object, ByVal e

As HierarchicDataGridViewCreatedEventArgs) Handles
dataGridView1.HierarchicGridCreated
Select Case (e.NewlyCreatedGrid.HierarchyLevel)
Case 1
AddHandler e.NewlyCreatedGrid.DataBindingComplete, AddressOf

Me.NewlyCreatedGrid_DataBindingComplete
Case 2
AddHandler e.NewlyCreatedGrid.DataBindingComplete, AddressOf

Me.NewlyCreatedGrid_DataBindingComplete2
End Select
End Sub
Private Sub NewlyCreatedGrid_DataBindingComplete(ByVal sender As Object, ByVal e

As DataGridViewBindingCompleteEventArgs)
Dim objDataGridView As DataGridView = CType(sender, DataGridView)
objDataGridView.Height = GetDataGridViewHeight(objDataGridView)
End Sub
' Registering to the DataBindingComplete event - calculating the height

' and expanding the parent table + update
Private Sub NewlyCreatedGrid_DataBindingComplete2(ByVal sender As Object, ByVal

e As DataGridViewBindingCompleteEventArgs)
Dim objDataGridView As HierarchicDataGridView = CType(sender,

HierarchicDataGridView)
If (Not (objDataGridView) Is Nothing) Then
objDataGridView.Height = GetDataGridViewHeight(objDataGridView)
objDataGridView.ContainingRow.DataGridView.Height =
(objDataGridView.ContainingRow.DataGridView.Height +
objDataGridView.Height)
objDataGridView.RootGrid.Update()
End If
End Sub
96
Hierarchical Grid
' Calculating the required height of the DataGridView according to

' existing rows
Private Function GetDataGridViewHeight(ByVal objDataGridView As DataGridView) As

Integer
Dim intRowsHeight As Integer = 0
For Each objRow As DataGridViewRow In objDataGridView.Rows
intRowsHeight = (intRowsHeight + objRow.Height)
Next
If objDataGridView.AllowUserToAddRows Then
intRowsHeight = (intRowsHeight + 50)
End If
Return intRowsHeight
End Function
97
DataGridView
DataGridView
Setting the Colors of the Nested Tables
You can set the colors of the nested tabled using the
HierarchicGridCreated event.
Setting the
colors of the
nested tables
 To set the colors of the nested tables:

1. Register the HierarchicGridCreated event to the DataGridView
control.
98
Hierarchical Grid
2. Add the following code:

C#
private void dataGridView1_HierarchicGridCreated(object sender,

HierarchicDataGridViewCreatedEventArgs e)
switch (e.NewlyCreatedGrid.HierarchyLevel)
case 1:
e.NewlyCreatedGrid.DefaultCellStyle.BackColor = Color.Khaki;
break;
case 2:
e.NewlyCreatedGrid.DefaultCellStyle.BackColor = Color.LemonChiffon;
break;
default:
break;
VB.NET
Private Sub dataGridView1_HierarchicGridCreated(ByVal sender As Object, ByVal e

As HierarchicDataGridViewCreatedEventArgs) Handles
dataGridView1.HierarchicGridCreated
Select Case (e.NewlyCreatedGrid.HierarchyLevel)
Case 1
e.NewlyCreatedGrid.DefaultCellStyle.BackColor = Color.Khaki
Case 2
e.NewlyCreatedGrid.DefaultCellStyle.BackColor = Color. LemonChiffon
End Select
End Sub
99
DataGridView
DataGridView
Column Chooser
The Column Chooser functionality enables the user to select at run-
time which columns will be displayed on a data grid. By default, when
the data grid first appears, all the columns are displayed. Then, the
user can decide which columns will be shown and which will be hidden.
Once you enable the Column Chooser built-in functionality, a button

appears at the upper-left corner of the data grid, next to the header
row. Clicking the Column Chooser button opens a dialog box, which
contains all the column headers in the grid. Selecting or clearing a
header check box determines whether this column will be displayed:
The Column
Chooser button
The Column Chooser dialog box
100
Column Chooser
Adding a Column Chooser
To add the Column Chooser functionality, make the built-in Column

Chooser button visible, by setting the value of the
ShowColumnChooser property to True.
 To add a Column Chooser:

 On the Properties window of the DataGridView control, set the
value of the ShowColumnChooser to True:
In the code-behind, you display the Column Chooser button as

follows:
C#
this.dataGridView1.ShowColumnChooser = true;
VB.NET
Me.dataGridView1.ShowColumnChooser = True
101
DataGridView
DataGridView
When you start the application, the Column Chooser button

appears at the upper-left corner of the grid:
The Column
Chooser button
Note: The Column Chooser gets and sets the Visible property of
the connected columns. By programmatically setting the Visible
property of a column, you can change the checked status that is
shown for the column, the next time the Column Chooser is
displayed. This can be used, for example, to hide in advance some
of the columns. For hierarchic child grids, this would be performed
within the HierarchicGridCreated event handler.
Using the Column Chooser
The action of displaying or removing columns from the data grid is

done using the Column Chooser dialog box. The Column Chooser
dialog box opens, once the Column Chooser button is clicked.
 To use the Column Chooser:

1. Click the Column Chooser button .
102
Column Chooser
The Column Chooser dialog box appears:
The Column Chooser dialog box displays the headers of all the
columns in the data grid.
2. Use the Column Chooser dialog box as follows:
 Select the check box of the columns you want to display in the
grid.
 Clear the check box of the columns you want to remove from
the grid.
Note: If you have a hierarchical grid, you can use the drop-down
list at the top of the dialog box to show the column headers of only
one of the interrelated tables:
103
DataGridView
DataGridView
For more information about hierarchical grids, see page 65.

3. After making your selection, click Ok.
The grid shows only the columns you selected for display:
A data grid that

displays only some
of its columns
following a user's
selection
After making your initial selection, you can change it by clicking

again the Column Chooser button and making another selection.
104
Filtering by Column using a Filter Row
Understanding the Filter Row Feature
The Filter Row feature enables you to add to the DataGridView control
the ability to filter the data that is displayed in the grid according to
the column values. When adding the Row Filter to the DataGridView, a
new row is added below the grid header. This row contains buttons
that enable the user to use the values of each column to filter the
displayed data:
Apply operations to
the column values Clear column criteria
Filter Row
Clear all
filtering
criteria
The column values
105
DataGridView
DataGridView
Each column filter consists of two buttons and a drop-down list:
 - the Operation button displays a list of operations, which can

be applied to the value that is selected in the adjacent drop-down
Value list:
The displayed Operation list changes according to the content type

of the selected column. For example, if the content is of a numeric
type, numeric operations are displayed. If the content is of a string
type, string-related operations are displayed. Selecting this button
starts the filtering process.
 - the drop-down Value list displays the entire list of

distinct values that appear in the selected column. The user can
select which value will act as a criterion for the column filtering:
106
 - the Clear button clears the existing filtering criteria of the

selected column.
Requirements
To use the Filtering by Column functionality, the following

requirements need to be met:
DataSource property of the BindingSource needs to be a DataSet.
 The Filtering by Column feature cannot work together with the
following functionalities and properties:
 Grouping by Column – the ShowGroupingDropArea property
must be False.
 Column Ordering – the AllowUserToOrderColumns property
must be False.
If the values of the above properties are set to True, you need to
change them to False before you can use the Grouping by Colum
functionality.
107
DataGridView
DataGridView
Adding a Filter Row
To add a Filter Row to a DataGridView control, make the built-in Filter

Row visible, by setting the value of the ShowFilterRow property to
True.
 To add a Filter Row:

1. On the Properties window of the DataGridView control, set the
ShowFilterRow property to True:
In the code-behind, you add the Filter Row to the DataGridView

control as follows:
C#
this.dataGridView1.ShowFilterRow = true;
VB.NET
Me.DataGridView1.ShowFilterRow = True
108
The Filter Row is added to the DataGridView control, but it is not

visible in design-time. When you start the application, the Filter
Row appears below the header:
Filter Row
109
DataGridView
DataGridView
Setting the Maximum Number of Filtering Values
You can determine what will be the maximum number of values that
will be displayed in the drop-down Value list.
You set the maximum number of values using the MaxFilterOptions

property of the DataGridView control. The default number is 100.
 To set the maximum number of filtering values:

1. On the Properties window of the DataGridView control, select the
MaxFilterOptions property and enter your desired value:
In the code-behind, you set the maximum number of displayed

values as follows:
C#
this.dataGridView1.MaxFilterOptions = 5;
VB.NET
Me.DataGridView1.MaxFilterOptions = 5
110
When the application starts, the Value list contains at the most the
number of values you specified:
Set the
maximum
number of
displayed
values
111
DataGridView
DataGridView
Grouping by Column
The Grouping by Column functionality enables you to group the data
that is displayed in the DataGridView control by one or more columns.
The Grouping by Column functionality can be used at run-time, at

design-time, or at both states:
 Run-time: this option enables the user at run-time to group data
by one or more columns, by dragging the desired column to a
Grouping Drop Area:
Grouping by columns at run-time
Grouping
Drop Area
To use this option, you need to enable the Grouping by Column

functionality in the Designer, as described on page 114.
112
Grouping by Column
 Design-time: this option enables you to group the data by

columns in the Designer, and display the grouped data at run-
time:
Data that was

grouped by columns
at design-time
When grouping the data by columns at design-time, you can

choose whether the user will be able to change the existing
grouping. You allow the user to group the data at run-time by
showing the Grouping Drop Area. By hiding the Grouping Drop
Area, you disable the Grouping by Column functionality at run-
time.
 To enable the Grouping by Column functionality for run-time,
see page 114.
 To disable the Grouping by Column functionality for run-time,
see page 123.
113
DataGridView
DataGridView
Requirements
To use the Grouping by Column functionality, the following

requirements need to be met:
DataSource property of the BindingSource need to be a DataSet.
 The Grouping by Column feature cannot work together with the
the AllowUserToOrderColumns and ShowFilterRow
properties. To use the Grouping by Colum functionality, you must
set the value of these properties to False.
Grouping by Column at Run-Time
To enable the user to use the Grouping by Column functionality at run-

time, you need to show the Grouping Drop Area in your running
application, as described in the following section.
Enabling the Grouping by Column Functionality for Run-Time
 To enable the Grouping by Column functionality:

ShowGroupingDropArea property to True:
114
Grouping by Column
In the code-behind, you enable the Grouping by Column

functionality as follows:
C#
this.dataGridView1.ShowGroupingDropArea = true;
VB.NET
Me.dataGridView1.ShowGroupingDropArea = True
The Grouping Drop Area is added to the DataGridView control, but

it is not visible at design-time. When you start the application, the
Grouping Drop Area appears above the grid header, allowing the
user to use the Group by Column functionality:
Grouping Drop
Area
115
DataGridView
DataGridView
Grouping by Column at Run-Time
The Grouping by Column functionality enables the user to perform the

following actions at run-time:
 Group the data by a specific column, as described on page
116.
 Group the data by several columns and determine the
grouping order, as described on page 117.
 Removing a column from the grouping, as described on page
119.
 Changing the grouping order, as described on page 119.
 To group data by a specific column at run-time:

 Drag and drop the header of the required column into the
Grouping Drop Area:
Drag and drop

the column
header into
the Grouping
Drop Area
116
Grouping by Column
When the column header is on the Grouping Drop Area, the data is
automatically grouped by the selected column:
The grouping
column
Data grouped
by a column
 To group data by several columns:

1. After dragging and dropping one column header into the Grouping
Drop Area, you can add more columns to it by dragging and
dropping additional column headers:
Adding a
column header
to the existing
grouping
117
DataGridView
DataGridView
2. To determine the grouping order, place the new header above or

below the existing header on the Grouping Drop Area:
Determining
the grouping
order
The new column header you add creates another grouping. The
data is first grouped by the upper column, and then it is grouped
again in each existing group by the second column:
Grouping by
two columns
118
Grouping by Column
 To remove a column from the grouping:

 On the Grouping Drop Area, click the X sign next to the name of
the column you want to remove:
Remove a
column from
the grouping
The column header is removed from the Grouping Drop Area, and
the data is no longer grouped by this column.
 To change the grouping order:

1. Remove from the Grouping Drop Area the column header its
location you want to change, by clicking the X sign.
2. Drag and drop again the column header into the Grouping Drop
Area, and locate it in the desired location.
119
DataGridView
DataGridView
Grouping by Column at Design-Time
You can group the data by column in the Designer, and display the
grouped data at run-time.
Selecting Columns for Grouping
 To group by column at design-time:

1. On the Properties window of the DataGridView control, click the
arrow next to the GroupingColumns property:
120
Grouping by Column
The GroupingColumns dialog box appears:
The GroupingColumns dialog box displays all the columns

headers that are currently bound to the DataGridView control.
2. On the left pane, select the column by which you want to group the
data, and click the Forward button to move it to the right

pane:
121
DataGridView
DataGridView
In the code-behind, you group the data by a column as follows:

C#
this.dataGridView1.GroupingColumns.Add("CompanyName");
VB.NET
Me.dataGridView1.GroupingColumns.Add("CompanyName")
3. If you want to group the data by additional columns, select the

column headers on the right pane, and move them using the
Forward button to the right pane. You can then use the Up and
Down buttons to adjust the hierarchy of the grouping.
When you start the application, the displayed data is grouped by
the columns you selected in the GroupingColumns dialog box:
Data that was

grouped by
columns in
design-time,
with a
Grouping Drop
Area
122
Grouping by Column
Hiding the Grouping Drop Area
Hiding the Grouping Drop Area disables the grouping option at run-
time. This means that the user will not be able to group the data by
columns, and only the grouping you select in design-time will be
displayed.
 To hide the Grouping Drop Area:

ShowGroupingDropArea property to False:
The Grouping Drop Area is removed from the DataGridView

control. When you start the application, the Grouping Drop Area is
not shown:
Data that was

grouped by
columns in
design-time,
without a
Grouping Drop
Area
123
DataGridView
DataGridView
Grouping by Column using Command Buttons
You can enable in run-time the Grouping by Column functionality with

command buttons, instead of displaying and using the Grouping Drop
Area.
Command
buttons for
grouping by
column
By clicking a grouping button, the grid is grouped according to the

columns specified on the button:
Clicking a
button groups
the grid
according to
the indicated
columns
124
Grouping by Column
When you use this option, you need to define in design-time which
columns will be used for grouping.
Note: This sample uses the Customers table in the NorthWind demo
database.
 To group by column at run-time using command buttons:

1. Create a hierarchical grid either through the Designer or code, as
described on Hierarchical Grid, page 65.
2. Add a DataGridView control, and bind it to a BindingSource
component.
3. Add command buttons for grouping the columns.
4. Register a Click event to the buttons.
5. Add code to buttons, as follows:
C#
// Define the grouping columns of a button
private void btnGroupCountryPostal_Click(object sender, EventArgs e)
this.dataGridView1.GroupingColumns.Clear();
this.dataGridView1.GroupingColumns.Add("Country");
this.dataGridView1.GroupingColumns.Add("PostalCode");
}
// Define a Clear button
private void btnClearGroups_Click(object sender, EventArgs e)
this.dataGridView1.GroupingColumns.Clear();
125
DataGridView
DataGridView
VB.NET
' Define the grouping columns of a button
Private Sub btnGroupCountryPostal_Click(sender As System.Object, e As

System.EventArgs)
Me.dataGridView1.GroupingColumns.Clear()
Me.dataGridView1.GroupingColumns.Add("Country")
Me.dataGridView1.GroupingColumns.Add("PostalCode")
End Sub
' Define a Clear button
Private Sub btnClearGroups_Click(sender As System.Object, e As System.EventArgs)
Me.dataGridView1.GroupingColumns.Clear()
End Sub
Customizing the Header of Grouped Columns
You can customize the content and formatting of the header of

grouped columns.
In the following example, the content, the background color, and the
foreground color of the header were changed:
Customized
headers
126
Grouping by Column
 To customize the header of grouped columns:

1. Register an event handler to the GroupHeaderFormatting event
of the DataGridView control:
C#
this.dataGridView1.GroupHeaderFormatting += new
Gizmox.WebGUI.Forms.GroupHeaderFormattingEventHandler(this.dataGridView1_GroupHe
aderFormatting);
private void dataGridView1_GroupHeaderFormatting(object sender,

GroupHeaderFormattingEventArgs e)
VB.NET
AddHandler Me.dataGridView1.GroupHeaderFormatting, AddressOf dataGridView1_Group

HeaderFormatting
Private Sub dataGridView1_GroupHeaderFormatting(ByVal sender As Object, ByVal e

As GroupHeaderFormattingEventArgs)
End Sub
127
DataGridView
DataGridView
2. You change the formatting by setting properties on the

GroupHeaderFormattingEventArgs parameter passed to the
event handler. The properties that can be set are:
 HeaderLabel.Text – set the text that is displayed on the
header.
 HeaderLabel.BackColor – set the background color of the
header.
 HeaderLabel.ForeColor - set the foreground color of the
header.
 DataPropertyName - the name of the column in the
database.
 FormattingApplied – applies the custom formatting. Must be
True for the customization to apply.
Setting the Content of the Grouped Column Header
 To change the default content of the grouped column header:

 Use the HeaderLabel.Text property of the
GroupHeaderFormattingEventArgs, as the following example
demonstrates:
C#

{
// Define the header content
e.HeaderLabel.Text = "Grouped by " + e.DataPropertyName + ", Value: " +

e.Value;
// Apply the new content
e.FormattingApplied = true;
128
Grouping by Column
VB.NET

As GroupHeaderFormattingEventArgs) Handles dataGridView1.GroupHeaderFormatting
' Define the header content

e.Value
' Apply the new content
e.FormattingApplied = true
End Sub
When the application starts, it looks as follows:
Customized
header
content
129
DataGridView
DataGridView
Setting the Colors of the Grouped Column Header
 To set the colors of the grouped column header:

 Use the HeaderLabel.BackColor and HeaderLabel.ForeColor
arguments, as the following example demonstrates:
Note: When using the HeaderLabel.BackColor and
HeaderLabel.ForeColor arguments, you also need to add the
HeaderLabel.Text argument.
C#

{
// Define the header content

e.Value;
// Define the header colors
e.HeaderLabel.BackColor = Color.Olive;
e.HeaderLabel.ForeColor = Color.White;
// Apply the new formatting
}
VB.NET

As GroupHeaderFormattingEventArgs) Handles dataGridView1.GroupHeaderFormatting
' Define the header content

e.Value
' Define the header colors
e.HeaderLabel.BackColor = Color.Olive
e.HeaderLabel.ForeColor = Color.White
130
Grouping by Column
' Apply the new formatting
e.FormattingApplied = True
End Sub
When the application starts, it looks as follows:
Customized
header
colors
131
DataGridView
DataGridView
Adding an Item Count to the Grouped Column Header
You can add an item count to the header of the grouped columns, by
setting the SupportGroupCount property of the DataGridView control
to True. The following example uses a CheckBox to set the
DataGridView.SupportGroupCount property. When the user selects
the checkbox and then group columns, the header of the grouped
columns shows the number of items that are in each group. If the
number of items changes, the displayed item count changes
automatically:
Headers that
include an
Item Count
Activating the
Item Count
option
132
Grouping by Column
 To add an Item Count to the grouped column headers:

1. Add a CheckBox control to the form that contains the data grid:
2. Add a CheckedChanged event to the CheckBox control:
133
DataGridView
DataGridView
C#
this.checkBox1.CheckedChanged += new
System.EventHandler(this.checkBox1_CheckedChanged);
private void checkBox1_CheckedChanged(object sender, EventArgs e)
VB.NET
AddHandler checkBox1.CheckedChanged, AddressOf Me.checkBox1_CheckedChanged
Private Sub checkBox1_CheckedChanged(ByVal sender As Object, ByVal e As

EventArgs)
End Sub
3. Add the Item Count functionality, as follows:

C#
private void checkBox1_CheckedChanged(object sender, EventArgs e)
dataGridView1.SupportGroupCount = checkBox1.Checked;
dataGridView1.Update();
VB.NET
Private Sub checkBox1_CheckedChanged(ByVal sender As Object, ByVal e As

EventArgs)
dataGridView1.SupportGroupCount = checkBox1.Checked
dataGridView1.Update()
End Sub
134
Grouping by Column
When the application starts, by default the checkbox is not

selected. To activate the Item Count option, the user needs to
select the checkbox and then group the grid by columns.
4. [Optional] To use the Count Item option with the header
customization, you need to add the ValueCount argument to the
header label, as follows:
C#


e.Value + " (" + e.ValueCount + " items)";
e.HeaderLabel.BackColor = Color.Olive;
e.HeaderLabel.ForeColor = Color.White;
VB.NET
Private Sub dataGridView1_GroupHeaderFormatting_1(ByVal sender As Object, ByVal

e As GroupHeaderFormattingEventArgs) Handles dataGridView1.GroupHeaderFormatting
e.HeaderLabel.Text = String.Format("Grouped by {0}, Value: {1} ({2}

items)", e.DataPropertyName, e.Value, e.ValueCount)
e.HeaderLabel.BackColor = Color.Olive
e.HeaderLabel.ForeColor = Color.White
e.FormattingApplied = True
End Sub
135
DataGridView
DataGridView
Note: You should be aware that when using the ValueCount

property within a GroupHeaderFormatting event handler, the
ValueCount will always contain the value -1, if the
DataGridView.SupportGroupCount is set to False. Only by setting
the DataGridView.SupportGroupCount to True, the ValueCount will
contain the number of actual rows in the group:
136
Displaying a Grid Caption
Displaying a Grid Caption

You can now display a caption for the DataGridView control:
Displaying a
DataGridView
caption
Note: To enter a text to the caption, use the Text property of the
DataGridView control.
 To display a DataGridView caption:

 On the Properties window of the DataGridView control, set to True
the value of the IsCaptionVisible property:
137
DataGridView
DataGridView
In the code-behind, you display a DataGridView caption as follows:

C#
this.dataGridView1.IsCaptionVisible = true;
VB.NET
Me.DataGridView1.IsCaptionVisible = True
When you start the application, the caption appears above the
DataGridView control.
138
Column Fill Mode
Column Fill Mode

The Fill option of the AutoSizeMode property is now available for the
columns of an entire table and for specific columns in a table.
For detailed information about the Fill mode, see:
http://msdn.microsoft.com/en-us/library/ms171605.aspx
Setting the Fill Mode for the Columns of an Entire Table
The Fill mode of an entire table automatically adjusts the columns

widths to fill the display area of the control.
Use this option for displaying similarly sized data in a relatively small
number of columns that occupy the entire width of the control, without
displaying the horizontal scroll bar.
139
DataGridView
DataGridView
 To set the Fill mode for the columns of an entire table:

 On the Properties window of the DataGridView control, select the
Fill option of the AutoSizeColumnsMode property:
In the code-behind, you set the Fill mode for the columns of an
entire table as follows:
C#
this.dataGridView1.AutoSizeColumnsMode =
Gizmox.WebGUI.Forms.DataGridViewAutoSizeColumnsMode.Fill;
VB.NET
Me.DataGridView1.AutoSizeColumnsMode =
Gizmox.WebGUI.Forms.DataGridViewAutoSizeColumnsMode.Fill
The columns widths are automatically adjusted to fill the display

area of the control.
140
Column Fill Mode
Setting the Fill Mode for a Specific Column
Columns with a Fill mode share the display area width that is not used
by the other columns. This width is divided among these columns in
proportions relative to their FillWeight property values.
 To set the Fill Mode for a specific column:

 On the Properties window of a specific column, select the Fill
option of the AutoSizeMode property:
141
DataGridView
DataGridView
In the code-behind, you set the Fill mode for a specific column as
follows:
C#
this.dataGridViewTextBoxColumn1.AutoSizeMode =
Gizmox.WebGUI.Forms.DataGridViewAutoSizeColumnMode.Fill;
VB.NET
Me.DataGridViewTextBoxColumn1.AutoSizeMode =
Gizmox.WebGUI.Forms.DataGridViewAutoSizeColumnMode.Fill
The Fill option automatically adjusts the width of the selected

columns to fill the display area of the control.
EditOnEnter Mode for Cells

The EditMode property, which determines how the user can start
editing a cell, has a new value – EditOnEnter. The EditOnEnter
value puts the cells in edit mode when the user enters them and they
receive focus:
142
EditOnEnter Mode for Cells
This mode is useful when pressing the TAB key to enter values across
a row, or when pressing the ENTER key to enter values down a
column.
 To set the EditOnEnter mode of cells:

 On the Properties window of the DataGridView control, set the
value of the EditMode property to EditOnEnter:
In the code-behind, you set the EditOnEnter mode as follows:

C#
this.dataGridView1.EditMode =
Gizmox.WebGUI.Forms.DataGridViewEditMode.EditOnEnter;
VB.NET
Me.DataGridView1.EditMode = Gizmox.WebGUI.Forms.DataGridViewEditMode.EditOnEnter
143
DataGridView
DataGridView
Dotted Style for Borders and Cells

The Dotted style is now available for the borders of a DataGridView
and for the cell borders within it.
Border Style
You can use the Dotted style to customize the borders of a

DataGridView.
Dotted
DataGridView
borders
144
 To set a Dotted style for DataGridView borders:

Dotted option of the BorderStyle property:
In the code-behind, you set a Dotted style for DataGridView as

follows:
C#
this.dataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.Dotted;
VB.NET
Me.DataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.Dotted
The borders of the DataGridView are now dotted.
145
DataGridView
DataGridView
Cell Border Style
You can use the Dotted style to customize the cell borders of a
DataGridView.
Dotted
cell
borders
146
 To set a Dotted style for cell borders:

Dotted value of the CellBorderStyle property:
In the code-behind, you set a Dotted style for cell borders as

follows:
C#
this.dataGridView1.CellBorderStyle =
Gizmox.WebGUI.Forms.DataGridViewCellBorderStyle.Dotted;
VB.NET
Me.DataGridView1.CellBorderStyle =
Gizmox.WebGUI.Forms.DataGridViewCellBorderStyle.Dotted
The cell borders of the DataGridView are now dotted.
147
DataGridView
ExpandableGroupBox
Chapter 4: ExpandableGroupBox
This chapter introduces the ExpandableGroupBox control and describes
the following: adding an ExpandableGroupBox control to an
application, setting the default state of an ExpandableGroupBox as
collapsed, changing the order of the text and image of the
ExpandableGroupBox header, and creating an accordion behavior
using multiple ExpandableGroupBox controls.
Exploring the ExpandableGroupBox Control

The ExpandableGroupBox control is a container control with a header,
which has the ability to expand/collapse in order to show/hide its
content. It is similar to the GroupBox control, except for its header.
When the ExpandableGroupBox is expanded, its content is shown:
An expanded
ExpandableGroupBox
control
When the user clicks the header of the Expandable GroupBox, its panel
collapses and its content is hidden:
A collapsed
ExpandableGroupBox
control
148
Adding an ExpandableGroupBox
Adding an ExpandableGroupBox
 To add an ExpandableGroupBox:
1. Add from the Toolbox the ExpandableGroupBox control to the
form:
When you start the application, the ExpandableGroupBox appears

as follows:
149
ExpandableGroupBox
ExpandableGroupBox
Clicking the header of the ExpandableGroupBox causes the panel

to collapse:
Setting the Default State of an ExpandableGroupBox as

Collapsed
By default, the ExpandableGroupBox control is expanded when it first
appears on a running application. If you want it to be in a collapsed
state by default, use the IsExpanded property.
 To set the default state of an ExpandableGroupBox as

collapsed:
1. On the Properties window of the ExpandableGroupBox control, set
the IsExpanded property to False:
150
Setting the Default State of an ExpandableGroupBox as Collapsed
In the code-behind, you set the default state of an

ExpandableGroupBox as collapsed as follows:
C#
this.expandableGroupBox1.IsExpanded = false;
VB.NET
Me.expandableGroupBox1.IsExpanded = False
When you start the application, the ExpandableGroupBox appears

in a collapsed state:
Clicking the header of the ExpandableGroupBox causes the panel

to expand.
151
ExpandableGroupBox
ExpandableGroupBox
Changing the Order of the Text and Image of the

ExpandableGroupBox Header
By default, the image of the ExpandableGroupBox header appears to
the left of the text:
Header image
Header text
You can change the default order by using the TextImageRelation

property.
Notes:
 To change the header text, use the Text property.
 To change the header image, customize the ExpandableGroupBox
skins using the Theme Designer. For more information about the
Theme Designer, see ‎Appendix B: Creating Themes and Using the
Theme Designer, page190.
 To change the order of the text and image of the

ExpandableGroupBox header:
1. On the Properties window of the ExpandableGroupBox control, set
the value of the TextImageRelation property to
TextBeforeImage:
152
Changing the Order of the Text and Image of the ExpandableGroupBox Header
In the code-behind, you change the order of the text and image of
the ExpandableGroupBox header as follows:
C#
this.expandableGroupBox1.TextImageRelation =
Gizmox.WebGUI.Forms.ExpandableGroupBox.HorizontalTextImageRelation.TextBeforeIma
ge;
VB.NET
Me.ExpandableGroupBox1.TextImageRelation =
Gizmox.WebGUI.Forms.ExpandableGroupBox.HorizontalTextImageRelation.TextBeforeIma
ge
When you start the application, the text of the header appears on
the left and the arrows appear on the right:
Header image and

text in a different
order
153
ExpandableGroupBox
ExpandableGroupBox
Creating an Accordion Behavior

The ExpandableGroupBox control enables you to create an Accordion
behavior. An Accordion behavior means that when several panes are
presented, only one is expanded at a time. Upon clicking the header of
a certain pane, this pane is expanded, while the other panes are
collapsed.
An accordion behavior is generally used for minimizing and maximizing

content. It enables you to present a large amount of information
without using a lot of screen space.
The following example illustrates the accordion behavior, based on

several ExpandableGroupBox controls that are docked together in one
Panel. When the header of one ExpandableGroupBox control is clicked,
its content is displayed, while the content of the other
ExpandableGroupBox controls is hidden:
ExpandableGroupBox
no.1
ExpandableGroupBox
no.2
154
ExpandableGroupBox
no.3
 To create an accordion behavior:

1. Add a container control, such as Panel, to your form.
2. Add into the Panel an ExpandableGroupBox control, and dock it
using the Dock property either to the Top or Bottom of the Panel:
Note: In this example, the ExpandableGroupBox controls are

docked to the top of the Panel.
155
ExpandableGroupBox
ExpandableGroupBox
3. Add another ExpandableGroupBox control into the Panel.

4. Place the second ExpandableGroupBox below or above the first
ExpandableGroupBox, depending on the docking direction, and
dock it:
5. Add additional ExpandableGroupBox controls to the Panel, place

them in the desired order, and dock them:
156
6. Register an Expand event handler to the first

ExpandableGroupBox control:
C#
this.expandableGroupBox1.Expand += this.expandableGroupBox1_Expand;
private void expandableGroupBox1_Expand(object sender, EventArgs e)
VB.NET
AddHandler Me.expandableGroupBox1.Expand, AddressOf

Me.expandableGroupBox1_Expand
Private Sub expandableGroupBox1_Expand(ByVal sender As Object, ByVal e As

EventArgs)
157
ExpandableGroupBox
ExpandableGroupBox
7. On the Code Editor, after the Expand event of the first

ExpandableGroupBox, make the other ExpandableGroupBox control
collapse as follows:
C#
expandableGroupBox2.IsExpanded = false;
VB.NET

EventArgs)
expandableGroupBox2.IsExpanded = False
End Sub
158
8. Repeat steps ‎6-‎7 for the other ExpandableGroupBox controls. To

each ExpandableGroupBox you need to add an Expand event, and
then define a Collapse method for the other ExpandableGroupBox
controls. Your code should look similar to the following:
C#
159
ExpandableGroupBox
ExpandableGroupBox
VB.NET

EventArgs)
End Sub

EventArgs)
End Sub

EventArgs)
End Sub

EventArgs)
End Sub
160
When you start the application, the ExpandableGroupBox controls

appear as follows:
9. To display by default all the ExpandableGroupBox controls as

collapsed, or to show the content of only one ExpandableGroupBox
control, use the IsExpanded property, as described on page 150.
When collapsing by default all ExpandableGroupBox controls except
for one, the ExpandableGroupBox Panel looks as follows when the
application starts:
10. Now you can add content to your ExpandableGroupBox controls,

the same way you add content to a GroupBox control.
161
ExpandableGroupBox
Miscellaneous
Chapter 5: Miscellaneous
This chapter introduces and describes the following controls and
procedures: adding new Strip controls, placing tabs across the bottom
of the TabControl, applying character casing to a ComboBox, loading
RTF files to the RichTextBox, and changing the RadioButton
appearance.
Strip Controls
There a four new Strip controls:
 ToolStrip control – see the section below.
 MenuStrip control - see page 165.
 ContextMenuStrip control – see page 168.
 StatusStrip control – see page 172.
ToolStrip
The ToolStrip control provides a common framework for combining

user interface elements into toolbars, status bars, and menus. It is
functionally equivalent to Windows Forms ToolStrip control.
For more information about the ToolStrip control, see:

http://msdn.microsoft.com/en-us/library/5daaw6hf.aspx
A ToolStrip
control
162
Strip Controls
 To add a ToolStrip control:

1. From VWG Toolbox, add the ToolStrip control to the form:
Note: By default, the ToolStrip control is docked to the top of the

form. You can change its docking location according to your needs
using the Dock property.
2. To add items to the ToolStrip control, perform one of the following:
 To add a command button, click the item box on the ToolStrip
control:
Note: To edit the command button you entered, use the Items
property of the ToolStrip control. Alternatively, click the
command button on the ToolStrip control, to open the
Properties window of the button.
163
Miscellaneous
Miscellaneous
 To add any available item type, click the arrow of the ToolStrip
drop-down list, and select your desired item:
 To add any available item type, on the Properties window of the

ToolStrip control, click the ellipsis button next to the Items
property to open the ToolStripItem Collection Editor dialog
box:
Note: For more information about using the ToolStripItem

Collection Editor dialog box, see Adding Buttons to the Quick
Access Toolbar, page 23.
164
Strip Controls
MenuStrip
The MenuStrip control exposes functionality to users by holding

commands that are grouped by a common theme. It is functionally
equivalent to Windows Forms MenuStrip control.
For more information about the MenuStrip control, see:

A MenuStrip
control
165
Miscellaneous
Miscellaneous
 To add a MenuStrip control:

1. From VWG Toolbox, add the MenuStrip control to the form:
Note: By default, the MenuStrip control is docked to the top of the

form. You can change its docking location according to your needs
using the Dock property.
2. To add items to the MenuStrip control, perform one of the
following:
 To add a MenuItem, enter the name of the item in the
MenuStrip text box:
166
Strip Controls
 To add any available item type, click the arrow of the MenuStrip
drop-down list, and select your desired item:

MenuStrip control, click the ellipsis button next to the Items
box:

167
Miscellaneous
Miscellaneous
ContextMenuStrip
The ContextMenuStrip control provides a shortcut menu that you

associate with a control. It is functionally equivalent to Windows Forms
ContextMenuStrip control.
For more information about the ContextMenuStrip control, see:

A ContextMenuStrip
control
 To add a ContextMenuStrip and associate it with another

control:
1. From VWG Toolbox, add the ContextMenuStrip control to the
form:
168
Strip Controls
2. To add items to the ContextMenuStrip control, perform one of the

following:
 To add a MenuItem, enter the name of the item in the
ContextMenuStrip text box:
Note: To edit the MenuItems you entered, use the Items

property of the ContextMenuStrip control. Alternatively, click
the item on the menu to open its Properties window.
 To add any available item type, click the arrow of the
ContextMenuStrip drop-down list, and select your desired item:
169
Miscellaneous
Miscellaneous

MenuStrip control, click the ellipsis button next to the Items
box:

3. To associate the ContextMenuStrip to another control, add the
second control to the form:
170
Strip Controls
4. On the Properties window of the control you added, click the arrow
next to the ContextMenuStrip property, and select the
ContextMenuStrip control you added to the form:
The ContextMenuStrip control is now associated with the second

control.
When you start the application, the second control appears. When
you right-click it, the ContextMenuStrip is displayed:
171
Miscellaneous
Miscellaneous
StatusStrip
The StatusStrip control is used on forms as an area, usually displayed

at the bottom of a window, in which an application can display various
kinds of status information. It is functionally equivalent to Windows
Forms StatusStrip control.
For more information about the StatusStrip control, see:

A StatusStrip
control
 To add a StatusStrip:
1. From VWG Toolbox, add the StatusStrip control to the form:
Note: By default, the StatusStrip control is docked to the bottom

of the form. To change its docking position, use the Dock property.
172
Strip Controls
2. To add items to the StatusStrip control, perform one of the

following:
 To add a StatusLabel item, click the item box on the StatusStrip
control:
Note: To edit the ToolStripStatusLabel you entered, use the

Items property of the StatusStrip control.
 To add any available item type, click the arrow of the
StatusStrip drop-down list, and select your desired item:
173
Miscellaneous
Miscellaneous

StatusStrip control, click the ellipsis button next to the Items
box:

174
Placing Tabs across the Bottom of the TabControl
Placing Tabs across the Bottom of the TabControl

You can now place the tabs of the TabControl across the bottom of the
control, in addition to placing them at the top.
Placing tabs
across the
bottom
175
Miscellaneous
Miscellaneous
 To place the tabs of the TabControl across the bottom of the

control:
 On the Properties window of the TabControl, select the Bottom
option of the Alignment property:
In the code-behind, you place tabs across the bottom of the

TabControl as follows:
C#
this.tabControl1.Alignment = Gizmox.WebGUI.Forms.TabAlignment.Bottom;
VB.NET
Me.TabControl1.Alignment = Gizmox.WebGUI.Forms.TabAlignment.Bottom
When you start the application, the tabs are located across the
bottom of the TabControl.
176
Applying Character Casing to a ComboBox
Applying Character Casing to a ComboBox

You can now apply character casing to the ComboBox control.
The CharacterCasing property enables you to modify the case of

characters as they are typed, according to the requirements of your
application.
 To apply character casing to a ComboBox:

 On the Properties windows of the CoboBox control, set the value of
the CharacterCasing property according to your requirements:
In the code-behind, you apply character casing to a ComboBox as

follows:
C#
this.comboBox1.CharacterCasing = Gizmox.WebGUI.Forms.CharacterCasing.Upper;
VB.NET
Me.ComboBox1.CharacterCasing = Gizmox.WebGUI.Forms.CharacterCasing.Upper
177
Miscellaneous
Miscellaneous
Loading RTF Files using the RichTextBox

The RichTextBox control now has the ability to load RTF files.
Note: To use the Load RTF Files functionality, you need to add as a
reference the Gizmox.WebGUI.Forms.Converters assembly.
178
Loading RTF Files using the RichTextBox
 To load RTF files using the RichTextBox:

1. Add the RTF files you want to load to a new
Resources/Documents folder in your project:
.
Note: Make sure you registered the Documents folder. For more
information about creating a new custom folder and registering it,
see page 189.
2. On the Form Designer, add a RichTextBox control to the form.
3. Add a Load event to the form:
179
Miscellaneous
Miscellaneous
4. To load the RTF file, add the following code:

C#
private void Form1_Load(object sender, EventArgs e)
{
// Adding a dynamic path to the RTF file
var Path = Context.Server.MapPath("~/Resources/Documents/Sample.rtf");
// Loading the RTF file
this.richTextBox1.LoadFile(Path);
VB.NET
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)

' Adding a dynamic path to the RTF file
Dim Path As String =

Context.Server.MapPath("~/Resources/Documents/Sample.rtf")
' Loading the RTF file
Me.richTextBox1.LoadFile(Path)
End Sub
When you start the application, the RTF file is loaded in the
RichTextBox control.
180
Changing the RadioButton Appearance
Changing the RadioButton Appearance

You can now display the RadioButton control as a standard button
, in addition to displaying it in its default appearance .
Button Normal
appearance appearance
 To set the RadioButton appearance:

 On the Properties window of the RadioButton control, select from
the Appearance property the desired appearance:
181
Miscellaneous
Miscellaneous
In the code-behind, you set the appearance of the RadioButton as

follows:
C#
this.radioButton1.Appearance = Gizmox.WebGUI.Forms.Appearance.Button;
VB.NET
Me.RadioButton1.Appearance = Gizmox.WebGUI.Forms.Appearance.Button
182
Using the Default Location of Images
Appendix A: Adding Images and Other

Resources to VWG Projects
When adding static images or other resources, such as documents, to

VWG projects, you first need to create for them default folders in the
projects. After storing the resources in their default folders, you can
add them to VWG controls and applications.
By default, when you add images to your application through the Form
Designer, the Designer looks for images in the Resources\Images
and Resources\Icons directories, located in the root directory of the
VWG Application project.
 To use VWG default location of images, create the required folders
as described in the following section.
 To change VWG default location of images, see page 184
 To create custom folders for other types of resources, see page
189.
Using the Default Location of Images

 To use the default location of images:
1. To create a storage folder for images, on the Solution Explorer,
right-click your project, and select Add  New Folder from the
context menu. Then, rename the new folder and call it Resources.
2. Create a sub-folder in the Resources folder, and name it Images:
183
Miscellaneous
Miscellaneous
3. To add your images to the project, open the Images sub-folder by

right-clicking it, and selecting the Open Folder in Windows
Explorer from the context menu.
Windows Explorer opens.
4. Add to the Images sub-folder the images you want to incorporate
in your application. Then, close Windows Explorer and return to
Visual Studio.
Note: You can also add your images to the project by pasting
them in the Images sub-folder in the Solution Explorer.
Changing the Default Location of Images

When creating a new default location for images, it is recommended to
use a relative path within your VWG folder for deployment purposes.
Therefore, in the following steps, you are first instructed to create a
Resources folder within your project, to host the new default folder.
 To change the default location of images:

1. To create a folder for the new storage location, on the Solution
Explorer, right-click your project, select Add  New Folder, and
name the folder Resources.
Note: You can also use another name for the folder. However,
since the Resources folder is VWG default folder name for storing
resources, it is recommended to use it.
2. Open the Property pages, by right-clicking your project and
selecting Properties from the context menu.
Notes:
 To open the Property pages of your project, you can also
perform the following:
 C# - Double-click the Properties folder in your project.
 VB.NET – Double-click the My Project folder in your
project.
 When using Visual WebGui Express Studio for Visual Studio
Express and Visual Web Developer Express, Visual WebGui
Integration tabs are not available on the Property pages. For
these versions, you should manually change the default image
location using the Web.config file, in the Directories section.
The Property pages appear.
184
3. On the Property pages, select the General tab on the left to open
it:
The default location of images that can be added to the project is

defined in the Directories section.
4. To change the default location of images, on the Directories
section select the Images row, and click the Browse button on
the right.
The Browse For Folder dialog box opens:
185
Miscellaneous
Miscellaneous
5. Locate your project folder, and create in the Resources folder a

new default folder for the application images, by using the Make
New Folder button:
Note: Due to security constraints of web applications, this folder

must be located within the project folder, not outside of it.
6. Click OK to save your new folder.
You return to the General tab, where the new folder you defined
appears in the Directories section:
7. Save and close the Property pages.
186
8. On to the Solution Explorer, click the Show All Files button to

display the new folder you created:
9. Right-click the new folder, and select Include In Project from the
context menu:
The new folder is now included in the project and it becomes

visible.
187
Miscellaneous
Miscellaneous
10. To add your images to the new folder, copy them from their
current location and past them in the new folder:
The images you want to add to your VWG application are now
located in the new default folder you created. When you add them
to controls using the Image property, they are located in the
Images sub-folder under the Directories folder:
188
Adding a Custom Folder for Resources
Adding a Custom Folder for Resources

Adding a custom folder for resources that are not images, is done
similarly to the way you create a new default storage location for
images.
 To add a custom folder for resources:

1. On the Solution Explorer, create a new sub-folder in the
Resources folder for the resources you want to add to the project:
2. Register the new Resources/Documents folder using either the

Property pages or the Web.config file, as described on steps ‎2-‎6,
pages 184 -186.
3. To locate a resource that is stored in the new custom folder, use
the following:
C#
var Path = Context.Server.MapPath("~/Resources/Documents/Sample.rtf");

// or
var Path2 = VWGContext.Current.Config.GetDirectory("Documents") + "Sample.rtf";
VB.NET
Dim Path As String = Context.Server.MapPath("~/Resources/Documents/Sample.rtf")
Dim Path2 as string = VWGContext.Current.Config.GetDirectory("Documents") +

"Sample.rtf"
189
Miscellaneous
Miscellaneous
Appendix B: Creating Themes and Using the

Theme Designer
Note: This appendix is aimed at providing brief and quick step-by-step
instructions for creating themes and using the Theme Designer for
customizing built-in images. It is not aimed at describing all the
features and functionalities of VWG themes and Theme Designer.
Creating a Theme
To use the Theme Designer for customizing built-in images, you first
need to create a new theme.
 To create a theme:
1. To create a theme, on the Solution Explorer, right-click your
project folder, and select Add  New Item.
The Add New Item dialog box appears:
2. From the Installed Templates left pane, select Visual WebGui.

Then, from the middle pane select Visual WebGui Theme.
3. In the Name box, enter a name for the new theme or accept the
default name.
4. Click the Add button to add the new theme to your project.
190
Creating a Theme
The new theme is created:
3. Build your project.

4. After adding the new theme to the project, you need to register it
in the Property pages of your project.
Notes:
 You can also manually register the new theme in the
Web.config file, in the Themes section.
 Registering the new theme is not required for using the Theme
Designer. However, the registration is required for applying the
theme to the application at run-time.
To open the Property pages, on the Solution Explorer, right-click
your project and select Properties.
The Property pages appear.
191
Miscellaneous
Miscellaneous
5. On the Property pages, Click the Registration tab on the left to

open it. Then, on the Themes section, click the Add button:
The ChooseThemesDialog dialog box appears:
6. On the ChooseThemesDialog dialog box, select the new theme

you created, and click OK.
192
Using the Theme Designer
The new theme now appears in the Registration section:
7. Select the theme check box to define it as the default theme of the
application:
Now you can start customizing the design of a built-in image using
the Theme Designer, as described in the following section.

 To use the Theme Designer to customize a built-in image:
1. To open the Theme Designer, on the Solution Explorer perform one
of the following:
 Select the theme file and click the View Designer button.
 Right-click the theme file, and select View Designer from the
context menu.
 Double-click the theme file.
193
Miscellaneous
Miscellaneous
The Theme Designer appears:
The Theme Designer consists of two panes. The Skins pane on the
left displays the list of all the controls that have skins that inherit
from the Control class. All VWG controls are displayed here, and
they are sorted by name and grouped by inheritance or by
containment. You can customize all the controls according to your
needs.
The Resources pane on the right displays the files that are
associated with the control that is selected on the Skins pane.
Each one of the images on the Resources pane is marked with an
arrow icon. This icon indicates that the resource is referenced, and
is not a local resource. This means that the resource belongs to
the parent theme, which is the theme your theme inherits from,
usually the Default theme. You can view a referenced resource, but
you cannot edit it until you make it a local resource, as described
in the following steps.
194
8. To customize an image of one of the controls, select it on the Skins

pane. The images of the control appear on the Resources pane:
Note: Several images files can compose one control image.

9. To edit an image, you need to disconnect it from its parent control
and to make it a local resource. To perform this, on the Resources
pane, right-click the image file, and select Override from the
context menu:
195
Miscellaneous
Miscellaneous
The small arrow at the left corner disappears, which means that
this image is now a local resource and can be edited:
10. To open the image for edit, double-click it. The image file is opened
in your default Image Editor:
11. Edit the image in the Image Editor, and save it.
The edited image now appears in the Theme Designer:
196
Now, when the control will be used in your application, its edited
image will be displayed instead of the default image.
Note: To remove the edited image from the Theme Designer and
restore the default image, right-click the image, and select Delete
from the context menu. The edited image is deleted, and the
default image is restored.
197
Miscellaneous

Visual WebGui V.6.4.0D - New Features and Functionalities PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Visual WebGui V.6.4.0D - New Features and Functionalities PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Visual WebGui

The manufacturer of this Documentation is Gizmox.

Copyright © 2012 Gizmox. All rights reserved.

Chapter 1: Introduction ..................................................................................................... 6

Chapter 2: RibbonBar ...................................................................................................... 19

Chapter 3: DataGridView ................................................................................................. 65

Setting the Colors of the Nested Tables .............................................................................. 98

Chapter 4: ExpandableGroupBox................................................................................. 148

Chapter 5: Miscellaneous .............................................................................................. 162

StatusStrip .................................................................................................................... 172

About this Document

VWG Version 6.4.0D WinWeb is functionally equivalent to VWG Version

Note: A detailed description of the new DockingManager control is not

Important! The new features and functionalities described in this

 The standard set of assemblies that are required for developing

To use the new controls and functionalities, you need to add as

Note: If you are using “without sources” installation, these assemblies

 To add a reference to VWG project:

The Add Reference dialog box opens:

Registering the New Controls

After referencing the required assemblies to your project, there are

If a control that requires registration is used in your project, and it is

Registering Namespaces and Controls Using the Property Pages

 To register controls and namespaces using the Property pages

The Property pages appear:

The Choose Controls dialog box appears:

3. Perform one of the following:

The selected namespace is now registered.

 To register a control – click the Controls tab to open it,

Note: To easily locate a control, enter the control name in the

Registering Namespaces and Controls Using the Web.config File

 To register controls and namespaces using the Web.config file:

The Web.config file appears:

2. On the Controls section, register a namespace or a control

The registration of a namespace consists of the following:

 To register a control – use the following example to register

The registration of a control consists of the following:

 The assembly name:

Adding the New Controls to the Toolbox

After referencing the required assemblies to your project, the new

 To manually add individual controls to the Toolbox:

The Choose Toolbox Items dialog box appears:

Note: To easily locate a control, enter the control name in the

2. On the .NET Framework Components tab, select the check

Exploring the RibbonBar

Quick Access Toolbar Quick Access Toolbar Button

Quick Access Toolbar

When the Quick Access Toolbar is displayed on a running application, it

The Quick Access Toolbar Button

The Customization Menu of the Quick Access Toolbar Button

Adding a Quick Access Toolbar to the RibbonBar

 To add a Quick Access Toolbar to the RibbonBar:

In the code-behind, you add the Quick Access Toolbar to the

The Quick Access Toolbar is now added to the RibbonBar. When

The Quick Access Toolbar button

Adding Buttons to the Quick Access Toolbar

The Quick Access Toolbar is basically a ToolStrip control. Therefore, it

 To add buttons to the Quick Access Toolbar:

The ToolStripItem Collection Editor dialog box appears:

A drop-down list appears, displaying the list of available items that

3. To add a button, select the ToolStripButton item from the drop-

4. To add an image to the new button, on the ToolStripButton

The Select Resource dialog box appears: