Inverse Loading property

Official Content
This documentation is valid for:
The True value, loads the grid data from bottom to top (in a common grid) and from right to left (in a Horizontal grid).

Values

False
True

Description

By setting this grid property to True (its default value is False), you are able to load the grid in reverse direction (i.e. the Common Grid will be loaded from bottom to top, and the Horizontal Grid will be loaded from right to left).

 

How to use

The canonical use case of inverse loading on a grid is that of a chat messaging system.
What are its characteristics? It is loaded from bottom to top, pagination is performed with a swipe-down gesture, and when the user refreshes it the first page will be displayed in the lower section. 

The following three simple steps allow the developer to define a simple chat user interface with GeneXus.

1) In order to create a simple chat user interface, drag a grid control from the toolbox to the abstract layout (with the appropriate attributes/variables for your business logic). 
2) Drag a string variable to the bottom section of the layout. The purpose of this variable is to allow the end user to type new text and send it. 
3) On the right side of the text field, insert a button to send the messages.

The most important action to achieve this design is to set the Inverse loading property at the grid level to True. Lastly, the final result looks as shown below:

Inverse Loading property - Chat - Final desing

The developer can customize the appearance of the controls (sizes, positions, and colors) and, finally, achieve a user interface similar to the one shown below:

Inverse Loading - Chat - Runtime

Notes

  • In the Smart Devices generator, the following table describes the conditions that the grid must satisfy in order to achieve the inverse loading effect.
      Android iOS

    Pull To Refresh property

    Disable

    Disable

    Search

    No

    No

    Break by

    No

    No

  • When there are not enough grid items to fill the screen, the starting position of the loaded items is different in Android and iOS, to match the most common usage on each platform:
    • In Android, the grid items are shown at the bottom of the screen with empty space above them (like HangoutsAlloMessenger or Telegram on Android);
    • In iOS, the grid items are shown at the top of the screen with empty space below them (like iMessageWhatsApp or Facebook Messenger on iOS).
  • The text field associated with a new message can grow when the keyboard appears if the Main table has been named with the "GxAutoMeasure" prefix.
    GxAutoMeasure - Chat use case

 

  • For web environments, for the Inverse Loading property to appear, it is necessary for the grid to have infinite scrolling.

Run-time/Design-time

This property applies only at design-time.

Availability

This property is available since Genexus 15 Upgrade 10.

Scope

Objects: Panel for Smart Devices, Web Panel, Work With for Smart Devices
Platforms: Web(.Net, Java), Smart Devices(Android, IOS)
Controls: Grid

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