GridLayout ngfor row column










0















I'm new with Nativescript and I've a problem with ngFor. I've this GridLayout with inside a StackLayout with ngFor, the question how to set dynamic col and row inside the StackLayout?
Thans.



<GridLayout columns="*,*,*" rows=" totalRows " class="grid-book">
<StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
<StackLayout height="150" class="book">
<AbsoluteLayout height="150">
<StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
<Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
</AbsoluteLayout>
</StackLayout>
<Label text=" plan.name "></Label>
</StackLayout>
</GridLayout>









share|improve this question


























    0















    I'm new with Nativescript and I've a problem with ngFor. I've this GridLayout with inside a StackLayout with ngFor, the question how to set dynamic col and row inside the StackLayout?
    Thans.



    <GridLayout columns="*,*,*" rows=" totalRows " class="grid-book">
    <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
    <StackLayout height="150" class="book">
    <AbsoluteLayout height="150">
    <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
    <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
    </AbsoluteLayout>
    </StackLayout>
    <Label text=" plan.name "></Label>
    </StackLayout>
    </GridLayout>









    share|improve this question
























      0












      0








      0








      I'm new with Nativescript and I've a problem with ngFor. I've this GridLayout with inside a StackLayout with ngFor, the question how to set dynamic col and row inside the StackLayout?
      Thans.



      <GridLayout columns="*,*,*" rows=" totalRows " class="grid-book">
      <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
      <StackLayout height="150" class="book">
      <AbsoluteLayout height="150">
      <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
      <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
      </AbsoluteLayout>
      </StackLayout>
      <Label text=" plan.name "></Label>
      </StackLayout>
      </GridLayout>









      share|improve this question














      I'm new with Nativescript and I've a problem with ngFor. I've this GridLayout with inside a StackLayout with ngFor, the question how to set dynamic col and row inside the StackLayout?
      Thans.



      <GridLayout columns="*,*,*" rows=" totalRows " class="grid-book">
      <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
      <StackLayout height="150" class="book">
      <AbsoluteLayout height="150">
      <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
      <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
      </AbsoluteLayout>
      </StackLayout>
      <Label text=" plan.name "></Label>
      </StackLayout>
      </GridLayout>






      angularjs nativescript






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 13 '18 at 23:05









      Stefano ToppiStefano Toppi

      1417




      1417






















          3 Answers
          3






          active

          oldest

          votes


















          0














          You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.



          Something like this:






          <StackLayout *ngFor="let plan of plans">
          <GridLayout rows="*" columns="* * *">
          <Label text="A" col="0"></Label>
          <Label text="B" col="1"></Label>
          <Label text="C" col="2"></Label>
          </GridLayout>
          </StackLayout>





          Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.






          share|improve this answer























          • An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

            – msenne
            Nov 13 '18 at 23:39



















          0














          You can use index as you are assiging it to i in this case.
          I have tested below case in my html.



          <GridLayout columns="*,*,*" class="grid-book">
          <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
          <StackLayout height="150" class="book">
          <AbsoluteLayout height="150">
          <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
          <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
          </AbsoluteLayout>
          </StackLayout>
          <Label text=" plan.name "></Label>
          </StackLayout>
          </GridLayout>


          and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];



          and if you see output using debugger
          enter image description here






          share|improve this answer























          • Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

            – Stefano Toppi
            Nov 14 '18 at 6:57











          • row="i" is dynamic and it can be N number of rows.

            – Narendra Mongiya
            Nov 14 '18 at 7:04


















          0














          You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).



          In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.






          share|improve this answer






















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290825%2fgridlayout-ngfor-row-column%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.



            Something like this:






            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>





            Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.






            share|improve this answer























            • An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

              – msenne
              Nov 13 '18 at 23:39
















            0














            You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.



            Something like this:






            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>





            Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.






            share|improve this answer























            • An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

              – msenne
              Nov 13 '18 at 23:39














            0












            0








            0







            You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.



            Something like this:






            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>





            Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.






            share|improve this answer













            You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.



            Something like this:






            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>





            Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.






            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>





            <StackLayout *ngFor="let plan of plans">
            <GridLayout rows="*" columns="* * *">
            <Label text="A" col="0"></Label>
            <Label text="B" col="1"></Label>
            <Label text="C" col="2"></Label>
            </GridLayout>
            </StackLayout>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 13 '18 at 23:37









            msennemsenne

            1662




            1662












            • An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

              – msenne
              Nov 13 '18 at 23:39


















            • An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

              – msenne
              Nov 13 '18 at 23:39

















            An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

            – msenne
            Nov 13 '18 at 23:39






            An alternative form for this: ` <StackLayout> <ng-template ngFor let-plan [ngForOf]="plans"> <GridLayout rows="" columns=" * *"> `

            – msenne
            Nov 13 '18 at 23:39














            0














            You can use index as you are assiging it to i in this case.
            I have tested below case in my html.



            <GridLayout columns="*,*,*" class="grid-book">
            <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
            <StackLayout height="150" class="book">
            <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
            </AbsoluteLayout>
            </StackLayout>
            <Label text=" plan.name "></Label>
            </StackLayout>
            </GridLayout>


            and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];



            and if you see output using debugger
            enter image description here






            share|improve this answer























            • Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

              – Stefano Toppi
              Nov 14 '18 at 6:57











            • row="i" is dynamic and it can be N number of rows.

              – Narendra Mongiya
              Nov 14 '18 at 7:04















            0














            You can use index as you are assiging it to i in this case.
            I have tested below case in my html.



            <GridLayout columns="*,*,*" class="grid-book">
            <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
            <StackLayout height="150" class="book">
            <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
            </AbsoluteLayout>
            </StackLayout>
            <Label text=" plan.name "></Label>
            </StackLayout>
            </GridLayout>


            and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];



            and if you see output using debugger
            enter image description here






            share|improve this answer























            • Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

              – Stefano Toppi
              Nov 14 '18 at 6:57











            • row="i" is dynamic and it can be N number of rows.

              – Narendra Mongiya
              Nov 14 '18 at 7:04













            0












            0








            0







            You can use index as you are assiging it to i in this case.
            I have tested below case in my html.



            <GridLayout columns="*,*,*" class="grid-book">
            <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
            <StackLayout height="150" class="book">
            <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
            </AbsoluteLayout>
            </StackLayout>
            <Label text=" plan.name "></Label>
            </StackLayout>
            </GridLayout>


            and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];



            and if you see output using debugger
            enter image description here






            share|improve this answer













            You can use index as you are assiging it to i in this case.
            I have tested below case in my html.



            <GridLayout columns="*,*,*" class="grid-book">
            <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
            <StackLayout height="150" class="book">
            <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
            </AbsoluteLayout>
            </StackLayout>
            <Label text=" plan.name "></Label>
            </StackLayout>
            </GridLayout>


            and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];



            and if you see output using debugger
            enter image description here







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 14 '18 at 4:44









            Narendra MongiyaNarendra Mongiya

            1,5651719




            1,5651719












            • Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

              – Stefano Toppi
              Nov 14 '18 at 6:57











            • row="i" is dynamic and it can be N number of rows.

              – Narendra Mongiya
              Nov 14 '18 at 7:04

















            • Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

              – Stefano Toppi
              Nov 14 '18 at 6:57











            • row="i" is dynamic and it can be N number of rows.

              – Narendra Mongiya
              Nov 14 '18 at 7:04
















            Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

            – Stefano Toppi
            Nov 14 '18 at 6:57





            Hi, thanks for answer, but I’ve a big json not only 3 elementare, for example I ve 25 objects and are divided into a grid of 3 columns a N rows. Thanks

            – Stefano Toppi
            Nov 14 '18 at 6:57













            row="i" is dynamic and it can be N number of rows.

            – Narendra Mongiya
            Nov 14 '18 at 7:04





            row="i" is dynamic and it can be N number of rows.

            – Narendra Mongiya
            Nov 14 '18 at 7:04











            0














            You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).



            In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.






            share|improve this answer



























              0














              You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).



              In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.






              share|improve this answer

























                0












                0








                0







                You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).



                In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.






                share|improve this answer













                You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).



                In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 14 '18 at 7:28









                ManojManoj

                6,3462922




                6,3462922



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290825%2fgridlayout-ngfor-row-column%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Darth Vader #20

                    How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                    Ondo