FMX.GridDemo Sample

From RAD Studio Code Examples
Jump to: navigation, search

This sample illustrates how to use grids in your applications. The GridDemo sample illustrates using several grid features on different platforms, if you run GridDemo under iOS, then it uses the native iOS grid control.


You can find the GridDemo sample project at:

  • Start | Programs | Embarcadero RAD Studio Alexandria | Samples and navigate to:
    • Object Pascal\Multi-Device Samples\User Interface\GridDemo
    • CPP\Multi-Device Samples\User Interface\GridDemo
  • Subversion Repository:
    • You can find Delphi and C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.


The GridDemo sample contains three tabs:

  • TStringGrid tab contains the StringGrid1 string grid control of the TStringGrid type.
  • TGrid tab contains the Grid1 grid control of the TGrid type.
  • Grid and LiveBinding tab contains the Grid2 grid control of the TGrid type using LiveBinding.

How to Build and Run the Sample

To build and run this application:

  1. Navigate to one of the locations given above and open:
    • Delphi: GridDemo.dproj.
    • C++: GridDemo.cbproj.
  2. Press CTRL+SHIFT+F9 or select Run > Run Without Debugging.


When you run the application, the sample window with three following tabs opens: TStringGrid, TGrid, and Grid and LiveBinding. Also, there is the Options button, and a box with a list of events that occured in grid controls:

  • The Options button displays controls showing the current grid options and other grid properties. These controls are shown on the right of the main form. The options define the way how three used grids look, as well as their behavior. For example, checking ON the ColumnResize option makes the width of columns in the grids resizable with the mouse.
Notice the disabled ControlType property is set to Platform. It means that on each platform FireMonkey checks whether the platform has a native grid implementation and tries to use it.
Under iOS platform, GridDemo uses the native iOS grid control, you can find the iOS implementation of grid controls here:
C:\Program Files (x86)\Embarcadero\Studio\22.0\Source\fmx\FMX.Grid.iOS.pas
  • The box next to the Options button on the right top of the main form shows all events that occurred in grid controls.
To display the list of events in a box, click in a grid area.
  • The TStringGrid tab contains the StringGrid1 string grid that includes 9 columns from CheckColumn1 (of the TCheckColumn type) till TimeColumn1 (of the TTimeColumn type). These columns you can see in the Structure View under the StringGrid1 node.
The FormCreate method calls InitStringValue in the
for I := 0 to StringGrid1.RowCount - 1 do
loop to initialize cells in the StringGrid1 grid. See the code in the {$REGION String grid updating}region.
The value printed in the String column prompts the type of the feature demonstrated in the corresponding row. Fore example, the Progress 50% prompts that this row demonstrates progress bar properties. Namely, the cell in the Column column displaying '500' is the Value of the progress bar. The cell in the Progress column displays the progress bar itself.
  • The TGrid tab contains the Grid1 grid with 10 columns. These columns are initialized in the
{$REGION Grid updating} region of the FormCreate method.
Notice the last TImageColumn column. Double-click a cell in this column. The Open dialog box opens. Browse for a folder containing some images. Select an image and click Open. The selected image appears in the cell.
  • The Grid and LiveBinding tab contains the Grid2 grid that contains 8 columns. This grid used the LiveBinding to bound these columns (in the grid) to columns in the FDMemTable1 dataset of the TFDMemTable type.


The GridDemo sample contains the following most important components:

See Also