Skip to content

AvatarStack


When assigning a rule to a property of AvatarStack, the rule will be passed an instance of the following proxy class as an argument:


AvatarStack Properties

Property Type Required Default
Avatar Avatar No
Avatars complex Yes
BadgeImage Image No
BindingCollection Bindable No
ImageHasBorder boolean No false
ImageIsCircular boolean No true
OverflowToGrid object No

Avatar

Dynamic binding of Avatar that contains image or image text to be displayed.


Avatars

Static binding of Avatar that contains image or image text to be displayed.

  • type: complex

Avatars Value

Any following options needs to be fulfilled.

Option 1

Array type:

All items must be of the type:

Option 2


BadgeImage

Image to be displayed at the bottom right corner of a single avatar in object cell. Double avatar will not render badge image.

Not supported on web.


BindingCollection

Definition of the BindingCollection to dynamically populate the collection. You can set this to binding/rule to return an array of data items.

Note: If this is set to binding/rule, you must return an array of data items.


ImageHasBorder

If the value is true, the image in stack displayed has an outer border.

Not supported on web.

  • type: boolean
  • default: false

ImageIsCircular

If the value is true, the image in grid is displayed in a circular shape. Otherwise, it will be a square.

  • type: boolean
  • default: true

OverflowToGrid

If more than 2 avatars are defined in AvatarStack, 3rd avatar onwards can be displayed in AvatarGrid if enabled.

  • type: object with following properties.
Property Type Required Default
Enabled boolean No
GridMax integer No 5
ImageIsCircular boolean No true

Enabled

If the value is true, the 3rd avatar onwards that are not displayed in AvatarStack, will be displayed in AvatarGrid.

But if AvatarGrid is also defined, avatars in AvatarGrid takes precedence over these leftover avatars in AvatarStack.

GridMax

Maximum number of avatars to be displayed in AvatarGrid including the extra avatar counter.

ImageIsCircular

If the value is true, the image in grid is displayed in a circular shape. Otherwise, it will be a square.