Professional Documents
Culture Documents
Visual WebGui V.6.4.0D - New Features and Functionalities PDF
Visual WebGui V.6.4.0D - New Features and Functionalities PDF
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.
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.
4
VWG V.6.4D – New Features
About this Document
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
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
VWG V.6.4D – New Features
Requirements
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
7
Introduction
Introduction
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
VWG V.6.4D – New Features
Requirements
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.
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
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
VWG V.6.4D – New Features
Requirements
2. Click the Registration tab on the left to open it, and on the
Controls section, click the Add button:
11
Introduction
Introduction
12
VWG V.6.4D – New Features
Requirements
13
Introduction
Introduction
14
VWG V.6.4D – New Features
Requirements
15
Introduction
Introduction
16
VWG V.6.4D – New Features
Requirements
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
VWG V.6.4D – New Features
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.
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.
A Quick
Access
Toolbar
20
VWG V.6.4D – New Features
Quick Access Toolbar
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.
this.ribbonBar1.ShowQuickAccessToolbar = true;
VB.NET
Me.RibbonBar1.ShowQuickAccessToolbar = True
21
RibbonBar
RibbonBar
An empty Quick
Access Toolbar
22
VWG V.6.4D – New Features
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.
23
RibbonBar
RibbonBar
2. To add a button to the Quick Access Toolbar, click the arrow on the
Add button:
24
VWG V.6.4D – New Features
Quick Access Toolbar
25
RibbonBar
RibbonBar
26
VWG V.6.4D – New Features
Quick Access Toolbar
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:
A Quick Access
Toolbar with
command
buttons
27
RibbonBar
RibbonBar
// Declaring a ToolStripButton
this.ribbonBar1.QuickAccessToolBarItems.Add(this.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.Text = "Print";
VB.NET
' Adding the newly created toolStripButton1 to the Quick Access Toolbar
Me.ribbonBar1.QuickAccessToolBarItems.Add(Me.toolStripButton1)
28
VWG V.6.4D – New Features
Quick Access Toolbar
Me.toolStripButton1.DisplayStyle = Gizmox.WebGUI.Forms.ToolStripItemDisplayStyle
.Image
Me.toolStripButton1.Name = "toolStripButton1"
Me.toolStripButton1.Text = "Print"
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
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
VWG V.6.4D – New Features
Quick Access Toolbar
A Quick Access
Toolbar located
below the
RibbonBar
31
RibbonBar
RibbonBar
A minimized
RibbonBar
32
VWG V.6.4D – New Features
Quick Access Toolbar
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
34
VWG V.6.4D – New Features
Quick Access Toolbar
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.
"toolStripButton1",
"toolStripButton2"};
VB.NET
When you start the application, the items you selected in the
QuickAccessToolBarContextMenuItems property appear on the
Quick Access Toolbar menu:
35
RibbonBar
RibbonBar
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.
Start Menu
Button
Start Menu
36
VWG V.6.4D – New Features
Start Menu and Button
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:
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
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.
this.ribbonBar1.ShowStartButton = true;
VB.NET
Me.RibbonBar1.ShowStartButton = True
38
VWG V.6.4D – New Features
Start Menu and Button
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
By default, the Start Menu Button is blank. You can add an image to it
by using the StartButtonImage property.
The Images sub-folder displays the images you can add to the
Start Menu Button.
40
VWG V.6.4D – New Features
Start Menu and Button
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.
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
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.
42
VWG V.6.4D – New Features
Start Menu and Button
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
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.
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.
44
VWG V.6.4D – New Features
Start Menu and Button
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.
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.
Decreasing the
distance between
the Start Button
and the upper-left
corner
45
RibbonBar
RibbonBar
Increasing the
distance between
the Start Button
and the upper-left
corner
46
VWG V.6.4D – New Features
Start Menu and Button
this.ribbonBar1.StartButtonDiameterSize = 50;
VB.NET
Me.RibbonBar1.StartButtonDiameterSize = 50
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
48
VWG V.6.4D – New Features
Start Menu and Button
3. To add an item to the Start menu, click the arrow on the Add
button:
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:
7. On the Select Resource dialog box, select the desired image, and
click OK.
You return to the ToolStripItem Collection Editor dialog box.
50
VWG V.6.4D – New Features
Start Menu and Button
51
RibbonBar
RibbonBar
// Declaring a ToolStripButton
// Adding the newly created ToolStripButton to the left pane of the Start
// Menu
this.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(tbtnNew);
this.tbtnNew.Name = "New";
this.tbtnNew.Text = "New";
VB.NET
' Adding the newly created ToolStripButton to the left pane of the Start
' Menu
Me.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(Me.tbtnNew)
52
VWG V.6.4D – New Features
Start Menu and Button
Me.tbtnNew.Name = "New"
Me.tbtnNew.Text = "New"
You can change the size of the Start Menu to fit the options you
entered to it.
Resizing the
Start Menu
53
RibbonBar
RibbonBar
VB.NET
When you restart the application, the size of the Start Menu
changes according to the values you entered.
54
VWG V.6.4D – New Features
Start Menu and Button
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.
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();
GenerateNewItemList();
{
// Adding the first dynamic item
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear();
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);
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
VWG V.6.4D – New Features
Start Menu and Button
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
InitializeComponent()
GenerateNewItemList()
End Sub
GenerateNewItemList()
End Sub
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear()
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonDoc.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonDoc)
57
RibbonBar
RibbonBar
objButtonFolder.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonFolder.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonFolde
r)
objButtonPackage.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
objButtonPackage.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Add(objButtonPacka
ge)
End Sub
this.toolStripButton1.Click += this.New_Click;
{
// Define a default item list
GenerateNewItemList();
58
VWG V.6.4D – New Features
Start Menu and Button
VB.NET
GenerateNewItemList()
End Sub
{
this.ribbonBar1.StartMenuProperties.LeftToolStripProperties.Items.Add(tbtnN
ew);
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear();
// Create a new dynamic item for the right pane of the menu
// in this example - the Doc button
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
// Add an 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
ribbonBar1.StartMenuProperties.RightToolStripProperties.Items.Clear()
' Create a new dynamic item for the right pane of the menu, in this
' example - the Doc button
objButtonDoc.TextAlign = System.Drawing.ContentAlignment.MiddleLeft
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
VWG V.6.4D – New Features
Start Menu and Button
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.
62
VWG V.6.4D – New Features
Expand Button
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
64
VWG V.6.4D – New Features
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
Note: To explore the code behind the Hierarchical Grid creation, see
Creating a Hierarchical Grid through Code, page 78.
66
VWG V.6.4D – New Features
Hierarchical Grid
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:
67
DataGridView
DataGridView
68
VWG V.6.4D – New Features
Hierarchical Grid
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#
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
Me.ordersTableAdapter1.Fill(Me.northWindDataSet1.Orders)
Me.order_DetailsTableAdapter1.Fill(Me.northWindDataSet1.Order_Details)
Me.productsTableAdapter1.Fill(Me.northWindDataSet1.Products)
End Sub
70
VWG V.6.4D – New Features
Hierarchical Grid
71
DataGridView
DataGridView
First
hierarchicInfo
item
Second
hierarchicInfo
item
72
VWG V.6.4D – New Features
Hierarchical Grid
73
DataGridView
DataGridView
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
VWG V.6.4D – New Features
Hierarchical Grid
75
DataGridView
DataGridView
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
VWG V.6.4D – New Features
Hierarchical Grid
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
Note: The following code does not include the definition of all the
columns in the DataGridView.
78
VWG V.6.4D – New Features
Hierarchical Grid
C#
this.dataGridViewTextBoxColumn1 = new
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn();
this.dataGridViewTextBoxColumn2 = new
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn();
this.dataGridViewTextBoxColumn3 = new
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn();
// Define a DataSet
this.ordersTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.OrdersTableAdapter();
this.order_DetailsTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.Order_DetailsTableAdapter();
this.productsTableAdapter1 = new
HierarchicDGV.NorthWindDataSetTableAdapters.ProductsTableAdapter();
79
DataGridView
DataGridView
((System.ComponentModel.ISupportInitialize)(this.dataGridView1)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource1)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this.northWindDataSet1)).BeginInit()
;
((System.ComponentModel.ISupportInitialize)(this.bindingSource2)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource3)).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,
this.dataGridViewTextBoxColumn2,
this.dataGridViewTextBoxColumn3,
this.dataGridViewTextBoxColumn4,
this.dataGridViewTextBoxColumn5,
this.dataGridViewTextBoxColumn6,
this.dataGridViewTextBoxColumn7,
this.dataGridViewTextBoxColumn8,
this.dataGridViewTextBoxColumn9,
this.dataGridViewTextBoxColumn10,
80
VWG V.6.4D – New Features
Hierarchical Grid
this.dataGridViewTextBoxColumn11,
this.dataGridViewTextBoxColumn12,
this.dataGridViewTextBoxColumn13,
this.dataGridViewTextBoxColumn14});
this.dataGridView1.DataSource = this.bindingSource1;
this.dataGridView1.HierarchicInfos.Add(this.hierarchicInfo1);
this.dataGridView1.HierarchicInfos.Add(this.hierarchicInfo2);
this.dataGridView1.Name = "dataGridView1";
this.dataGridView1.RowTemplate.DefaultCellStyle.FormatProvider = new
System.Globalization.CultureInfo("is-IS");
this.dataGridView1.RowTemplate.Height = 26;
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;
// dataGridViewTextBoxColumn2
this.dataGridViewTextBoxColumn2.DataPropertyName = "CustomerID";
this.dataGridViewTextBoxColumn2.HeaderText = "CustomerID";
this.dataGridViewTextBoxColumn2.Name = "dataGridViewTextBoxColumn2";
// dataGridViewTextBoxColumn3
this.dataGridViewTextBoxColumn3.DataPropertyName = "EmployeeID";
this.dataGridViewTextBoxColumn3.HeaderText = "EmployeeID";
this.dataGridViewTextBoxColumn3.Name = "dataGridViewTextBoxColumn3";
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);
// bindingSource2
this.bindingSource2.DataMember = "Order Details";
this.bindingSource2.DataSource = this.northWindDataSet1;
// 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";
this.bindingSource3.DataSource = this.northWindDataSet1;
82
VWG V.6.4D – New Features
Hierarchical Grid
// hierarchicInfo2
this.hierarchicInfo2.BindedSource = this.bindingSource3;
this.hierarchicInfo2.FilteringDataMembers.Add(this.filterRelation2);
// filterRelation2
this.filterRelation2.SourceColumnDataName = "ProductID";
this.filterRelation2.TargetColumnDataName = "ProductID";
// Form1
this.Controls.Add(this.dataGridView1);
this.Text = "Form1";
((System.ComponentModel.ISupportInitialize)(this.dataGridView1)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource1)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.northWindDataSet1)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource2)).EndInit();
((System.ComponentModel.ISupportInitialize)(this.bindingSource3)).EndInit();
this.ResumeLayout(false);
83
DataGridView
DataGridView
VB.NET
Me.dataGridViewTextBoxColumn1 = New
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn()
Me.dataGridViewTextBoxColumn2 = New
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn()
Me.dataGridViewTextBoxColumn3 = New
Gizmox.WebGUI.Forms.DataGridViewTextBoxColumn()
Me.order_DetailsTableAdapter1 = New
NorthWindDataSetTableAdapters.Order_DetailsTableAdapter
Me.productsTableAdapter1 = New
NorthWindDataSetTableAdapters.ProductsTableAdapter
84
VWG V.6.4D – New Features
Hierarchical Grid
' Add filterRelation components for defining the column in the parent and
' child tables that will act as the interrelated column
CType(Me.dataGridView1, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.bindingSource1, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.northWindDataSet1,
System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.bindingSource2, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.bindingSource3, 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.dataGridViewTextBoxColumn5, Me.dataGridViewTextBoxColumn6,
Me.dataGridViewTextBoxColumn7, Me.dataGridViewTextBoxColumn8,
Me.dataGridViewTextBoxColumn9, Me.dataGridViewTextBoxColumn10,
Me.dataGridViewTextBoxColumn11, Me.dataGridViewTextBoxColumn12,
Me.dataGridViewTextBoxColumn13, Me.dataGridViewTextBoxColumn14})
Me.dataGridView1.DataSource = Me.bindingSource1
Me.dataGridView1.HierarchicInfos.Add(Me.hierarchicInfo1)
Me.dataGridView1.HierarchicInfos.Add(Me.hierarchicInfo2)
Me.dataGridView1.Name = "dataGridView1"
Me.dataGridView1.RowTemplate.DefaultCellStyle.FormatProvider = New
System.Globalization.CultureInfo("is-IS")
Me.dataGridView1.TabIndex = 0
85
DataGridView
DataGridView
' dataGridViewTextBoxColumn1
Me.dataGridViewTextBoxColumn1.DataPropertyName = "OrderID"
Me.dataGridViewTextBoxColumn1.HeaderText = "OrderID"
Me.dataGridViewTextBoxColumn1.Name = "dataGridViewTextBoxColumn1"
Me.dataGridViewTextBoxColumn1.ReadOnly = True
' dataGridViewTextBoxColumn2
Me.dataGridViewTextBoxColumn2.DataPropertyName = "CustomerID"
Me.dataGridViewTextBoxColumn2.HeaderText = "CustomerID"
Me.dataGridViewTextBoxColumn2.Name = "dataGridViewTextBoxColumn2"
' dataGridViewTextBoxColumn3
Me.dataGridViewTextBoxColumn3.DataPropertyName = "EmployeeID"
Me.dataGridViewTextBoxColumn3.HeaderText = "EmployeeID"
Me.dataGridViewTextBoxColumn3.Name = "dataGridViewTextBoxColumn3"
' 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)
' bindingSource2
Me.bindingSource2.DataMember = "Order Details"
Me.bindingSource2.DataSource = Me.northWindDataSet1
86
VWG V.6.4D – New Features
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"
Me.bindingSource3.DataSource = Me.northWindDataSet1
' hierarchicInfo2
Me.hierarchicInfo2.BindedSource = Me.bindingSource3
Me.hierarchicInfo2.FilteringDataMembers.Add(Me.filterRelation2)
' filterRelation2
Me.filterRelation2.SourceColumnDataName = "ProductID"
Me.filterRelation2.TargetColumnDataName = "ProductID"
' Form1
Me.Controls.Add(Me.dataGridView1)
Me.Text = "Form1"
87
DataGridView
DataGridView
CType(Me.dataGridView1, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.bindingSource1, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.northWindDataSet1, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.bindingSource2, System.ComponentModel.ISupportInitialize).EndInit()
CType(Me.bindingSource3, System.ComponentModel.ISupportInitialize).EndInit()
Me.ResumeLayout(False)
End Sub
Events
88
VWG V.6.4D – New Features
Hierarchical Grid
{
// Do not expand for customerID = TOMSP
if
(((DataRowView)e.ExpandingRow.DataBoundItem).Row["CustomerID"].ToString()
== "TOMSP")
e.Cancel = true;
VB.NET
If (CType(e.ExpandingRow.DataBoundItem,
DataRowView).Row("CustomerID").ToString = "TOMSP") Then
e.Cancel = True
End If
End Sub
89
DataGridView
DataGridView
if (((DataRowView)e.ExpandedRow.DataBoundItem).Row["CustomerID"].ToString()
== "VINET")
VB.NET
If (CType(e.ExpandedRow.DataBoundItem,
DataRowView).Row("CustomerID").ToString = "VINET") Then
End If
End Sub
90
VWG V.6.4D – New Features
Hierarchical Grid
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
91
DataGridView
DataGridView
this.dataGridView1.ExpansionIndicator =
Gizmox.WebGUI.Forms.ShowExpansionIndicator.CheckOnExpand;
VB.NET
Me.dataGridView1.ExpansionIndicator =
Gizmox.WebGUI.Forms.ShowExpansionIndicator.CheckOnExpand
92
VWG V.6.4D – New Features
Hierarchical Grid
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
93
DataGridView
DataGridView
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)
objDataGridView.Height = GetDataGridViewHeight(objDataGridView);
94
VWG V.6.4D – New Features
Hierarchical Grid
if (objDataGridView != null)
objDataGridView.Height = GetDataGridViewHeight(objDataGridView);
objDataGridView.ContainingRow.DataGridView.Height +=
objDataGridView.Height;
objDataGridView.RootGrid.Update();
int intRowsHeight = 0;
intRowsHeight += objRow.Height;
if (objDataGridView.AllowUserToAddRows)
intRowsHeight += 50;
return intRowsHeight;
95
DataGridView
DataGridView
VB.NET
Case 1
Case 2
End Select
End Sub
objDataGridView.Height = GetDataGridViewHeight(objDataGridView)
End Sub
objDataGridView.Height = GetDataGridViewHeight(objDataGridView)
objDataGridView.ContainingRow.DataGridView.Height =
(objDataGridView.ContainingRow.DataGridView.Height +
objDataGridView.Height)
objDataGridView.RootGrid.Update()
End If
End Sub
96
VWG V.6.4D – New Features
Hierarchical Grid
Next
If objDataGridView.AllowUserToAddRows Then
End If
Return intRowsHeight
End Function
97
DataGridView
DataGridView
You can set the colors of the nested tabled using the
HierarchicGridCreated event.
Setting the
colors of the
nested tables
98
VWG V.6.4D – New Features
Hierarchical Grid
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
Case 1
e.NewlyCreatedGrid.DefaultCellStyle.BackColor = Color.Khaki
Case 2
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.
The Column
Chooser button
100
VWG V.6.4D – New Features
Column Chooser
this.dataGridView1.ShowColumnChooser = true;
VB.NET
Me.dataGridView1.ShowColumnChooser = True
101
DataGridView
DataGridView
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.
102
VWG V.6.4D – New Features
Column Chooser
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
104
VWG V.6.4D – New Features
Filtering by Column using a Filter Row
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
105
DataGridView
DataGridView
106
VWG V.6.4D – New Features
Filtering by Column using a Filter Row
Requirements
107
DataGridView
DataGridView
this.dataGridView1.ShowFilterRow = true;
VB.NET
Me.DataGridView1.ShowFilterRow = True
108
VWG V.6.4D – New Features
Filtering by Column using a Filter Row
Filter Row
109
DataGridView
DataGridView
You can determine what will be the maximum number of values that
will be displayed in the drop-down Value list.
this.dataGridView1.MaxFilterOptions = 5;
VB.NET
Me.DataGridView1.MaxFilterOptions = 5
110
VWG V.6.4D – New Features
Filtering by Column using a Filter Row
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.
Grouping
Drop Area
112
VWG V.6.4D – New Features
Grouping by Column
113
DataGridView
DataGridView
Requirements
114
VWG V.6.4D – New Features
Grouping by Column
this.dataGridView1.ShowGroupingDropArea = true;
VB.NET
Me.dataGridView1.ShowGroupingDropArea = True
Grouping Drop
Area
115
DataGridView
DataGridView
116
VWG V.6.4D – New Features
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
Adding a
column header
to the existing
grouping
117
DataGridView
DataGridView
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
VWG V.6.4D – New Features
Grouping by Column
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.
119
DataGridView
DataGridView
You can group the data by column in the Designer, and display the
grouped data at run-time.
120
VWG V.6.4D – New Features
Grouping by Column
121
DataGridView
DataGridView
this.dataGridView1.GroupingColumns.Add("CompanyName");
VB.NET
Me.dataGridView1.GroupingColumns.Add("CompanyName")
122
VWG V.6.4D – New Features
Grouping by Column
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.
123
DataGridView
DataGridView
Command
buttons for
grouping by
column
Clicking a
button groups
the grid
according to
the indicated
columns
124
VWG V.6.4D – New Features
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.
this.dataGridView1.GroupingColumns.Clear();
this.dataGridView1.GroupingColumns.Add("Country");
this.dataGridView1.GroupingColumns.Add("PostalCode");
}
// Define a Clear button
this.dataGridView1.GroupingColumns.Clear();
125
DataGridView
DataGridView
VB.NET
Me.dataGridView1.GroupingColumns.Clear()
Me.dataGridView1.GroupingColumns.Add("Country")
Me.dataGridView1.GroupingColumns.Add("PostalCode")
End Sub
Me.dataGridView1.GroupingColumns.Clear()
End Sub
In the following example, the content, the background color, and the
foreground color of the header were changed:
Customized
headers
126
VWG V.6.4D – New Features
Grouping by Column
C#
this.dataGridView1.GroupHeaderFormatting += new
Gizmox.WebGUI.Forms.GroupHeaderFormattingEventHandler(this.dataGridView1_GroupHe
aderFormatting);
VB.NET
End Sub
127
DataGridView
DataGridView
{
// Define the header content
e.FormattingApplied = true;
128
VWG V.6.4D – New Features
Grouping by Column
VB.NET
e.FormattingApplied = true
End Sub
Customized
header
content
129
DataGridView
DataGridView
{
// Define the header content
e.HeaderLabel.BackColor = Color.Olive;
e.HeaderLabel.ForeColor = Color.White;
e.FormattingApplied = true;
}
VB.NET
e.HeaderLabel.BackColor = Color.Olive
e.HeaderLabel.ForeColor = Color.White
130
VWG V.6.4D – New Features
Grouping by Column
e.FormattingApplied = True
End Sub
Customized
header
colors
131
DataGridView
DataGridView
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
VWG V.6.4D – New Features
Grouping by Column
133
DataGridView
DataGridView
C#
this.checkBox1.CheckedChanged += new
System.EventHandler(this.checkBox1_CheckedChanged);
VB.NET
End Sub
dataGridView1.SupportGroupCount = checkBox1.Checked;
dataGridView1.Update();
VB.NET
dataGridView1.SupportGroupCount = checkBox1.Checked
dataGridView1.Update()
End Sub
134
VWG V.6.4D – New Features
Grouping by Column
e.HeaderLabel.BackColor = Color.Olive;
e.HeaderLabel.ForeColor = Color.White;
e.FormattingApplied = true;
VB.NET
e.HeaderLabel.BackColor = Color.Olive
e.HeaderLabel.ForeColor = Color.White
e.FormattingApplied = True
End Sub
135
DataGridView
DataGridView
136
VWG V.6.4D – New Features
Displaying a Grid Caption
Displaying a
DataGridView
caption
Note: To enter a text to the caption, use the Text property of the
DataGridView control.
137
DataGridView
DataGridView
this.dataGridView1.IsCaptionVisible = true;
VB.NET
Me.DataGridView1.IsCaptionVisible = True
When you start the application, the caption appears above the
DataGridView control.
138
VWG V.6.4D – New Features
Column Fill Mode
http://msdn.microsoft.com/en-us/library/ms171605.aspx
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
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
140
VWG V.6.4D – New Features
Column Fill Mode
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.
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
142
VWG V.6.4D – New Features
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.
this.dataGridView1.EditMode =
Gizmox.WebGUI.Forms.DataGridViewEditMode.EditOnEnter;
VB.NET
Me.DataGridView1.EditMode = Gizmox.WebGUI.Forms.DataGridViewEditMode.EditOnEnter
143
DataGridView
DataGridView
Border Style
Dotted
DataGridView
borders
144
VWG V.6.4D – New Features
Dotted Style for Borders and Cells
this.dataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.Dotted;
VB.NET
Me.DataGridView1.BorderStyle = Gizmox.WebGUI.Forms.BorderStyle.Dotted
145
DataGridView
DataGridView
You can use the Dotted style to customize the cell borders of a
DataGridView.
Dotted
cell
borders
146
VWG V.6.4D – New Features
Dotted Style for Borders and Cells
this.dataGridView1.CellBorderStyle =
Gizmox.WebGUI.Forms.DataGridViewCellBorderStyle.Dotted;
VB.NET
Me.DataGridView1.CellBorderStyle =
Gizmox.WebGUI.Forms.DataGridViewCellBorderStyle.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.
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
VWG V.6.4D – New Features
Adding an ExpandableGroupBox
Adding an ExpandableGroupBox
To add an ExpandableGroupBox:
1. Add from the Toolbox the ExpandableGroupBox control to the
form:
149
ExpandableGroupBox
ExpandableGroupBox
150
VWG V.6.4D – New Features
Setting the Default State of an ExpandableGroupBox as Collapsed
this.expandableGroupBox1.IsExpanded = false;
VB.NET
Me.expandableGroupBox1.IsExpanded = False
151
ExpandableGroupBox
ExpandableGroupBox
Header image
Header text
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.
152
VWG V.6.4D – New Features
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:
153
ExpandableGroupBox
ExpandableGroupBox
ExpandableGroupBox
no.1
ExpandableGroupBox
no.2
154
VWG V.6.4D – New Features
Creating an Accordion Behavior
ExpandableGroupBox
no.3
155
ExpandableGroupBox
ExpandableGroupBox
156
VWG V.6.4D – New Features
Creating an Accordion Behavior
C#
this.expandableGroupBox1.Expand += this.expandableGroupBox1_Expand;
VB.NET
157
ExpandableGroupBox
ExpandableGroupBox
expandableGroupBox2.IsExpanded = false;
expandableGroupBox3.IsExpanded = false;
expandableGroupBox4.IsExpanded = false;
VB.NET
expandableGroupBox2.IsExpanded = False
expandableGroupBox3.IsExpanded = False
expandableGroupBox4.IsExpanded = False
End Sub
158
VWG V.6.4D – New Features
Creating an Accordion Behavior
expandableGroupBox2.IsExpanded = false;
expandableGroupBox3.IsExpanded = false;
expandableGroupBox4.IsExpanded = false;
expandableGroupBox1.IsExpanded = false;
expandableGroupBox3.IsExpanded = false;
expandableGroupBox4.IsExpanded = false;
expandableGroupBox1.IsExpanded = false;
expandableGroupBox2.IsExpanded = false;
expandableGroupBox4.IsExpanded = false;
expandableGroupBox1.IsExpanded = false;
expandableGroupBox2.IsExpanded = false;
expandableGroupBox3.IsExpanded = false;
159
ExpandableGroupBox
ExpandableGroupBox
VB.NET
expandableGroupBox2.IsExpanded = False
expandableGroupBox3.IsExpanded = False
expandableGroupBox4.IsExpanded = False
End Sub
expandableGroupBox1.IsExpanded = False
expandableGroupBox3.IsExpanded = False
expandableGroupBox4.IsExpanded = False
End Sub
expandableGroupBox1.IsExpanded = False
expandableGroupBox2.IsExpanded = False
expandableGroupBox4.IsExpanded = False
End Sub
expandableGroupBox1.IsExpanded = False
expandableGroupBox2.IsExpanded = False
expandableGroupBox3.IsExpanded = False
End Sub
160
VWG V.6.4D – New Features
Creating an Accordion Behavior
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
A ToolStrip
control
162
VWG V.6.4D – New Features
Strip Controls
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:
164
VWG V.6.4D – New Features
Strip Controls
MenuStrip
A MenuStrip
control
165
Miscellaneous
Miscellaneous
166
VWG V.6.4D – New Features
Strip Controls
To add any available item type, click the arrow of the MenuStrip
drop-down list, and select your desired item:
167
Miscellaneous
Miscellaneous
ContextMenuStrip
A ContextMenuStrip
control
168
VWG V.6.4D – New Features
Strip Controls
169
Miscellaneous
Miscellaneous
170
VWG V.6.4D – New Features
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:
171
Miscellaneous
Miscellaneous
StatusStrip
A StatusStrip
control
To add a StatusStrip:
1. From VWG Toolbox, add the StatusStrip control to the form:
172
VWG V.6.4D – New Features
Strip Controls
173
Miscellaneous
Miscellaneous
174
VWG V.6.4D – New Features
Placing Tabs across the Bottom of the TabControl
Placing tabs
across the
bottom
175
Miscellaneous
Miscellaneous
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
VWG V.6.4D – New Features
Applying Character Casing to a ComboBox
this.comboBox1.CharacterCasing = Gizmox.WebGUI.Forms.CharacterCasing.Upper;
VB.NET
Me.ComboBox1.CharacterCasing = Gizmox.WebGUI.Forms.CharacterCasing.Upper
177
Miscellaneous
Miscellaneous
Note: To use the Load RTF Files functionality, you need to add as a
reference the Gizmox.WebGUI.Forms.Converters assembly.
178
VWG V.6.4D – New Features
Loading RTF Files using the RichTextBox
.
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
{
// Adding a dynamic path to the RTF file
this.richTextBox1.LoadFile(Path);
VB.NET
Me.richTextBox1.LoadFile(Path)
End Sub
When you start the application, the RTF file is loaded in the
RichTextBox control.
180
VWG V.6.4D – New Features
Changing the RadioButton Appearance
Button Normal
appearance appearance
181
Miscellaneous
Miscellaneous
this.radioButton1.Appearance = Gizmox.WebGUI.Forms.Appearance.Button;
VB.NET
Me.RadioButton1.Appearance = Gizmox.WebGUI.Forms.Appearance.Button
182
VWG V.6.4D – New Features
Using the Default Location of Images
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.
183
Miscellaneous
Miscellaneous
184
VWG V.6.4D – New Features
Changing the Default Location of Images
3. On the Property pages, select the General tab on the left to open
it:
185
Miscellaneous
Miscellaneous
186
VWG V.6.4D – New Features
Changing the Default Location of Images
9. Right-click the new folder, and select Include In Project from the
context menu:
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
VWG V.6.4D – New Features
Adding a Custom Folder for Resources
VB.NET
189
Miscellaneous
Miscellaneous
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:
190
VWG V.6.4D – New Features
Creating a Theme
191
Miscellaneous
Miscellaneous
192
VWG V.6.4D – New Features
Using the Theme Designer
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.
193
Miscellaneous
Miscellaneous
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
VWG V.6.4D – New Features
Using the Theme Designer
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
VWG V.6.4D – New Features
Using the Theme Designer
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