Free Style Grid control

Official Content
This documentation is valid for:

The Free Style grid, which can be used in Web interface objects (transactions and web panels), allows users to format the data so that it is displayed in a more flexible way than in the standard grid. Basically, it is a table where we can add attributes/variables, text blocks, images, buttons, web components, embedded pages, other Free Style grids and/or grids that will later be displayed on the screen.

This kind of grid does not have titles for columns and accepts more than one type of control, attribute or variable in the same cell, providing greater design freedom. At runtime, the grid is an HTML table.

Free Style Grid control Icon To add a Free Style Grid control to the selected location, drag the corresponding icon from the toolbox to the Web Form.


This example shows a Web Panel with the logo of each commercial airline related to the company. The following image shows the object at edit time.

Free Style Grid control Edit

A Free Style Grid control was first added to the form in order to insert the attributes of the Airline transaction. When you select several attributes to be inserted in the form (in this case, inside the Free Style Grid), GeneXus automatically inserts them in a table to enchance their alignment. But using a table is optional.

At runtime, the Web Panel is displayed as follows.

Free Style Grid control Runtime.JPG

Orders and Conditions

When working with Free Style grids in web panels, it is possible to set orders and conditions in order to establish them to grid elements, That is not possible on generated Transaction grids (such as level generated grids), as it is assumed to be showing every element from a record on update or delete mode.

To set them, in Grid properties you can find them under ControlName


Note. The report was created with four columns. To do this, the Rows property of the Free Style Grid control must be set to the correct value, which in this case is 4.
This example shows an ordinary Free Style Grid that does not have other nested grids. To read more about Nested Grids, click here.

Subcribe to this category's changes
Sub CategoriesAdd a new subcategory in this category
PagesAdd a new page in this category