DataGridView: Web form component

The DataGridView component is used to present data from relational repository data sources as a table.

Comments

To provide the component work, determine the mobj property in the design mode or the IDataGridView.DataSet property in the web form execution mode. The list of tale columns will correspond with the list of fields in the selected data source. Column visibility and header and data display settings can be determined in the columns property.

Double-clicking of the value area of the columns property or clicking of the dots button opens the column setup dialog box:

The left part of the dialog box displays the list of columns created based on relational data source fields. The search box can be used to find only the required columns. When any text is entered in the box, the list of columns is filtered. The list will display only the columns containing the searched text. By default, the order of columns corresponds with the order of fields in the source structure, To reorder the columns, select the required column and click the / buttons or drag the column to the required position. To manage column visibility in the component, select or deselect the checkbox of the column.

The right part of the dialog box displays the properties that can be set for columns. The dataPropertyName property is read-only and corresponds with the name of the relational data source field displayed in the column. The headerStyle and dataStyle groups of properties determine display settings for column header and its data. The list of properties corresponds with the IGridViewColumn.HeaderStyle/IGridViewColumn.DataStyle properties in the Fore language.

To select several columns, hold down the CTRL key and click the required columns. The right part will display only general column properties. The changeable values of properties will be applied to all selected columns.

The table uses the page mode of loading and displaying of data by default. It minimizes the query execution time and speeds up the work of the entire web form. To manage the work, use the allowPaging, recordsCount, recordsLimit, and showPaginationPanel properties.

In the tableStyle property one can select one of the alternating formatting styles for a table.

Work Features

If a data source for the component is Query, take into account the following feature to ensure correct work of sorting: if the query contains keywords that are different from SELECT and FROM, such a query must be set up as a nested one. For example, rewrite the query SELECT * FROM TABLE_DATA LIMIT 5000 as follows: SELECT * FROM (SELECT * FROM TABLE_DATA LIMIT 5000) subquery.

The component has different properties available in the design mode and in the web form execution mode.

Design mode Execution mode Events

name. Component name.
allowPaging. Indicates whether data pagination is used.
borderColor. Component border color.
color. Component background color.
columns. Settings of displaying and formatting columns and their data.
coordinate. Coordinate of the top left corner of the component. Coordinates can be specified in pixels or percents relative to parent component sizes. The property is available if the position property is set to absolute.
enabled. Indicates whether the component is available for the user.
enableSort. Indicates whether table columns can be sorted.
flexGrow. The property determines what proportion of container free space should be allocated for the component. If all components are set to 1, container free space is uniformly distributed between the components. If one of the components is set to 2, it occupies two times more free space, and so on. The property is available if the position property is set to relative.
font. Component text font options. If required, one can load custom fonts.
hint. Tooltip text.
mobj. The composite property, which sets a component data source dictionary key.
padding. Distance between component borders and component contents. Paddings can be specified in pixels or percents relative to component sizes.
popupMenu. The context menu displayed in the component. As a value, specify one of the PopupMenu components located on the form.
position. The method of component positioning on web form or inside container component. The property is set to absolute by default, the component has fixed position and size determined by the coordinate and size properties. If the property is set to relative, component position and sizes change depending on container component sizes. The coordinate property will be unavailable. Component position will be determined by the flexDirection, aligments, justifyContent properties of the parent component, and component sizes will change if the size property is set in percents.
recordsCount. The number of records displayed on a single table page.
recordsLimit. The limit of records loaded from the data source. When the value is empty, all data source records can be loaded to the table.
showHint. Indicates whether a tooltip is displayed when the cursor is hovered over the component.
showPaginationPanel. Indicates whether the panel for page-by-page navigation by table records is displayed.
size. Component sizes. Sizes can be specified in pixels or percents relative to parent component sizes.
tableStyle. Alternate style used in the table.
visible. Indicates whether the component is visible on running web form.

BorderColor. Component border color.
Color. Component background color.
DataGridView. Component table view settings.
Enabled. Indicates whether the component is available for the user.
PopupMenu. The context menu displayed in the component. As a value, specify one of the PopupMenu components located on the form.
Text. Text displayed in the component.
Visible. Indicates whether the component is available for the user.

The component has the onSelectionChange event that occurs on table cell selection change.

DataGridView

Inheritance Hierarchy

Description

Comments

Work Features

Example