CodeCharge Studio

Grid Form


A grid form is used to display multiple rows of data within an HTML table. A grid should be used when you want to display records but not edit them. A grid does not have the functionality to insert, update or delete database records. If you need to perform any of these operations you should consider using a record form or an editable grid. Typically, grid forms contain Link fields to corresponding record forms where a specified record can be edited.

Apart from displaying multiple records, a grid facilitates such operations as sorting the records based on different columns in the grid or browsing multiple pages when the records to be displayed span more than one page.

Grid forms can be constructed using the Grid Builder or manually using the barebones grid form provided under the Forms tab of the Toolbox. Unless you need to exercise full control over the creation of the grid, it is recommended that you use the Grid Builder.

In terms of HTML markup, a grid form is made up mainly of an HTML table with different controls in its rows. The illustration below shows a basic Grid form. This form is created when the Grid option in the Forms tab of the Toolbox is clicked. The form has a title, a row for the field captions and another row where the database content is displayed.

Grid Elements

Data Source

Each grid retrieves its data based on its data source, configured similarly to all other forms. The Data Source is a property of a grid where you specify the database resource that will provide the data for the grid. This can be a table, a SQL query or a stored procedure. To access the Data Source dialog, click on the [...] button next to the Data Source property.


The Data Source dialog is also where you can specify input parameters. Input parameters are necessary when the grid form receives values from another form such as a search form and uses the input parameters to filter the records it displays. The search form submits the values then the grid form captures them for use in the where clause of the SQL statement that retrieves the database records.

Grid Sorters

A grid form typically has sorter controls for each column in the grid. Sorters controls are used to facilitate sorting of the records within the grid based on the columns of the grids. For instance, if a grid has name, email and title columns, sorters could be used to sort the grid records based on any one of the three columns. Sorter controls are usually located in the top-most row of the grid as shown below:

When you build a grid form using the Grid builders, you can elect to have the sorter controls automatically added to the form. If you build the form manually, you can also add sorter controls using the Sorter option under the Forms tab of the Toolbox. For more information on how to add and configure sorter controls, please refer to the section on building forms manually.

Data Row

The controls which display data in a grid are usually contained in the second row of the grid. Usually the data controls in a grid are Label controls that can display data but don't allow the user to alter or submit the data.

During runtime the data row in the grid is outputted for each record that needs to be shown. If the grid has 10 rows to be shown the data row will be printed out 10 times, each time with different data being shown in the data controls.

If you create a grid form using the Grid builders you can elect to have an alternate data row. One row would have a different background color to emphasize the separation between consecutive rows.

The row which appears under the data row contains text which is displayed whenever there is no data to be shown for the grid. This row is displayed conditionally, meaning that it is not shown when there is at least one row of data in the grid. You can change the text within this row as you wish.

Navigator Row

The last row in a grid is usually reserved for the Navigator control. In a grid with records which span multiple pages, the navigator provides a way to browse through all the available pages.

Grid Properties

You can click on glyphs surrounding a grid to expose the grid's design-time properties under the Data tab of the Properties panel. Alternatively, you can click on the name of the grid in the Project Explorer. Certain grid properties can also be modified dynamically at run-time.
The list of available design and run-time properties of a grid can be found in the Grid Form Reference.

See also

On-line, printable versions and updates