CardView? ListView? Something else?

[Curtis]

Hey folks!

I need to display a lengthy list of "cards" or perhaps "cells" horizontally.  There will be NO vertical scrolling.  It would be nice if I can scroll horizontally by click+dragging.

Each "card/" will have an Image (thumbnail on the left or top) and some text (on the right or bottom)

 

I've used ListView for multiple UI requirements but I cannot figure out how to get the items to display "all horizontally" - the control wants to fill with Items until the last item that would normally have gone beyond the right side of the control and instead, it wraps to the next row below.  This "wrapping" is what I need to prevent.

I've never used CardView but maybe this is the way I should go?

All thoughts/comments would be appreciated!

Kind regards, 

LK

[Nadya | Tech Support Engineer]

Hello, Curtis,

I am not familiar with your exact requirements, but following your description, both CardView and ListView controls can be suitable for this case. 

To achieve your requirement, you can use RadListView with IconsView. The IconsView displays the list items in icons. Note, you can define your own custom items and customize them to look like with an image (thumbnail on the left or top) and some text (on the right or bottom). For more information you can check: Custom items in IconsView ViewType

IconListViewElement.Orientation property determines how the icons will be displayed: vertically or horizontally. If you specify orientation to horizontal, then the items should allow scrolling only horizontally, not vertically, as you required. 

this.radListView1.ViewType = ListViewType.IconsView;
IconListViewElement iconsView = this.radListView1.ListViewElement.ViewElement as IconListViewElement;
iconsView.Orientation = Orientation.Horizontal;

Also, you should be able to benefit from the kinetic scrolling that is available out of the box in RadListView. It allows scrolling the list view by click and drag to left/right. It can be enabled by setting EnableKineticScrolling to true. 

We have a similar example with RadListView in our Demo application. Please check the attached gif file. Is this something similar that you need you achieve? If this is close to your requirements, you can follow the approach from the demo example and implement the desired behavior that you need. 

You can also take a look at our CardView control and consider which should be most suitable for your needs. We have prepared demo examples for both RadListView and RadCardView components in our Demo application, so I would recommend to take a look and test which one should be ideal for you.

Considering the information you provided, using RadListView in IconsView seems suitable for you. However, it is your choice to use the control that you prefer, we can only give suggestions and recommendations. 

I hope this information is useful. Please let me know if you have additional questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Curtis]

Thank you, Nadya.

I have in fact scoured the Demo code looking for solutions but my requirements are just so slightly different enough to make it very difficult to execute.  I played around with both Card (this looked promising!) as well as List views.  I'm able to get very close but its that last 20% that causes me to keep looking / researching.  I don't give up easily :)

Cheers!