Multiple Layouts per Row

Official Content

At present, mobile device applications that show repetitive data vary the way in which they show the data of an item in the collection. This is very common in news applications; for instance, when we want to highlight a news article to catch the user's attention or in other scenarios to achieve a non-uniform user interface.

This new feature called Multiple Layouts per Row significantly simplifies the implementation of this type of interfaces.

Purpose

To create various alternatives for the way in which elements are arranged in a Grid for Smart Devices.

How it works

For example, let’s consider the EventDay application, in which we have a grid to load all the sessions of an event that will be offered on a certain date. In addition, these sessions can be classified as Keynotes and ordinary sessions. Suppose that we want to change the layout of Keynote sessions to make them look more attractive than those sessions that are not Keynotes.

To do so, we create a new Layout over the SD Grid of the sessions:

  • Click on the upper right corner of the SD Grid.

  • On the menu that is displayed, click on “Add New Item Layout”.

Image_AddNewItemLayout

  • Enter a name for the new Layout; in this case, we will name it "Keynote".

  • Arrange the Layout as desired (Add/move/remove elements).

Image_KeynoteLayout

  • To assign a specific layout to a Grid row, the following code is entered in the Load event of the grid. In this example, the condition is that the session must be a Keynote:

Event Grid.Load

    If  SessionIsKeynote

        Grid1.ItemLayout = "Keynote"

    EndIf

EndEvent

 

  • Lastly, Run it by pressing F5 and watch the results:

 

Sesión Keynote   Sesión normal
Image_KeynoteSession   Image_NoKeynoteSession

Feature in action

Considerations

  • The attributes that determine the grid navigation is the set of attributes of all the Grid’s layouts.

  • If a non-existent Layout is specified at runtime, the Default Layout is displayed for that item.

See Also


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