How to Nest List Views in NativeScript

I'm trying to display a list of items within a list of items. Basically it's a card game, where each suit is being repeated, and then each card for each suit is being repeated.

<StackLayout margin="10 0 60 0" padding="0 0">

    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"

        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"

        style="height:100%">

        <ng-template let-suit="item">

            <FlexboxLayout flexDirection="row">

                <ScrollView orientation="horizontal">

                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">

                            <ListView class="list-group" [items]="suit.cards">

                                <ng-template let-card="item">

                                    <Label [text]="card" class="card"></Label>

                                </ng-template>

                        </ListView>

                    </StackLayout>

                </ScrollView>

            </FlexboxLayout>

        </ng-template>

    </ListView>

</StackLayout>

And this is what my "hand" looks like:

hand: { suit: Suit, fontColor: Color, cards: string } = [

    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },

    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },

    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },

    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }

];

When I run it though, I'm only getting the very first card in each suit to be displayed.

You can check it out at the playground here:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(I'm new to both NaitiveScript and Angular, so I may be missing something simple)

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

Which platform you're testing it on? Android or iOS

– Saleh Mahmood
Jan 3 at 0:40

@SalehMahmood Android, but ideally, it shouldn't matter.

– Daryl
Jan 3 at 0:55

ERROR: ERROR ReferenceError: Can't find variable: MyDataSource?Looks like Playground sample is not complete.

– Narendra
Jan 3 at 1:31

@NarendraMongiya it doesn't error on my Nexus 6p (Android 8.1.0, Preview app 1.18.0, Runtime 5.1.0)

– Daryl
Jan 3 at 2:25

add a comment |

I'm trying to display a list of items within a list of items. Basically it's a card game, where each suit is being repeated, and then each card for each suit is being repeated.

<StackLayout margin="10 0 60 0" padding="0 0">

    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"

        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"

        style="height:100%">

        <ng-template let-suit="item">

            <FlexboxLayout flexDirection="row">

                <ScrollView orientation="horizontal">

                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">

                            <ListView class="list-group" [items]="suit.cards">

                                <ng-template let-card="item">

                                    <Label [text]="card" class="card"></Label>

                                </ng-template>

                        </ListView>

                    </StackLayout>

                </ScrollView>

            </FlexboxLayout>

        </ng-template>

    </ListView>

</StackLayout>

And this is what my "hand" looks like:

hand: { suit: Suit, fontColor: Color, cards: string } = [

    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },

    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },

    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },

    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }

];

When I run it though, I'm only getting the very first card in each suit to be displayed.

You can check it out at the playground here:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(I'm new to both NaitiveScript and Angular, so I may be missing something simple)

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

Which platform you're testing it on? Android or iOS

– Saleh Mahmood
Jan 3 at 0:40

@SalehMahmood Android, but ideally, it shouldn't matter.

– Daryl
Jan 3 at 0:55

ERROR: ERROR ReferenceError: Can't find variable: MyDataSource?Looks like Playground sample is not complete.

– Narendra
Jan 3 at 1:31

@NarendraMongiya it doesn't error on my Nexus 6p (Android 8.1.0, Preview app 1.18.0, Runtime 5.1.0)

– Daryl
Jan 3 at 2:25

add a comment |

I'm trying to display a list of items within a list of items. Basically it's a card game, where each suit is being repeated, and then each card for each suit is being repeated.

<StackLayout margin="10 0 60 0" padding="0 0">

    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"

        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"

        style="height:100%">

        <ng-template let-suit="item">

            <FlexboxLayout flexDirection="row">

                <ScrollView orientation="horizontal">

                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">

                            <ListView class="list-group" [items]="suit.cards">

                                <ng-template let-card="item">

                                    <Label [text]="card" class="card"></Label>

                                </ng-template>

                        </ListView>

                    </StackLayout>

                </ScrollView>

            </FlexboxLayout>

        </ng-template>

    </ListView>

</StackLayout>

And this is what my "hand" looks like:

hand: { suit: Suit, fontColor: Color, cards: string } = [

    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },

    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },

    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },

    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }

];

When I run it though, I'm only getting the very first card in each suit to be displayed.

You can check it out at the playground here:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(I'm new to both NaitiveScript and Angular, so I may be missing something simple)

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

I'm trying to display a list of items within a list of items. Basically it's a card game, where each suit is being repeated, and then each card for each suit is being repeated.

<StackLayout margin="10 0 60 0" padding="0 0">

    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"

        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"

        style="height:100%">

        <ng-template let-suit="item">

            <FlexboxLayout flexDirection="row">

                <ScrollView orientation="horizontal">

                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">

                            <ListView class="list-group" [items]="suit.cards">

                                <ng-template let-card="item">

                                    <Label [text]="card" class="card"></Label>

                                </ng-template>

                        </ListView>

                    </StackLayout>

                </ScrollView>

            </FlexboxLayout>

        </ng-template>

    </ListView>

</StackLayout>

And this is what my "hand" looks like:

hand: { suit: Suit, fontColor: Color, cards: string } = [

    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },

    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },

    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },

    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }

];

When I run it though, I'm only getting the very first card in each suit to be displayed.

