HowTo: Using Horizontal Grid control for Smart Devices

Official Content

Horizontal Grid control is a cool way to visualize the elements of a list. It lets us show the elements horizontally, instead of the usual vertical way for a Grid. Also, it lets us control the way the elements are shown,  letting us choose the number of columns and rows we want to display by page.

For example 2 columns and 3 rows per page:

Android iOS
HorizontalGridEx1_png HorizontalGridEx2_png

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 database.

Property Transaction

2. In the List node 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).


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 or not the page controller will be displayed.

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.


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:

Android iOS
HorizontalGridEx1_png HorizontalGridEx2_png

and Landscape:

Android iOS
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.


Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.