0

Need grid to be something like this:

card1 card2
card3 card4
...

And to be dynamic

Here is my try:

component:

export class MenusComponent implements OnInit {
  public menus: any;
  constructor() { 
    this.menus = [
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Jelovnik'
      },
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Pica'
      },
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Dorucak'
      }
    ]
  }

Here is my try:

<GridLayout columns="*,*" rows="*">
<ListView class="list-group" [items]="menus">
    <ng-template let-menu="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [col]="even ? 0 : 1">
            <Label [text]="menu.title"></Label>
            <Image height="108" width="100%" [src]="menu.image"></Image>
        </StackLayout>
    </ng-template>
</ListView>

I need to be able to add mre things inside list view so I assume there should be anoter grid as well. What is the right way to do this? Cards need to be equal and to take whole screen.

Vladimir Djukic
  • 925
  • 2
  • 9
  • 28
  • Use RadListView with [GridLayout](https://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/item-layouts#using-listviewgridlayout). To fill the screen, divide the [screen height](https://docs.nativescript.org/api-reference/interfaces/_platform_.screenmetrics#heightdips) by number of items and set it as height to your template root. – Manoj Jan 28 '19 at 18:36
  • I don't need items to take whole hight just width. Why my code above not working? It takes only one col but I think it should be next to each other because it will display 0 or 1 for col – Vladimir Djukic Jan 28 '19 at 18:47
  • The same logic applies for width, divide the screen width by number of columns and set it as width to root view of item template. Your code won't work because, consider ListView as a ScrollView + StackLayout but with ability to reuse cells for better performance. Your template inside are aligned in a Stack, it won't honor it's super parent which is Grid. We use RadListView with item layout set to Grid to solve this. Refer the link above and you have all the exampels you need. – Manoj Jan 28 '19 at 18:51

1 Answers1

0

Using ListViewStaggeredLayout works for me here is the ref: https://docs.nativescript.org/angular/ui/ng-components/ng-radlistview/item-layouts

Juliano Vargas
  • 284
  • 2
  • 19