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

How to make a DataTemplate like this

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


8 Replies

DB Dinesh Babu Yadav Syncfusion Team 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 
 



WM Washington Morais May 30, 2017 06:24 PM UTC

Awesome. Thank you


DB Dinesh Babu Yadav Syncfusion Team May 31, 2017 06:37 AM UTC

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



DW Dilan Wickramarathna 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




MK Muthu Kumaran Gnanavinayagam Syncfusion Team 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. 



MK Muthu Kumaran Gnanavinayagam Syncfusion Team 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. 



DW Dilan Wickramarathna 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


MK Muthu Kumaran Gnanavinayagam Syncfusion Team November 25, 2017 08:13 AM UTC

Hi Dilan, 

Thanks for your valuable response. 

Regards, 
G.Muthu Kumaran. 


Loader.
Up arrow icon