GridLayout set columns width and rows height dynamically


#1

does anyone know how to set column width and rows height in the grid layout dynamically.
I have a grid layout that I need to modify the columns and rows width/height in the JS file after the items were rendered.

Is this possible?


#2

Once set, the width and height of a grid row/col is immutable.
You’ll have to remove that row and add a new one to change it, like in the playground sample below

I wouldn’t recommend this approach.

Instead, you can let the child decide its width, and change it later in code. Like in the playground sample below

Cheers! Happy NativeScripting


#3

The item that I need to change is inside the repeater

                    <Repeater id="mainRepeater">
                        <Repeater.itemsLayout>
                            <WrapLayout orientation="horizontal" horizontalAlignment="center"/>
                        </Repeater.itemsLayout>
                        <Repeater.itemTemplate>
                            <GridLayout id="grid" rows="auto,30" columns="auto">                                      
                                        <Image id="img" row="0" src="{{ ImageFileName }}"   />    
                                        <Label id="lbl" row="1" text="{{ Title || 'Uknown' }}" textWrap="false" style="color: #000; padding:5;" />            
                                </GridLayout>            

                        </Repeater.itemTemplate>
                    </Repeater>            



     mainRepeater.itemTemplate().getViewById("img").width = "100";
     mainRepeater.itemTemplate().getViewById("img").height = "100";

setting the img width and height doesn’t seem to affect the items


#4

Hi @mspusta
It is not advised to have multiple items with the same id. When you set a static id to the items in an itemTemplate, you will end up with multiple UI elements with the same ID.
Why don’t you instead set a static width and height to the image element in the item template?


#5

Thank you for your reply.
I agree and understand that having multiple items with the same id is not advised. I converted the id’s into classes and installed nativescript-dom (https://www.npmjs.com/package/nativescript-dom) so I could target the elements by classname.

    page.runAgainstClasses('img', function(elem) {  
        elem.width = maxwidth;
        elem.height = maxwidth;            
    });

This solution works; however, there must be an easier way to accomplish setting the max width of my grid column.

What I am trying to do is to have 2 col (each columns containing image and a label). Each column should be 50% of the screen with the max-width of 200px

Here is what I am doing now

and then in JS I calculate the max allowed width

    var platform = require("tns-core-modules/platform");
    var maxwidth = platform.screen.mainScreen.widthDIPs / 200;
    if (maxwidth < 2){
        maxwidth = (platform.screen.mainScreen.widthDIPs / 2) - 10;                    
    }else{
        maxwidth = "200";            
    }

page.runAgainstClasses(‘img’, function(elem) {
elem.width = maxwidth;
elem.height = maxwidth;
});

    page.runAgainstClasses('lbl', function(elem) {  
        elem.width = maxwidth;          
    });

Is there an easier way to do this? I am afraid that the performance will be poor because page.runAgainstClasses will loop through every element

Any ideas or suggestions on how to approach this issue?