List - ItemsPerRow Property

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

  • No labels