Horizontal Card View

1 Answer 271 Views
Card ListView
Tye
Top achievements
Rank 1
Tye asked on 20 Oct 2021, 06:16 PM

I have an arbitrary number of Cards being returned from a database query. I would like these cards to layout horizontally and automatically line wrap. I've tried the ListView, but I can't find a way to make it horizontal. I also tried the GridLayout, but it doesn't seem to work if you don't specify the row and column explicitly. And the StackLayout just puts them all on the same row, no matter how many of the Cards there are.

Do I have to manually divide them up into rows myself? So if I want 4 cards per row, and I have 20 cards, I programmatically create the 5 rows? Is there a better option?

Thanks!

Tye

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 21 Oct 2021, 10:43 AM

Hello, Tye,

Thank you for the details.

The demo we have for the ListView with endless scrolling has a layout that is descripted. It has X number of columns and the rows number is based on the data:

https://www.telerik.com/kendo-react-ui-develop/components/listview/endless-scrolling/

Still, please have in mind that this is a custom layout and the developer has to set it up based on the application requirements.

Also, the GridLayout can work with not specified rows:

https://stackblitz.com/edit/react-asmduy?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Tye
Top achievements
Rank 1
commented on 21 Oct 2021, 07:29 PM

Thanks Stefan! I'll look through both of these. I appreciate it.
Tags
Card ListView
Asked by
Tye
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or