Virtual Scroll Container

• Show a list of data
• When the users scrolls down far enough, another page of data is loaded
• Keep scroll position when refreshing data
• Loaded and total record count are available as readonly attributes to show the record count anywhere on the page
• Configurable sort options, prevents placing the same widget on the page multiple times just to have a different sort sequence

• Widget uses height as 100%, meaning the parent must have an actual height
• Do not place in Layout Grid or Dataview as these do not have an actual height

• Place widget on a blank page, no LayoutGrid or Dataview
• You can place a container above and below the widget to create a header and/or footer
• Place content inside the content drop zone
• Set a page size, it should be large enough to show more items than fit in the browser viewport. 50 is usually a good starting point, depending on your row height and reference display size
• Configure the other properties

Connect the loaded record count and total record count attributes to page variables rather than context entity attributes. This is because the widget will update these attributes when loading data, and if they are connected to context entity attributes, this will cause the datasource to reload, which will cause the widget to reload, which will cause an infinite loop. By connecting them to page variables, you can use these variables to show the record count anywhere on the page without causing reloads. If the total record count is configured, the widget will request the total record count from the datasource. This can cause performance issues for complex queries, so if you do not need the total record count, it is best to leave it unconfigured.

By default Mendix will reload the datasource, this really happens a lot. It can also cause flickering. When you want to reload or refresh the data in the widget, set the data change date attribute to [%CurrentDateTime%]

The widget will take the action specified here when the data change date attribute receives a new value

Possible values:

• Reload: reload and reset to first page
• Refresh: reload the data loaded earlier, keeping scroll position

Commit changes to the row data without refresh in client because that would trigger another reload of the datasource.

(The widget does not clear or reset the widget action as that would trigger another reload of the datasource.)

The auto load offset is the distance to the bottom of the scroll container to trigger loading the next page. The value is in pixels, so for example 200 means that when the user scrolls to 200 pixels from the bottom of the scroll container, the widget will load the next page.

It must be a positive value, and it should be smaller than the height of the scroll container. A good starting point is around 200 pixels, but you can adjust it based on your row height and reference display size.

The configurable sort options allow the developer to change the sort order of the datasource at runtime. This prevents putting the widget on the page multiple times just to provide different sort options to the user.

If you need only one sort sequence, set that sort sequence on the datasource directly. No need to configure the sort in the widget.

Each sort configuration allows multiple attributes. The pluggable widget configuration UI does not support a list containing another list so the sort attributes are a flat list of sort attributes, grouped by a number, the sort group number.

To create multiple sort configurations, add entries for each sort, for example:

Use the Active sort expression to set the default sort configuration, for example 1 to use the first sort configuration. The widget will then apply the sort order of Name ascending and Date descending.

Create an enumeration with all sort options and use that enumeration with a combobox to create a dropdown where the user can select the sort order. In the on change event of the combobox, set the widget action to Reload and set the data change date to [%CurrentDateTime%] to trigger the widget to reload with the new sort order.