Nativescript-ui-feedback: RadListView scrolling inside ScrollView smoothness issue

[bhavincb]

playground demo with scrollview+radlistview: here
playground demo with scrollview+listview: here

i had created 2 playground demo as described above. RadListView supposed to be successor of ListView. but when using inside ScrollView RadListView scrolling junks. but ListView works perfectly smooth.

after removing ScollView both ListView and RadListView works perfectly.
solution is pretty simple not to use RadListView inside ScrollView. but still i thought this issue is worth mentioning.

[frey1esm]

RadListView (at least in Angular version) is jittery (hiccups) even when not in ScrollView.

[bhavincb]

hii @frey1esm ,
do you have any solution for this? it's been more than a month but still i am unable to solve the problem.

[racknoris]

@frey1esm @bhavincb Did you manage to solve this? Is there a workaround?

[bhavincb]

only workaround is not using ListView or RadListView inside ScrollView other than that no luck and also didn't get any responses from telerik team yet.

[racknoris]

When you use it inside ScrollView, does it move slower?

[VladimirAmiorkov]

Hi @bhavincb ,

Thank you for bringing this to our attention. By design both RadListView and ListView on Android use an RecyclerView in some way to render and manage their items/elements. While this is true the differences are not small which is caused by the many features/functionalities the default ListView does not have compared to RadListView. Basically the ListView uses android.widget.ListView which uses the mentioned RecyclerView internally while RadListView directly uses RecyclerView and manages it. This is the reason why both components ListView and RadListView may seam to be same but are rather quite differently implemented. On the iOS side the differences are even bigger where the ListView uses UITableView while RadListView uses UICollectionView. If you are familiar with the native iOS components UICollectionView is basically an more advanced version of the UITableView that allows a lot more customizations to the way its items/elements are being displayed (templates etc.) but again they are not 100% compatible so some limitations/differences are expected. Having said all that the main visible difference to the users of NativeScript are performance + layout differences, one of the layout differences is that RadListView does not perform optimally inside containers like ScrollView due to the nature with which such containers measure their child views.

We are always doing our best to bring the RadListView and the ListView closer together so that switching between them is easy and does not require any changes or drawbacks. We will further research this scenario and update you once we have more information.

[Whip]

Hi @VladimirAmiorkov I don't know about others but I needed radlistview inside scroll view because there are elements on my page that appear above the list (like a label displaying number of products). They're not part of the list but if I don't use scrollview, they stay fixed on the screen.

I want them to scroll up from the screen with the content. How do I achieve this? Is it possible to add a one time element to radlistview? Here's my basic xml:

<StackLayout>
    <Label text="CART TOTAL" class="center" />
    <GridLayout columns="1*,1*,1*" rows="auto">
        <!-- cart total is displayed here -->
    </GridLayout>
    <Label text="{{ numProducts+' products' }}" horizontalAlignment="right" class="m-b-5" />

    <lv:RadListView items="{{ products }}">
        <lv:RadListView.listViewLayout>
            <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2" />
        </lv:RadListView.listViewLayout>

        <lv:RadListView.itemTemplate>
            <!-- content -->
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</StackLayout>

[VladimirAmiorkov]

Hi @VeeK727 ,

I believe that you can approach this scenario in a different way. When dealing with such scenario where you are "faking" items of a list but they are actually outside of the list component, simply wrapping that list with a scrollview so that you can "fake" it is not a good solution because it will break the list performance optimizations etc. for further information please refer my answer above.

So what I can suggest to you is to do the following:
Considering you know that the first "X" items are going to be those "special" items, simply:

• add those to the first locations of the bound collection to the items property of the RadListView
• create special templates for each of them to make them look the way you would like by adding multiple template in the XML with their associated key to the itemTemplates of the RadListView

And that is it. This way you will not need to add any scrollviews so that the "fake items" will scroll with the view because they will be part of the list. Hope this is helpful.

More details about how to use multiple templates can be found in our documentation here: https://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/multiple-templates

[racknoris]

@VladimirAmiorkov That's an excellent approach. What about the same situation, but in my case i have ListViewStaggeredLayout with 2 columns? (spanCount="2")
Is it possible to have 2 layouts in a RadListView?

[VladimirAmiorkov]

@racknoris

Hmm I am not sure I understand you correctly. What do you mean by two layouts?

[racknoris]

@VladimirAmiorkov I have a scenario close/identical to Veek's issue, there's a header that should be scrolled with the list, the header should have the full width of the screen, whereas each item in the RadListView has its own column, so it seems like i can't insert fake items in the list and place the #myHeader GridLayout inside the list, or is there a way?

The design is roughly this:

<StackLayout>  
    <GridLayout #myHeader rows="auto, auto" columns="*">
        <Label row="0" text="my title"></Label>        
        <Label row="1" text="my subtitle"></Label>     
    </GridLayout>

    <RadListView #myList [items]="myItems" [scrollPosition]="myScrollPositionFeed">
        <ng-template tkListItemTemplate let-item="item" let-i="index">
            <GridLayout rows="auto, auto" columns="*, auto">
                <GridLayout row="0" col="0" colSpan="2" columns="*" rows="auto" (tap)="action(item)">
                    <Label text="item.description"></Label>
                </GridLayout>
                <Label row="1" col="0" textWrap="true" [text]="item.name"></Label>
                <Label row="1" col="1" [text]="item.txt"></Label>        
            </GridLayout>
        </ng-template>

        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
    </RadListView> 
</StackLayout> 

My only option is wrapping all with ScrollView, but it has bad performance

[VladimirAmiorkov]

Hi @racknoris ,

I see, you should follow this issue as it describes the exact same scenario. We will do our best to address it as soon as possible.

[racknoris]

I see, thank you!
Is there something i can do meanwhile? don't mind if it includes digging in node_modules

[VladimirAmiorkov]

@racknoris One possible workaround could be https://github.com/telerik/nativescript-ui-feedback/issues/771#issuecomment-410678271 , credits goes to @felix-idf

[racknoris]

@VladimirAmiorkov Thank you both

[NL33]

Hi There. I am following up on this because I too have found RadListView (using Angular, on iOS) to be surprisingly jerky on the scroll. I have tried different combinations of text and still no benefit--RadListView is jerky when scrolling. Does it remain the expectation that RadListView on iOS will often be non-smooth in scrolling?

My list has about 50 items.

When I use the same data but use *ngFor instead of RadListView, it is perfectly smooth.

Is there a way to improve RadListView scroll performance? If not, is *ngFor an acceptable (or even better) alternative?

[prinzt]

I can confirm this behavior with Nativescript Vue (RadListView embedded in ScrollView).
After some debugging, its seems that the swipe up/down is disabled or blocked on RadListView container.
Instead i assume, regarding the scroll behavior, it falls back to pan (Scroll follows your finger and stops immediately if you stop touching). If i swipe up/down outside of the RadListView, the page scrolls smooth as expected.