4

I am developing an app where when user click on cardview layout, detail of that view is opened on that card view layout. I have used nativescript ScrollView for scrolling the views. But, when user click on last cardview layout it should scroll to show detail of cardview layout. It does not automatically scrolls to the last card view detail, due to this the detail of the card view is hidden and user have to scroll manually.

I found this Nativescript scroll to bottom of ScrollView programmatically but i am not able to solve my problem. Below is my code for layout.

   <ScrollView id="scrollView" #scrollView orientation="vertical" #scrollView     (scroll)="onScroll($event)">

          <StackLayout row="0" col="0">
            <StackLayout *ngFor="let item of items" class="card-view" id="cardViewLayout">

              <GridLayout columns="auto, *, auto" rows="auto,auto,auto" (tap)="toggleDetail(@event)">

              </GridLayout>

              <GridLayout row="3" col="0" colSpan="3" columns=" *, *" rows="auto,auto" id="detailedData" visibility="hidden" class="cardDetail">

                <StackLayout row="0" col="0" class="detailDataStack">
                </StackLayout>

              </GridLayout>

        </StackLayout>
      </StackLayout>
    </ScrollView>


 toggleDetail(args){
    var scrollView = this.page.getViewById("scrollView")
    var offset = this.scrollView.nativeElement.scrollableHeight;
    this.scrollView.nativeElement.scrollToVerticalOffset( this.scrollView.nativeElement.offset+ 120, false);   
 }

As shown in above when user click on card-view class layout, it is toggling cardDetail class. When there is last item in card-view it should scroll automatically to show the details but it don't automatically scrolls.

In toggleDetail() method i tried to get scrollableHeight, add 120 to that height and make it scroll when user in last item but nothing happened.

Playground Sample app for this ScrollView Sample app Nativescript Playground

Thank you in advance :)

Deep
  • 303
  • 2
  • 9

2 Answers2

0

You are suppose to use verticalOffset not just offset.

this.scrollView.nativeElement.scrollToVerticalOffset(this.scrollView.nativeElement.verticalOffset + 120, false);
Manoj
  • 21,753
  • 3
  • 20
  • 41
  • Thank you for your answer . But it don't work for me. – Deep Dec 24 '18 at 09:48
  • Do you have a Playground sample? – Manoj Dec 24 '18 at 09:59
  • Sorry ! , i dont have Playground sample. – Deep Dec 24 '18 at 10:03
  • i have made playground sample app for this. Can you look on to this https://play.nativescript.org/?template=play-ng&id=Y2ZJLs&v=17 – Deep Dec 26 '18 at 06:28
  • Looking at your code, I would recommend using `nativescript-accordion` plugin Or `ListView` / `RadListView` with 2 templates one for normal state and another for expanded which will help you retain your performance. Secondly I don't see any code related to scroll in the Playground sample, please update that. – Manoj Dec 26 '18 at 07:04
  • I tried using scrollToVerticalOffset but did not get what i need so removed it from there. – Deep Dec 26 '18 at 07:21
0

just use scrollToVerticalOffset and scrollableHeight

const scrollView = page.getViewById('scroll-view');
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
Youssef
  • 46
  • 6