Number of Items to be presented in a row

Member of List (PRIM_MD.List)

Data Type - Integer

Details

ItemsPerRow property allows for multiple list items per row of a list

Example

In this example the items per row will change as the width of the browser changes using Device Changed event

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Layoutmanager(#LayoutPageLayout)

    Define_Com Class(#PRIM_TBLO) Name(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageRow1) Displayposition(1) Parent(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutPageColumn1) Displayposition(1) Parent(#LayoutPageLayout)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageLayoutItem1) Column(#LayoutPageColumn1) Manage(#List) Parent(#LayoutPageLayout) Row(#LayoutPageRow1)

    Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListIcon) Marginleft(20) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListPrimaryText) Marginleft(100) Marginright(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem3) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListSecondaryText) Marginleft(100) Marginright(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
    Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem4) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListTertiaryText) Marginleft(100) Marginright(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

    Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(0) Parent(#COM_OWNER) Rowheight(100) Tabposition(1) Themedrawstyle('Card') Top(0) Height(800) Width(1200)
    Define_Com Class(#PRIM_MD.ListIcon) Name(#ListIcon) Displayposition(1) Height(60) Icon('person') Iconimagesizing(Cropped) Left(20) Parent(#List) Tabposition(1) Themedrawstyle('MediumTitle+Rounded') Top(20) Width(60)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Name') Displayposition(3) Height(20) Left(100) Parent(#List) Tabposition(3) Top(21) Width(1066)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListSecondaryText) Caption('Secondary Text') Displayposition(4) Height(20) Left(100) Parent(#List) Tabposition(4) Top(41) Width(1066)
    Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText) Caption('Tertiary Text') Displayposition(5) Height(18) Left(100) Parent(#List) Tabposition(5) Themedrawstyle('Subheading+ForegroundSecondary') Top(61) Width(1066)

        Evtroutine Handling(#COM_OWNER.Initialize)

            Inz_List Named(#List) Num_Entrys(25)

        Endroutine
    
        Evtroutine Handling(#sys_web.DeviceChanged)

            Case (#sys_web.Device)

            When (= Desktop)

    `           #List.ItemsPerRow := 3

            When (= Tablet)

                #List.ItemsPerRow := 2

            When (= Mobile)

                #List.ItemsPerRow := 1

            Endcase

        Endroutine

End_Com

See also

All Component Classes

Technical Reference

V14SP2 April 2018