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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to make a DataTemplate like this

Thread ID:

Created:

Updated:

Platform:

Replies:

130356 May 8,2017 05:53 PM UTC Nov 25,2017 08:13 AM UTC Xamarin.Forms 8
loading
Tags: SfListView
Washington Morais
Asked On May 8, 2017 05:53 PM UTC

Hi.
How to make a DataTemplate like this (this is part of documentation sfListView Docs):


Dinesh Babu Yadav [Syncfusion]
Replied On May 9, 2017 10:12 AM UTC

Hi Washington, 
 
Thank you for using Syncfusion Products. 
 
The reported requirement “Make a DataTemplate which arranges the underlying data as like column-wise” is nothing but arranging the underlying data’s in the ItemTemplate with the predefined number of columns in the view and this can be achieved by using GridLayout property and the DataTemplate of the underlying data i.e., customizing the data in the ItemTemplate remains same. Additionally, you can also define the number of columns to be displayed in the view by using SpanCount property of GridLayout. By default, the value will be 2.  
 
 
For your reference, we have attached the sample as like in the UG documentation link and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 


Washington Morais
Replied On May 30, 2017 06:24 PM UTC

Awesome. Thank you

Dinesh Babu Yadav [Syncfusion]
Replied On May 31, 2017 06:37 AM UTC

Hi Washington, 
 
Thanks for the update. 
 
Regards, 
Dinesh Babu Yadav 


Dilan Wickramarathna
Replied On November 22, 2017 10:17 AM UTC

Thank you for the Sample, and what I need to know is, if we change the Orientation="Horizontal" and  IsStickyGroupHeader="True", is there any possibility to bring the GroupHeader on top of the list. as bellow



Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On November 23, 2017 07:37 PM UTC

Hi Dilan, 
 
We have checked with the reported query “Need for Horizontal GroupHeaders when orientation of SfListView is Horizontal” from our side. We would like to let you know that when the orientation of the SfListView is horizontal the GroupHeader will be present at the beginning of the items. However you can achieve your requirement through an work around. You need to load another horizontal SfListView on top of the SfListView which is in GridLayout. You can set the BindingContext of second SfListView as first SfListView which contains GridLayout items and set its ItemsSource as Groups from DataSource of SfListView in the Loaded event of SfListView containing Grid items as like below code snippets. 
 
Code Example[C#]: 
        private void ListView_Loaded(object sender, ListViewLoadedEventArgs e) 
        { 
            listView2.BindingContext = listView; 
            listView2.ItemsSource = listView.DataSource.Groups; 
        } 
 
Then you need to set the AutoFitMode as ‘Height’ to measure the size for each item of second SfListView in QueryItemSize event of second SfListView. Measure the size for each item based on the SpanCount and ItemSize of first SfListView as like below code example. 
 
Code Example[C#]: 
        private void ListView2_QueryItemSize(object sender, QueryItemSizeEventArgs e) 
        { 
            for (int i = 0; i < listView.DataSource.Groups.Count; i++) 
            { 
                itemSize = (listView.DataSource.Groups[i].Count / gridLayout.SpanCount) * listView.ItemSize; 
                if (listView.DataSource.Groups[i].Count % 2 != 0) 
                    e.ItemSize = itemSize + listView2.ItemSize; 
                else 
                    e.ItemSize = itemSize; 
            } 
        } 
 
Then you need to scroll upper SfListView along with the lower SfListView. To do that you need to get the ScrollX position from the ScrollRows of ExtendedScrollView and in the ScrollRows Changed event you need to scroll the upper SfListView programmatically using ScrollTo method as like below. 
 
Code Example[C#]: 
  public partial class GridLayoutPage : ContentPage 
    { 
        ExtendedScrollView scrollview; 
        ScrollAxisBase scrollRows; 
        VisualContainer visualContainer; 
 
        public GridLayoutPage() 
        { 
            InitializeComponent(); 
            visualContainer = listView.GetType().GetRuntimeProperties().First(p => p.Name == "VisualContainer").GetValue(listView) as VisualContainer; 
            scrollRows = visualContainer.GetType().GetRuntimeProperties().First(p => p.Name == "ScrollRows").GetValue(visualContainer) as ScrollAxisBase; 
            scrollRows.Changed += ScrollRows_Changed; 
            scrollview = visualContainer.GetType().GetRuntimeProperties().First(x => x.Name == "ScrollOwner").GetValue(visualContainer) as ExtendedScrollView; 
        } 
 
        private void ScrollRows_Changed(object sender, ScrollChangedEventArgs e) 
        { 
            listView2.ScrollTo(scrollview.ScrollX); 
        } 
     } 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu Kumaran. 


Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On November 24, 2017 05:38 AM UTC

Hi Dilan, 
 
We have prepared a simple work around sample to achieve your requirement and you can download it from the below location. 
 
 
Regards, 
G.Muthu Kumaran. 


Dilan Wickramarathna
Replied On November 24, 2017 07:09 AM UTC

Wow, that was awesome, that's what I wanted, Thank you for the help and guidance that you give me, also in real empress about the Performance and quality of the Syncfusion Xamarin components, while comparing to some other components that I used for this.

Awesome, Thank you

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On November 25, 2017 08:13 AM UTC

Hi Dilan, 

Thanks for your valuable response. 

Regards, 
G.Muthu Kumaran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;