Grids with Selection By Code for Smart Devices

Official Content
This documentation is valid for:

Grid selection is an important feature to achieve the best user experience.

In GeneXus, there are several alternatives for managing Grid selection.

The first alternative is provided automatically by setting multiple layouts for the Grid control. Another option consists in manipulating the selected items by using programming strategies adapted to the business logic of the application. This document focuses on the principles of this last alternative, for the automatic case please refer to Default Selected Item Layout property article. 

Selection by code

There are four features that help the developer to manipulate Grid item selection by code.

Usage example

We want to design a simple music playlist application.

The requirements are:

  • The user can tap on any item to play it; this action changes the selected item on the Grid.
  • When a song finishes, the next one should be played automatically and the selected item on the Grid must change accordingly.

In other words, our aim will be to keep in sync both the Grid and the media queue (facilities provided by the Audio external object).

First, we design how the music list will look on a Panel for Smart Devices. Basically, it will be a Grid control where each item is be a song (we display its title, subtitle and cover image). This Grid will have two layouts: one for displaying the song currently playing, and another one for the rest of the songs in the playlist. This first layout will be set as the Default Selected Item Layout property.

Selection by coding - Layouts Selection by coding - Grid settings

As we already know, the <default> value in Default Action property won't have any effect because the Grid control is embedded in a Panel for Smart Devices (different from WorkWithDevices object which will display the Detail node). Then, we can write code of the SelectionChange event without worrying about whether the Default Action will be triggered or not. In this scenario, we can get the selected index from the grid and use it with SetQueueCurrentIndex method of the Audio external object before start playing it or while it is playing another song.

Event Grid1.SelectionChanged
    Composite
        &Index = Grid1.SelectedIndex
        Audio.SetQueueCurrentIndex(&Index)
    EndComposite
EndEvent

With these settings, any song will start playing when the end user taps on it from the playlist. But, there is another scenario that we must satisfy: when a song has finished playing, the application should select on the Grid the next one from the playlist. In order to do that, before starting the next song, the developer may use the QueueItemFinished event from Audio external object facilities and select the appropriate index. For example, we can write the event in a very simple way as follows:

Event Audio.QueueItemFinished(&MediaItemFinishedInfo)
    Composite
        If &MediaItemFinishedInfo.Reason = MediaFinishReason.PlaybackCompleted
            &Index = &MediaItemFinishedInfo.QueuePosition
            Grid1.Select(&Index)
        EndIf
    EndComposite
EndEvent

Finally, we get the following result.

Selection by code - Final result

Note

  • For those grids which Control Type property is out of scope (such as SD Image Gallery, SD Leaves, etc.) the behavior of the described elements in this document are:
    • The Select/Deselect methods do not have any effect.
    • The SelectedIndex will return empty (value 0).
    • The SelectionChanged event will never be triggered.

Scope

Objects Panel for Smart Devices objectWork With for Smart Devices object 
Controls Grid control, Horizontal Grid control (iOS), SD Paged Grid control (iOS)
Platform  Smart Devices (iOS,Android)

Available

This set of funcionalities are available as of GeneXus 15 Upgrade 6 for iOS and GeneXus 15 Upgrade 7 for Android.