You can check it out at the playground here:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(I'm new to both NaitiveScript and Angular, so I may be missing something simple)

nativescript nativescript-angular

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

edited Jan 3 at 0:23

asked Jan 2 at 23:15

Daryl

14.5k455113

asked Jan 2 at 23:15

Daryl

14.5k455113

asked Jan 2 at 23:15

Daryl

14.5k455113

Which platform you're testing it on? Android or iOS

– Saleh Mahmood
Jan 3 at 0:40

@SalehMahmood Android, but ideally, it shouldn't matter.

– Daryl
Jan 3 at 0:55

ERROR: ERROR ReferenceError: Can't find variable: MyDataSource?Looks like Playground sample is not complete.

– Narendra
Jan 3 at 1:31

@NarendraMongiya it doesn't error on my Nexus 6p (Android 8.1.0, Preview app 1.18.0, Runtime 5.1.0)

– Daryl
Jan 3 at 2:25

add a comment |

Which platform you're testing it on? Android or iOS

– Saleh Mahmood
Jan 3 at 0:40

@SalehMahmood Android, but ideally, it shouldn't matter.

– Daryl
Jan 3 at 0:55

ERROR: ERROR ReferenceError: Can't find variable: MyDataSource?Looks like Playground sample is not complete.

– Narendra
Jan 3 at 1:31

@NarendraMongiya it doesn't error on my Nexus 6p (Android 8.1.0, Preview app 1.18.0, Runtime 5.1.0)

– Daryl
Jan 3 at 2:25

Which platform you're testing it on? Android or iOS

– Saleh Mahmood
Jan 3 at 0:40

@SalehMahmood Android, but ideally, it shouldn't matter.

– Daryl
Jan 3 at 0:55

ERROR: ERROR ReferenceError: Can't find variable: MyDataSource?Looks like Playground sample is not complete.

– Narendra
Jan 3 at 1:31

@NarendraMongiya it doesn't error on my Nexus 6p (Android 8.1.0, Preview app 1.18.0, Runtime 5.1.0)

– Daryl
Jan 3 at 2:25

add a comment |

2 Answers
2

active

oldest

votes

EDIT: It is not advisable to use nested listview as this would break
the recycling and virtualization for cells that are containing a
nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

|
show 1 more comment

As @Narendra mentioned it's not recommended to use nested list views or ngFor inside template.

I guess nativescript-accordion plugin will suit your needs, it basically supports the data structure you are looking for - List Item -> List of Items (Suit -> Cards). If you like to show the items expanded upon loading, all you have to do is, populate the selectedIndexes with all indexes. There is one issue with latest version of the plugin, which can be still handled with a simple math.

Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.

answered Jan 3 at 5:43

Manoj

7,59621024

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014416%2fhow-to-nest-list-views-in-nativescript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

EDIT: It is not advisable to use nested listview as this would break
the recycling and virtualization for cells that are containing a
nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

|
show 1 more comment

EDIT: It is not advisable to use nested listview as this would break
the recycling and virtualization for cells that are containing a
nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

|
show 1 more comment

EDIT: It is not advisable to use nested listview as this would break
the recycling and virtualization for cells that are containing a
nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

EDIT: It is not advisable to use nested listview as this would break
the recycling and virtualization for cells that are containing a
nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

edited Jan 3 at 3:07

answered Jan 3 at 2:40

Narendra

1,9651822

answered Jan 3 at 2:40

Narendra

1,9651822

answered Jan 3 at 2:40

Narendra

1,9651822

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

|
show 1 more comment

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

I'm going to have more cards than will fit in the screen, so I want to be able to scroll each suit horizontal as well. Does that still work if I remove the scroll view?

– Daryl
Jan 3 at 2:44

Yes, Scroll is working as listview has it's own scroll.

– Narendra
Jan 3 at 2:45

And if you want horizontal scroll as well, you can use Layout for child listview. docs.telerik.com/devtools/nativescript-ui/Controls/Angular/…

– Narendra
Jan 3 at 2:46

Hmm... That didn't work for me. Nothing apparently has changed.

– Daryl
Jan 3 at 2:54

It's workinng for me for ios but is it is not recommended due to performance reason. github.com/NativeScript/NativeScript/issues/92

– Narendra
Jan 3 at 3:01

|
show 1 more comment

As @Narendra mentioned it's not recommended to use nested list views or ngFor inside template.

Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.

answered Jan 3 at 5:43

Manoj

7,59621024

add a comment |

As @Narendra mentioned it's not recommended to use nested list views or ngFor inside template.

Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.

answered Jan 3 at 5:43

Manoj

7,59621024

add a comment |

As @Narendra mentioned it's not recommended to use nested list views or ngFor inside template.

Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.

answered Jan 3 at 5:43

Manoj

7,59621024

As @Narendra mentioned it's not recommended to use nested list views or ngFor inside template.

Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.

answered Jan 3 at 5:43

Manoj

7,59621024

answered Jan 3 at 5:43

Manoj

7,59621024

answered Jan 3 at 5:43

Manoj

7,59621024

answered Jan 3 at 5:43

Manoj

7,59621024

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu