nativescript Gridlayout - define columns and rows using numbers

Question

I have unknown number of rows (i'm calculationg this by getting length of Http response ad dividing by two.) So if my array has 100 entries, the number of rows will be 50 as i'm using 2 columns grid layout. My question is simple: Is possible to bind this number somehow ? Or i have to convert this as 50 (*) stars? So instead of doing this :

rows= * ,* ,* ,* ,* ,* ,* etc... i would like to use binded value for example:

<GridLayout rows="{{ length+'*' }}" columns="*,*" class="calendar" />

But this will not work. Is there a way to do this smart? Thank you.

Answer 1

Yes, it's possible and here is working POC. But it could be a overkill for your app. Why don't you try RadListView with GridLayout instead, it could be the optimised solution for display bulk data.

Answer 2

You can use the GridLayout programmatically and use addRow(). Check out the article Demystifying NativeScript Layouts.

Note that you don't have to build the whole GridLayout programmatically. You can create the GridLayout, then grab a reference to it and call addRow() to add rows.

Answer 3

The rows and columns have to use strings. Not numbers. Angular syntax: [rows]="". JS syntax: rows={{}}

In .ts file define property:

rowsVar = '*, auto';

In .html file use:

<GridLayout [rows]="rowsVar"></GridLayout>

Or

In .ts file define property:

rowsVar = '100';

In .html file use:

<GridLayout [rows]="'*,auto,'+rowsVar"></GridLayout>