We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ListView Grid Layout - but with horizontal instead of vertical scrolling

Is it possible to use the ListView with a grid layout - but instead to have the scroll operate more like a horizontal carousel, rather than vertically down?
So a layout like this 
... but scroll horizontally to next page instead of scrolling down in the list.
Is this possible out of the box?

7 Replies

DB Dinesh Babu Yadav Syncfusion Team April 17, 2019 03:03 AM

Hi Malcolm, 
 
Thanks for contacting Syncfusion support. 
 
We would like to inform you that you can change the orientation of SfListView to Horizontal for your requirement. We have already documented regarding ListView with horizontal orientation, please find the document and sample link for your reference. 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 



MJ Malcolm Jack April 18, 2019 04:01 AM

Thanks for the response Dinesh.

Perhaps I can be more clear.
The current ListView horizontal scaling scrolls like a scroll view.
What I'm needing to achieve is to span a single collection across multiple coursel view pages - so the first carousel page would contain only the items that can fit, and then you can continue to swipe right to the next page to view additional items in the collection.

I doesn't have to be a carousel + ListView - but that is the experience I need to build.
Is this possible with some combination of CarouselView + ListView (with 2 column layout)?

See this video: 1:37 
the collection of chord sections are navigated via a carousel type experience.


GP Gnana Priya Namasivayam Syncfusion Team April 18, 2019 07:46 PM

Hi Malcolm, 
 
We have checked the reported query from our side. You can achieve your requirement by splitting the ItemsSource to content page based on item count and page count like below. We have attached the tested sample for your reference, please find the sample from below. 
 
 
 
 
 
public PagesViewModel(double height) 
{ 
    ScreenHeight = height; 
    int j = 0; 
 
    int itemsPerPage = (int)(height / 80) * 4; 
    int temp = itemsPerPage; 
    CarouselPages = new ObservableCollection<List<Contacts>>(); 
    var contactsviewmodel = new ContactsViewModel(); 
           
    var count = GetPageCount(height, contactsviewmodel.ContactsInfo.Count, itemsPerPage); 
 
    for (int i = 0; i < count; i++) 
    { 
       var source = contactsviewmodel.ContactsInfo.Skip(j).Take(temp); 
       var items = source.AsEnumerable().ToList().ToList(); 
       CarouselPages.Add(items); 
       j += itemsPerPage; 
    } 
} 
 
private int GetPageCount(double height, int count, int itemsperpage)   
{ 
   int i = 0; 
   int itemscount = 0; 
   while (itemscount <= count) 
   { 
     itemscount += itemsperpage; 
     i++; 
   } 
   return i; 
} 
 
 
Please let us know whether sample meets your requirement. 
 
 
 
Regards, 
Gnana Priya N 



MJ Malcolm Jack April 23, 2019 02:42 AM

Thanks for the example.

Unfortunately the requirement is that each item template can have a variable size.
See attached updated example where I updated each contact to have variable descriptions.

So each carousel page content would need more of a flex layout system, where it only shows the variable height items that fit in the page,
rather than a grid layout where each row is the same height.

Here's another example of what would be required:



Attachment: HorizontalList_60e2367e.zip


DB Dinesh Babu Yadav Syncfusion Team April 23, 2019 10:23 PM

Hi Malcolm, 
 
We have checked the reported query for our end. We would like to let you know that SfListView GridLayout splits the column width equally based on the span count, because it is consider as one row which contains the items. Here, item height is taken from the highest height of the item which is loaded in the single row. So, we regret to inform you that it is not possible to provide the different height and width for each item.  
 
We have already considered reported support as an feature and added it into our feature request list. You can track the progress of the reported feature from the below link.  
 
Note: The date for implementation of requested feature is tentative and it will be included in any of our upcoming release.     
 
Regards, 
Dinesh Babu Yadav 
 



MJ Malcolm Jack April 24, 2019 01:15 PM

Thanks Dinesh!

yes - Flex layout with a Snap behavior to column / row (depending on orientation) would be awesome!

Malcolm


DB Dinesh Babu Yadav Syncfusion Team April 24, 2019 08:33 PM

Hi Malcolm, 
 
Thanks for the update. We will let you know once the feature has been rolled out and will appreciate your patience until then. 
 
Regards, 
Dinesh Babu Yadav 


Loader.
Live Chat Icon For mobile
Up arrow icon