Nesting?

[kryptus36]

I'd like to have the top portion of my app swipeable to change the page and another inner pager for some contextual data. However, when I swipe the inner pager, it affects the outer one instead.

Is this use case supported?

[triniwiz]

Ah nice use case which platform(s)

[kryptus36]

I'm currently testing on an Android emulator. I'd like to support ios as well, but I'm currently developing on a Linux machine.

tns version is 6.0.0-2019-07-15-150533-13643

[triniwiz]

Can you try something for me in the loaded event callargs.object.android.setNestedScrollingEnabled(true) and LMK what happens 😄

[kryptus36]

It didn't seem to have any affect. I'm assuming you meant the loaded event for the page.

[triniwiz]

No for the pager

[kryptus36]

Still seems to have no effect (I tried it on both inner and outer). Am I doing something wrong?

[triniwiz]

Can you paste some of the view code

[triniwiz]

Btw I meant something like

<Pager (loaded)="loaded($event)">
....
<GridLayout rows="*,*>
<Pager>
......
<Pager row="1">
....</GridLayout>

loaded(args){
args.object.android.setNestedScrollingEnabled(true);
}

[kryptus36]

As I was writing this I noticed in my UI the inner pager actually does give me the white "you can't drag any further" markers if I drag vertically. Interesting. It doesn't actually show me anything other than the first one though (and I did manually verify there's more than one element in the array).

Here's the outer:

<StackLayout xmlns:pager="nativescript-pager" xmlns:components="components">
  <pager:Pager height="100%" width="100%" selectedIndex="1"
  items="{{clientVenues}}" id="venue-pager" loaded='pagerLoaded'
  showNativePageIndicator="false" backgroundColor="lightsteelblue">
    <pager:Pager.itemTemplate>
      <StackLayout>
        <Label text="{{name}}" class="venue-name" />
        <StackLayout class="hr-light m-t-5 m-b-5" colSpan="2"></StackLayout>
        <Label text="{{pots.date | humanDate}}" class='date' />
          <components:pot-pager />
      </StackLayout>
    </pager:Pager.itemTemplate>
  </pager:Pager>
</StackLayout>

And inner:

<StackLayout xmlns:pager="nativescript-pager" xmlns:lv="nativescript-ui-listview" >
  <pager:Pager height="100%" width="100%" loaded='pagerLoaded'
  items="{{pots.events}}" id="pot-pager"
  showNativePageIndicator="false" backgroundColor="green">
    <pager:Pager.itemTemplate>
      <StackLayout>
        <Label text="{{name}}" class="event-name" />
        <lv:RadListView row="0" items="{{ pots }}"> 
            <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout />
            </lv:RadListView.listViewLayout>
            <lv:RadListView.itemTemplate>
                <StackLayout>
                    <GridLayout rows="*" columns="*,100,100">
                      <Label col="0" text="{{name}}" />
                      <Label col="1" text="{{numbers ? numbers + '#s' : null}}" />
                      <Label col="2" text="{{prize | formatPrize}}" />
                    </GridLayout>
                </StackLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
      </StackLayout>
    </pager:Pager.itemTemplate>
  </pager:Pager>
</StackLayout>

exports.pagerLoaded = function(args) {
  console.log("Pager loaded", args);
  args.object.android.setNestedScrollingEnabled(true);
}

[kryptus36]

Is there any obvious reason why my inner pager won't page to the next element (and why its trying to page vertically)?

[triniwiz]

I can try adding this feature to the demo an I'll know from there