Nativescript: ListView / RadListView and more complex layouts

Created on 2 Apr 2017 · 7Comments · Source: NativeScript/NativeScript

Both modules, ListView and RadListView seem to work great if things don't get too complex. But even a header is getting you into trouble quickly. Using a ListView there's no straight forward way to accomplish a header for example. Don't get me wrong, I know it can be done but it's not as easy as it should be and there are other issues introduced. To make it clear I've created a demo app:

https://github.com/hettiger/ns3test/tree/flexible-list

Having a header above a list is a common thing so that should be easy and straight forward. Now you could use RadListView which comes with a headerItemTemplate and a footerItemTemplate. But this seems to be unusable to me. On iOS I'm having trouble setting the background to white because it's gray per default and the white background only get's applied for a small portion of the screen. Then there's some misbehaviors with centered content and multiple orientation changes. CSS styles don't seem to work in these templates ... It's just behaving weird at some points and feels incomplete.

Also it seems to be impossible having some extra content in between two lists that way for example as there are no multiple templates like with the basic ListView.

Now you could tell me to use the Repeater component maybe? Well that would probably work if I don't need a virtualized list and if my layout is simple. But what about a masonry kind of layout that could be accomplished using RadListView with the ListViewStaggeredLayout? I love that feature. It works great and it's so amazing to have it. But it is unusable if you need anything else on the screen.

What is even making ListViewStaggeredLayout more unusable is the fact that the spanCount also applies to the headerItemTemplate.

To me the solution to all these problems seems obvious. It must be possible to disable scroll on ListView and RadListView and these modules must provide their height correctly so we can put them into ScrollViews and stop using dirty hacks like my multiple templates approach.

If I'm totally wrong and there's a much easier way to accomplish all that please let me know. I'll be more than happy to help on improving the documentation as well.

question

Source

hettiger

All 7 comments

I left an issue about the CSS styles not being applied to footer and header templates on a RadListView here: https://github.com/telerik/nativescript-ui-feedback/issues/127. The issues list over there is stacked with bugs so I suppose that plugin needs a proper cleanup any time soon.

And yes, there should be official support for header/footer templates on a regular ListView. However, a work around for that is to apply separate itemTemplates for a header and footer item. Though then you'd need to push the header item into the items array at index 0, and the footer at the last index position, which is kind of a dirty trick...

NordlingDev on 2 Apr 2017

@NordlingArt I agree that it would be nice to have official support for header/footer templates on a regular ListView. Anyways that's still not as flexible as being able to put multiple ListViews and RadListViews into a ScrollView together with any other types of content.

Just think about a layout that starts with a RadListView using the ListViewStaggeredLayout followed by a header and a regular ListView... Header/Footer templates alone are too limited.

However, a work around for that is to apply separate itemTemplates for a header and footer item. Though then you'd need to push the header item into the items array at index 0, and the footer at the last index position, which is kind of a dirty trick...

Correct, that's exactly what I've done in the mentioned demo app:
https://github.com/hettiger/ns3test/tree/flexible-list

But a big drawback is that this work around is not available for RadListView which wont allow to have different types of content in the middle of a collection for example.

hettiger on 2 Apr 2017

@hettiger when working with the core ListView you can create multiple item templates. Here is the article showing how to do it in NativeScript core project and this is the article section showing the same for an Angular-2 project. Multiple examples demonstrating the usage of item templates in NativeScript + Angular-2 can be found here.

Not sure if I understood the problem correctly but if you need to create a static header (always visible and not scrollable) you can simply use the layout system to create your header independent from your list-view - example with map as a static header here (and based on that logic your header can be different layout as per your business logic requires).

You can explicitly disable the scrolling for ListView using isuserInteractionEnabled set to false.
e.g.

<ListView isUserInteractionEnabled="false">

However, that will explicitly disable not only the scrolling but all user interaction including itemTap and other related gesture events.Also, the ListView comes with virtualizing and recycling. All aimed to improve performance issues when working with large chunks of repeating data, so I see no use case to use ListView, disable the scrolling and wrap it in a ScrollView

For issues related to RadListView, then please use the feedback repository of nativescript-ui plugin

NickIliev on 3 Apr 2017

👎1

@hettiger when working with the core ListView you can create multiple item templates. Here is the article showing how to do it in NativeScript core project and this is the article section showing the same for an Angular-2 project. Multiple examples demonstrating the usage of item templates in NativeScript + Angular-2 can be found here.

Did you read my issue description or did you look into my sample repo at all? This is __exactly__ what I did in the demo app I've provided. I even said multiple times that __I know that this is possible__. (By the way: It is not within TabView but that's another story ...)

Not sure if I understood the problem correctly but if you need to create a static header (always visible and not scrollable) you can simply use the layout system to create your header independent from your list-view - example with map as a static header here (and based on that logic your header can be different layout as per your business logic requires).

No, my intend is to have a header for example that would scroll with the list content. Having a static header that is always visible is described in the beginner tutorials and it's perfectly fine the way it works. Unfortunately your link does not work so I cannot comment on that.

I also want to note here that a header / footer is not the only reason for this issue. Please look at my demo app. There's even a animated GIF in the readme so you don't have to clone and run anything at all ...

You can explicitly disable the scrolling for ListView using isuserInteractionEnabled set to false.

This is not a solution. It disables __all__ user interaction including item tap events.

Also, the ListView comes with virtualizing and recycling. All aimed to improve performance issues when working with large chunks of repeating data, so I see no use case to use ListView, disable the scrolling and wrap it in a ScrollView

So I guess that's why it is not easily possible to just put a ListView into a ScrollView. And I can imagine it is extremely complex to try to solve this issue but maybe there is another approach to tackle this issue?

Please don't just close this issue because at first a theoretical implementation seems very difficult and complex ...

hettiger on 4 Apr 2017

👍1

Hi @hettiger, have you found any viable solution to disable ListView scrolling but still having list items intractable? Thank you for letting me know!