How to Let Scroll Both StackLayout 1 and StackLayout 2 together

Question

Image for how two Stack layouts arranged

    <ScrollView orientation="horizontal">


          <GridLayout rows="auto">
            <StackLayout row="0" backgroundColor="lightblue">
                <GridLayout columns="{{gridColmns}}">
                    <ng-container *ngFor="let listItem of header let i 
   = index " scrollDirection="horizontal" orientation="vertical">
                        <Label margin="2 2 2 2" [col]="i" 
  textWrap="true" class="tcB"  [text]=listItem.headerName></Label>
                    </ng-container>
                </GridLayout>
            </StackLayout>
        </GridLayout>
 </ScrollView>

 <ScrollView>
 <ScrollView orientation="horizontal">
        <GridLayout rows="auto">

            <StackLayout row="0">
                <RadListView  #radList [items]="gridToMobile">
                    <ng-template tkListItemTemplate let-item="item" 
     let-itemIndex="index">
                        <StackLayout padding="5" 
   orientation="horizontal" class="positioning">
                            <GridLayout columns="{{gridColmns}}">
                                <ng-container *ngFor="let listItem of 
  item let i = index " scrollDirection="horizontal" 
   orientation="vertical">
                           <Label position="fixed" margin="2 
    2 2 2" [col]="i" textWrap="true" class="tcB"  
     [text]=listItem.value></Label>
                                </ng-container>
                            </GridLayout>
                        </StackLayout>
                    </ng-template>
                </RadListView>
            </StackLayout>
        </GridLayout>
   </ScrollView>

  </ScrollView>

Above is the Code for Two Stack Layouts Any seamless way to let scroll in sync both Stack Lay outs.

Already tried Firing Scrolling Events with one other which is not working as expected.

Answer 1

It looks like the top block is the header of the list view. You could use header property of list view.

<ng-template tkListViewHeader>
<GridLayout rows="auto">
            <StackLayout row="0" backgroundColor="lightblue">
                <GridLayout columns="{{gridColmns}}">
                    <ng-container *ngFor="let listItem of header let i 
   = index " scrollDirection="horizontal" orientation="vertical">
                        <Label margin="2 2 2 2" [col]="i" 
  textWrap="true" class="tcB"  [text]=listItem.headerName></Label>
                    </ng-container>
                </GridLayout>
            </StackLayout>
        </GridLayout>
</ng-template>