HowTo: Use Horizontal Grid control

Official Content
This documentation is valid for:

The Horizontal Grid control offers a cool way to visualize the elements of a list. It lets you show the elements horizontally, instead of the usual vertical way of a Grid. In addition, it allows you to control the way the elements are displayed, letting you choose the number of columns and rows you want to show by page.

For example 2 columns and 3 rows per page:

Android Apple
HorizontalGridEx1_png HorizontalGridEx2_png

You can follow the next few steps for implementing a simple example.

Step 1

Create the following Transaction object with the Work With Pattern applied, and add some registers to the database.

Property Transaction

Step 2

In the List node on the Grid properties, set the Control Type property to "Horizontal Grid" value.


Step 3

When you set the control type property to "Horizontal Grid" the following properties become available. Set the Columns and Rows per page (Portrait and Landscape).


The properties which can let you customize the behavior and looks of the Horizontal Grid are:

Paged Indicates whether the view will display items page-by-page, with each page containing at most ColumnsPerPage*RowsPerPage items.
ShowPageController Specifies whether the page controller will be displayed or not.

Specifies the color of the page controller.
This property has been deprecated. Use SDPageController theme-class for Smart Devices instead.

ColumnsPerPagePortrait Specifies the number of columns that will be displayed in the portrait mode.
RowsPerPagePortrait Specifies the number of rows that will be displayed in the portrait mode.
ColumnsPerPageLandscape Specifies the number of columns that will be displayed in the landscape mode
RowsPerPageLandscape Specifies the number of rows that will be displayed in the landscape mode.

You can see the result on the next two images, depending on the orientation of your device and the properties settings how many rows and columns will be shown per page.


Android Apple
HorizontalGridEx1_png HorizontalGridEx2_png

and Landscape:

Android Apple
HorizontalGridEx4_png HorizontalGridEx3_png


Note: the last image shows a photo of the device taken when the device is in portrait mode, you may notice the changes in the number of rows and columns shown.