This control extends the RowRepeater control and allows you to change data representation by switching between different views. Data can be displayed not only as rows but also as tiles that are adjusted to fill the entire horizontal space.
You can substitute the original repeater rendering with any external control defined in the externalRepresentation
association by setting the external property to true.
This control provides the Search field that fires the search event when a user chooses Search. Note that no actual search occurs. An application developer can decide how to handle the event and what model manipulation to perform.
To set up the responsive layout, perform the following configuration steps:
responsive property to true for the current view in ViewRepeater
or for a particular view in RepeaterViewConfiguration.
ViewRepeater either in absolute values (for example, pixels or em) or in
percent using the height property.
Note that if you define the height of the ViewRepeater in percent, the height of the parent DOM
element must be greater than zero.
By default, the height property of ViewRepeater is set to 100%.
ViewRepeator tiles in pixels using the itemHeight property
for the current view in ViewRepeater or for a particular view in
RepeaterViewConfiguration.
ViewRepeator tiles in pixels using the itemMinWidth property
for the current view in ViewRepeater or for a particular view in
RepeaterViewConfiguration.
Note that if the showMoreSteps property value is greater than zero and the responsive
property is set to true, content is displayed in tiles but the number of tiles does not change when the
ViewRepeater is resized.
Use arrow keys to navigate through the options within the viewing, filtering, and sorting lists.
All examples below use the same data model. To make example code shorter and more readable the model code is externalized into this section.
If you do not need to provide an ability to switch between views you can set view parameters directly in the ViewRepeater and hide the view selector.
You can define different views for the ViewRepeater by adding the RepeaterViewConfiguration items
to the views aggregation.
RepeaterViewConfiguration defines how to render the control.
You can specify all or several properties for the view. If needed, you can provide a new template for rows and
tiles.
If a property is not provided for the view, ViewRepeater uses a value defined in the previous view.
This example shows four views. The first two views have their own templates (small tiles and large tiles).
The last two views do not have their own templates and use a template defined before.
responsive
property to false.
This makes a renderer ignore the itemMinWidth property and draw the tile
so that it fills the entire row (as it is rendered in the original RowRepeater).
Each view can be represented in the view selector as a title, an icon or both.
If neither an icon nor a title is provided, the default name "View #" appears.
In this example, the first view has neither a name nor an icon. The view is represented by a default name.
The second view is represented by an icon. The third and fourth views are set to display both an icon and a title.
You can turn off rendering of the ViewRepeater and place another control instead.
To do this, set the external property to true and define the replacement control
using the externalRepresentation aggregation. You can use a table, a chart, or any other control you
need.
If the external control does not have a model, the ViewRepeater shares its own model
by calling the setModel() method in the external control.
The example below displays the combined approach with two standard views and one view using the table. The sorters and filters are hidden in this example.
ViewRepeater
API documentation
RepeaterViewConfiguration
API documentation