[GridLayout] Create a GridLayout in TypeScript


#1

Hi guys, I am trying to create this simple GridLayout using TypeScript, my issue is when I try to create the GridLayout (container) and set the columns="*, auto".

This is how it should be looking HTML:

<GridLayout columns="*, auto">
    <Label col="0" text="column 1"></Label>
    <Label col="1" text="column 2"</Label>
</GridLayout>

This is what I am trying to do in TypeScript:

let layout1 = new GridLayout();
layout1.addColumn(new ItemSpec(0,GridUnitType.STAR));
layout1.addColumn(new ItemSpec(1, GridUnitType.AUTO));

//Adding Label1
let label1 = new Label();
label1.col = 0;
label1.text = "column 1";
layout1.addChild(label1);

//Adding Label2
let label2 = new Label();
label2.col = 1;
label2.text = "column 2";
layout1.addChild(label2);

Any suggestions, please?
Thanks!


#2

Please refer this docs for right syntaxes,

https://docs.nativescript.org/ui/ns-ui-widgets/layouts#grid-layout


#3

This code worked for me…

let gridLayout = new GridLayout();

let label1 = new Label();
label1.text = "column 1";
layout1.addChild(label1);

let label2 = new Label();
label2.text = "column 2";
layout1.addChild(label2);

GridLayout.setColumn(label1, 0);
GridLayout.setColumn(label2, 1);

let firstColumn = new ItemSpec(1, GridUnitType.STAR);
let secondColumn = new ItemSpec(1, GridUnitType.AUTO);

layout1.addColumn(firstColumn);
layout1.addColumn(secondColumn);

I hope it helps someone :slight_smile: