FMX.GridDemo Sample

From RAD Studio Code Examples
Jump to: navigation, search

This sample illustrates how to create applications using grids. 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.

Location

You can find the GridDemo sample project at:

Description

The GridDemo sample contains three tabs:

  1. TStringGrid tab contains the StringGrid1 string grid control of the TStringGrid type.
  2. TGrid tab contains the Grid1 grid control of the TGrid type.
  3. 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, you can execute the following steps:

  1. Navigate to one of the locations given above and open:
    • Delphi: GridDemo.dproj.
    • C++: GridDemo.cbproj.
  2. In the Project Manager, click the + icon next to the ..\...
  3. Right-click the FMX.Grid.iOS.pas file and select Remove From Project context menu command. Click Yes in the Confirm dialog box.
  4. Right-click the GridDemo.exe node and select Add... context menu command. In the Add to Project dialog box browse for
    C:\Program Files (x86)\Embarcadero\Studio\18.0\Source\fmx\FMX.Grid.iOS.pas
    Select this file and click Open. In the Project Manager, you see that the FMX.Grid.iOS.pas file is added to the project.
    Note: FMX.Grid.iOS.pas provides the iOS implementation of the grid control.
    Note: You need to add the FMX.Grid.iOS.pas file manually because it is not included into the supplied FMX package.
  5. Press CTRL+SHIFT+F9 or choose Run > Run Without Debugging.

Classes

The GridDemo sample contains the following most important components:

Implementation

With Update 1, you can now select from either Styled or Platform as the ControlType for TGrid and TStringGrid. Styled allows to apply custom styles to your grid control (such as the premium styles available for 10.1 Berlin) while Platform lets you enable platform native rendering for the grid control on iOS.

When you run the application, the main window of the sample opens. It contains three tabs TStringGrid, TGrid, and Grid and LiveBinding, the Options button, and the scroll box shoving all occurred events:

  • The Options button displays controls showing the current grid options and some other grid properties. These controls are shown on the right of the main form. These options define how three used grids look and 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 set to Platform. This means that on each platform FireMonkey checks whether a platform native grid implementation exists and tries to use this native implementation if existing.
  • The scroll box next to the Options button on the right top of the main form shows all events occurred in the grid controls. Click somewhere in a grid, all events occurred in the grid are printed in the scroll box.
  • The TStringGrid tab contains the StringGrid1 string grid that contains 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 that contains 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.

See Also

Retrieved from "https://docwiki.embarcadero.com/CodeExamples/Berlin/e/index.php?title=FMX.GridDemo_Sample&oldid=31420"