Horizontal Grid control is a cool way to visualize the elements of a list. It lets us show the elements horizontaly, instead of the usual vertical way for a Grid. Also it lets us control the way the elements are shown, letting us choose the amount of columns and rows we want to display by page.
For example: 2 columns and 3 rows per page
You can follow the next few steps for implementing a simple example.
1. Create the following Transaction with the WWSD pattern applied and add some registers to the data base.
2. In the [20429] on the Grid properties set the Control Type property to "SD Horizontal Grid" value.
3. When we set the control type property to "SD Horizontal Grid" the next properties become available. Set the Columns and Rows per page (Portrait and Landscape).
Properties
The properties which can let you customize the behaviour 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 or not the page controller will be displayed. |
|
PageControllerBackColor |
Specifies the color of the page controller.
NOTE: On iOS if the color has transparency the PageController will appear over the content.
|
|
ColumnsPerPagePortrait |
Specifies the amount of columns that will be displayed in the portrait mode. |
|
RowsPerPagePortrait |
Specifies the amount of rows that will be displayed in the portrait mode. |
|
ColumnsPerPageLandscape |
Specifies the amount of columns that will be displayed in the landscape mode |
|
RowsPerPageLandscape |
Specifies the amount of rows that will be displayed in the landscape mode. |
We 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. Portrait:
and Ladscape:
Note: the last image shows a photo of the device taken when the device is on portrait, you may notice the changes on the amount of rows and columns shown.