Nativescript GridLayout set row height in typescript

Issue

Is there a way to change/set the height of a GridLayout row after it has already been drawn?

For example, I have a GridLayout setup like this:

<GridLayout class="template_body" rows="40,*,60">
<StackLayout row="0" [visibility]="isTablet ? 'visible' : 'collapsed'">
    <Label text="Drag statements to the proper category."></Label>
    <FlexboxLayout flexDirection="row" row="1" [visibility]="isSubmitted ? 'visible' : 'collapsed'">
            <AbsoluteLayout height="10" width="10" class="correct-legend"></AbsoluteLayout><Label class="legend-label" text="Correct"></Label>
            <AbsoluteLayout height="10" width="10" class="incorrect-legend"></AbsoluteLayout><Label class="legend-label" text="Incorrect"></Label>
        </FlexboxLayout>
</StackLayout>

I want to change the height of the first row based on a condition. to rows=”100,*,60″

I’ve tried getting the rows by using getRows() on the gridlayout, but seem to not be able to do anything with what is returned. It appears it is returning an Observable rather than an array of rows as the api says it should return.

Solution

If you want more control than rows=”auto, *,auto” will give, you can give the gridlayout an id such as id=”someId” and then try in js/ts…

page.getViewById("someId").rows="100, *,60"; 
page.getViewById("someId").requestLayout();

Answered By – Tim

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.