Recents

HowTo: Using Horizontal Grid control for Smart DevicesOfficial Content

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

SD Horizontal Grid - example

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.

Property Transaction

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

HorizontalGridPropertyControlType

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:

SD Horizontal Grid - example iOS Portrait

and Ladscape:

SD Horizontal Grid - example iOS Landscape

 

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.




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