Introducing the VerticalGridControl

• Jan 06, 2019
• 6 minutes to read

The Vertical Grid Control (VGridControl) is a data aware control that allows you to display and edit data from different data sources. You can connect it to a database, or a list that implements the IList or IBindingList interface. Moreover, the control can be used in unbound mode, in which the grid is manually populated with data.

The control’s main feature is its data representation model. The VerticalGrid Control doesn’t present data in the traditional way you’re used to seeing it. The control can be thought of as an inverted grid, since the data source fields are represented as row headers, while the data source records are represented as columns.

Grid Control vs VerticalGridControl

The following image shows how sample data is displayed using a traditional grid control (GridControl):

And this is how the same data is represented using a Vertical Grid Control:

You can see that unlike the GridControl, records in the VerticalGrid Control are represented as columns, not as rows. This data organization model narrows the issues that the VerticalGrid Control is designed to solve. Generally the VerticalGrid Control is appropriate for editing records if data cells must be displayed one under another.

Layout Styles

Data in the Vertical Grid Control can be represented using one of three layout styles. A layout style determines the number of records visible on screen within the control at one time, and the way fields and field values are arranged.

To select a layout style, use the VGridControl.LayoutStyle property. It allows you to choose between the Single Record View Layout, Multiple Records View Layout and Bands View Layout.

The following images demonstrate the differences between the layout styles:

• Single Record View Layout

 

Image	Main Features
	A single record is displayed at one time; Row headers along with record values occupy the entire grid; If there are too many fields displayed to fit into the control vertically, the vertical scrollbar will be displayed; The horizontal scrollbar acts as a record navigator.

• Multiple Records View Layout

 

Image	Main Features
	Multiple records can be visible on screen at one time; If there are too many fields displayed to fit into the control vertically, the vertical scrollbar will be displayed; End-users can resize columns by dragging the right border of the leftmost visible value column (the VGridOptionsBehavior.ResizeRowValues property must be set to true); The horizontal scrollbar acts as a record navigator.

• Bands View Layout

 

Image	Main Features
	A single record is displayed at one time; Vertical scrolling is not supported. Rows that do not fit into the control vertically wrap, and start a new band to the right of the current band; The horizontal scrollbar acts as a record navigator.

For more information on layout styles, please refer to the Layouts topic.

Category Rows

The VerticalGrid Control supports category rows used to group regular rows into categories. Separating rows into categories improves the control’s usability, as an end-user can now quickly find the required row. A category row displays a descriptive caption and expand button which allows the end-user to collapse, and then restore the group.

The following images demonstrate two styles for painting expand buttons: ExplorerBar and TreeView. The controls in the images are painted using the Asphalt World skin:

To select an expand button’s paint style, use the VGridControlBase.TreeButtonStyle property.

Data Editing

The VerticalGrid Control not only displays data, but also provides the editing capabilities. Multiple editors (TextEdit, ComboBoxEdit, PictureEdit, SpinEdit, DateEdit, etc) that are included in the XtraEditors library can be used for in-place editing within cells.

By default, the control uses specific editors to edit data of specific types. For instance, if a cell stores Boolean data, a CheckEdit control is used for in-place editing.

If the default editors don’t meet your requirements, you can easily assign a specific editor to a row, and it will be used to edit all cells within this row. An editor can be assigned to a row using the VerticalGrid Designer, or in code via the row’s RowProperties.RowEdit property.

The following image demonstrates a sample VerticalGrid Control with different editors assigned to its cells (ComboBoxEdit, PictureEdit, SpinEdit, etc).

The VerticalGrid Control provides the VGridControlBase.ValidatingEditor and VGridControlBase.ValidateRecord events which support the validation mechanism. This allows you to check the data being entered by an end-user within a specific cell or record, indicate errors, if any, and prevent invalid data from being saved back to a data source.

See the In-place Editors document, for more information.

Layout Customization

The VerticalGrid Control natively supports runtime layout customization. End-users are able to resize columns, resize and rearrange rows, temporarily hide rows to the Customization Form and then restore them. By default, the VerticalGrid Control only permits row and column sizing, and prohibits other customization.

The following table shows which settings control various runtime customization operations. So, you can switch the corresponding option on to allow the required operation:

Operation	Control’s setting
Resizing columns	VGridOptionsBehavior.ResizeHeaderPanel enables the header column horizontal sizing; VGridOptionsBehavior.ResizeRowValues enables the value column horizontal sizing.
Resizing rows	The control’s VGridOptionsBehavior.ResizeRowHeaders property and the VGridOptionsRow.AllowSize options of rows.
Drag-and-drop of rows	The control’s VGridOptionsBehavior.DragRowHeaders property and the VGridOptionsRow.AllowMove options of rows.
Hiding/restoring rows	The VerticalGrid Control allows you to hide specific rows by setting their BaseRow.Visible properties to false. Hidden rows can be accessed by end-users at runtime via the Customization Form. The end-user can drag a hidden row from the Customization Form to the grid, or hide currently visible rows by dragging them to the Customization Form. Drag-and-drop to/from the Customization Form is only available if the form is visible. To display the form call the VGridControlBase.RowsCustomization method. To hide the form, call the VGridControlBase.DestroyCustomization method.
Expanding category rows	BaseOptionsView.ShowButtons displays/hides category expand buttons. VGridOptionsRow.DblClickExpanding options of rows - allows the rows to collapse/expand on a double-click event.

Note that changes made in the layout by end-users at runtime are not automatically saved between application runs. You need to use one of the SaveLayoutTo… methods provided by the VerticalGrid Control to save the current layout to a data store (a stream, XML file or the system registry), and use one of the RestoreLayoutFrom… methods to restore the saved layout. See the Saving and Restoring Layout Basics topic, for more information.

In addition to the built-in layout customization support, you can provide end-users with OLE drag-and-drop to and from the VerticalGridControl. See the OLE Drag and Drop Overview topic, for more information.

Other Features

There are many other features supported by the VerticalGrid Control that you may find useful:

• Multiple Editor Rows - can display multiple editors within a single row. Details.
• Nested Rows, which allow you to organize data into tree-like structures. Details.
• look and feel and Skinning Technology - manages the look and feel of the control. Details.
• Appearance Mechanism and Style Schemes - allows you to specify appearance settings (background and foreground colors, font settings, etc). Details.