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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

sflistview with GroupHeaderTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

151282 Feb 5,2020 09:40 PM UTC Mar 13,2020 08:53 AM UTC Xamarin.Forms 10
loading
Tags: SfListView
hassan salman
Asked On February 5, 2020 09:40 PM UTC

I have  :

public class Employee 
{
public string Name { get; set; }
public List<Customer> Customers { get; set; }
}


public class Customer
{
public string CustName { get; set; }
public string CustAddress { get; set; }
}

I would like to populate SfListview by using GroupHeaderTemplate to display in the header Employee and when tap on employee, it shows customers for the employee.
could you please provide example. 
Note: i have seen the example with the contactsInfo but i dit not success to change it to work with my classes Employee and Customer.
best regards,

Chandrasekar Sampathkumar [Syncfusion]
Replied On February 6, 2020 10:27 AM UTC

 Hi Hassan, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “SfListView with GroupHeaderTemplate” from our end. We suggest you to use SfListView inside SfAccordion to achieve your requirement as following, 
 
Code Snippet XAML : Using ListView inside Accordion 
 
xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 
xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms"> 
 
<syncfusion:SfAccordion x:Name="Accordion" ExpandMode="SingleOrNone" BindableLayout.ItemsSource="{Binding EmployeeInfo}"> 
            <BindableLayout.ItemTemplate> 
                <DataTemplate> 
                    <syncfusion:AccordionItem> 
                        <syncfusion:AccordionItem.Header> 
                            <Grid HeightRequest="50"> 
                                <Label Text="{Binding EmployeeName}"/> 
                            </Grid> 
                        </syncfusion:AccordionItem.Header> 
                        <syncfusion:AccordionItem.Content> 
                            <Grid HeightRequest="160"> 
                                <sflistview:SfListView x:Name="listView" 
                                                       BackgroundColor="Beige" IsScrollingEnabled="False" 
                                                       ItemsSource="{Binding Customers}"> 
                                    <sflistview:SfListView.ItemTemplate> 
                                        <DataTemplate> 
                                            <Label Text="{Binding CustomerName}"/> 
                                        </DataTemplate> 
                                    </sflistview:SfListView.ItemTemplate> 
                                </sflistview:SfListView> 
                            </Grid> 
                        </syncfusion:AccordionItem.Content> 
                    </syncfusion:AccordionItem> 
                </DataTemplate> 
            </BindableLayout.ItemTemplate> 
        </syncfusion:SfAccordion> 
 
 
We have created a sample based on the provided code snippet. We have attached the tested sample for your reference and you can download the same from the following link, 
 
Sample Link : SfListViewSample 
 
Please check the attached sample and let us know if you are still facing the same issue? If yes, please modify our sample and revert us back or share the project that you are working which would be helpful for us to check on it and provide the solution at the earliest. 
 
Regards, 
Chandrasekar Sampathkumar 
 


hassan salman
Replied On February 6, 2020 12:35 PM UTC

Thank you for your quick reply.
Is it possible to use only SfListview?
Thank you.

Chandrasekar Sampathkumar [Syncfusion]
Replied On February 7, 2020 10:17 AM UTC

Hi Hassan, 
 
Thank you for the update. 
 
We have checked the reported query “Using ListView with GroupHeaderTemplate” from our end. Yes, It is possible achieve given requirement by using ListView itself and you can achieve the same using the following code snippets, 
 
Code Snippet XAML : Using Nested ListView 
 
xmlns:local="clr-namespace:GettingStarted"              
xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 
 
<sflistview:SfListView x:Name="OuterListView"  
                               ItemsSource="{Binding EmployeeInfo}"  
                               AutoFitMode="DynamicHeight" 
                               AllowGroupExpandCollapse="True"> 
            <sflistview:SfListView.GroupHeaderTemplate> 
                <DataTemplate> 
                    <Label Text="{Binding Key}" HeightRequest="50" BackgroundColor="LightCyan"/> 
                </DataTemplate> 
            </sflistview:SfListView.GroupHeaderTemplate> 
            <sflistview:SfListView.DataSource> 
                <data:DataSource> 
                    <data:DataSource.GroupDescriptors> 
                        <data:GroupDescriptor PropertyName="EmployeeName"/> 
                    </data:DataSource.GroupDescriptors> 
                </data:DataSource> 
            </sflistview:SfListView.DataSource> 
            <sflistview:SfListView.ItemTemplate> 
                <DataTemplate> 
                    <ViewCell> 
                        <ViewCell.View> 
                            <Grid> 
                            <local:ExtendedListView x:Name="InnerListView" 
                                           BackgroundColor="LightPink" 
                                           HeightRequest="{Binding InnerListHeight}" 
                                           ItemSize="50" 
                                           ItemsSource="{Binding Customers}"> 
                                <local:ExtendedListView.ItemTemplate> 
                                    <DataTemplate> 
                                        <Label Text="{Binding CustomerName}"/> 
                                    </DataTemplate> 
                                </local:ExtendedListView.ItemTemplate> 
                            </local:ExtendedListView> 
                            </Grid> 
                        </ViewCell.View> 
                    </ViewCell> 
                </DataTemplate> 
            </sflistview:SfListView.ItemTemplate> 
        </sflistview:SfListView> 
 
Code Snippet C# : Extended ExtendedListView to set the HeightRequest to load the nested ListView with content based height 
 
public class ExtendedListView : SfListView 
    { 
        VisualContainer container; 
        public ExtendedListView() 
        { 
            container = this.GetVisualContainer(); 
            this.Loaded += ExtendedListView_Loaded; 
        } 
 
        private void ExtendedListView_Loaded(object sender, ListViewLoadedEventArgs e) 
        { 
            var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(x => 
            x.Name == "TotalExtent").GetValue(container); 
            this.HeightRequest = extent; 
            (this.BindingContext as Employee).InnerListHeight = extent; 
        } 
    } 
 
We have created a sample based on the requirement. We have attached the tested sample for your reference and you can download the same from the following link,  
  
Sample Link : SfListViewSample  
 
 
Please check the attached sample and let us know if you are still facing the same issue? If yes, please modify our sample and revert us back or share the project that you are working which would be helpful for us to check on it and provide the solution at the earliest.  
  
Regards,  
Chandrasekar Sampathkumar 


hassan salman
Replied On February 7, 2020 04:31 PM UTC

Thank you for your reply. 
Is it possible to customize the header? For example, in the case that the class Employee has Name, Phone and Address properties. I want to display these properties in the header but every one in a single line. And i need the employee name to be Bold. Is there a way to do this?

Is the nested listview performance good compared to the accordion with listview?
thank you in advance.

Chandrasekar Sampathkumar [Syncfusion]
Replied On February 10, 2020 12:23 PM UTC

Hi Hassan, 
 
Thank you for the update. 
 
We have checked the reported query “Customizing GroupHeader in ListView” from our end. We would like to let you know that ListView allows you to customize GroupHeader using GroupHeaderTemplate with good performance. Please refer the following code snippets for more reference, 
 
Code Snippet XAML : Customizing GroupHeader in ListView 
 
<sflistview:SfListView.GroupHeaderTemplate> 
                <DataTemplate> 
 
                    <Grid HeightRequest="50" BackgroundColor="Aquamarine"> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="*"/> 
                            <ColumnDefinition Width="*"/> 
                            <ColumnDefinition Width="*"/> 
                        </Grid.ColumnDefinitions> 
 
                        <Label Text="{Binding Key}" 
                                 FontSize="18" 
                                 FontAttributes="Bold" 
                                 VerticalOptions="Center" 
                                 HorizontalOptions="Start" 
                                 Margin="20,0,0,0" /> 
 
                        <Label Text="{Binding Key, Converter={StaticResource phoneNumberConverter}, ConverterParameter={x:Reference OuterListView}}"  
                                Grid.Column="1"  
                                FontSize="18"    
                                HorizontalOptions="Start"  
                                VerticalOptions="Center"/> 
 
                        <Label Text="{Binding Key, Converter={StaticResource addressConverter}, ConverterParameter={x:Reference OuterListView}}"  
                                 Grid.Column="2" 
                                 FontSize="18" 
                                 VerticalOptions="Center" 
                                 HorizontalOptions="Start" 
                                 Margin="0,0,0,0"/> 
 
                    </Grid> 
                </DataTemplate> 
            </sflistview:SfListView.GroupHeaderTemplate> 
 
Code Snippet C# : Converter class for customizing GroupHeader 
 
class AddressConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            if (value == null) 
                return null; 
 
            var bindingContext = (parameter as SfListView).BindingContext as ViewModel; 
            var model = bindingContext.EmployeeInfo; 
 
            foreach (var item in model) 
            { 
                if ((string)value == item.EmployeeName) 
                { 
                    return item.Address; 
                } 
            } 
            return null; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 
 
We have prepared a sample based on your requirement and you can download the same from the following link, 
 
Sample Link : SfListViewSample 
 
Please let us know, if you would require further assistance. 
 
Regards, 
Chandrasekar Sampathkumar 


hassan salman
Replied On February 11, 2020 10:46 AM UTC

Thank you very much. 

Chandrasekar Sampathkumar [Syncfusion]
Replied On February 12, 2020 05:54 AM UTC

Hi Hassan, 
  
Thank you for the update. 
  
We are glad that our solution meets your requirement. Please let us know if you need any further assistance. As always we are happy to help you out. 
  
Regards, 
Chandrasekar Sampathkumar 
 


Tamas Cons
Replied On March 12, 2020 11:36 AM UTC

Hi Hassan, 
 
Thank you for the update. 
 
We have checked the reported query “Customizing GroupHeader in ListView” from our end. We would like to let you know that ListView allows you to customize GroupHeader using GroupHeaderTemplate with good performance. Please refer the following code snippets for more reference, 
 
Code Snippet XAML : Customizing GroupHeader in ListView 
 
<sflistview:SfListView.GroupHeaderTemplate> 
                <DataTemplate> 
 
                    <Grid HeightRequest="50" BackgroundColor="Aquamarine"> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="*"/> 
                            <ColumnDefinition Width="*"/> 
                            <ColumnDefinition Width="*"/> 
                        </Grid.ColumnDefinitions> 
 
                        <Label Text="{Binding Key}" 
                                 FontSize="18" 
                                 FontAttributes="Bold" 
                                 VerticalOptions="Center" 
                                 HorizontalOptions="Start" 
                                 Margin="20,0,0,0" /> 
 
                        <Label Text="{Binding Key, Converter={StaticResource phoneNumberConverter}, ConverterParameter={x:Reference OuterListView}}"  
                                Grid.Column="1"  
                                FontSize="18"    
                                HorizontalOptions="Start"  
                                VerticalOptions="Center"/> 
 
                        <Label Text="{Binding Key, Converter={StaticResource addressConverter}, ConverterParameter={x:Reference OuterListView}}"  
                                 Grid.Column="2" 
                                 FontSize="18" 
                                 VerticalOptions="Center" 
                                 HorizontalOptions="Start" 
                                 Margin="0,0,0,0"/> 
 
                    </Grid> 
                </DataTemplate> 
            </sflistview:SfListView.GroupHeaderTemplate> 
 
Code Snippet C# : Converter class for customizing GroupHeader 
 
class AddressConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            if (value == null) 
                return null; 
 
            var bindingContext = (parameter as SfListView).BindingContext as ViewModel; 
            var model = bindingContext.EmployeeInfo; 
 
            foreach (var item in model) 
            { 
                if ((string)value == item.EmployeeName) 
                { 
                    return item.Address; 
                } 
            } 
            return null; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 
 
We have prepared a sample based on your requirement and you can download the same from the following link, 
 
Sample Link : SfListViewSample 
 
Please let us know, if you would require further assistance. 
 
Regards, 
Chandrasekar Sampathkumar 


if I need to bind the whole group as I need also the IsExpand property(not only the key),what would be the solution?

<Label Text="{Binding Key, Converter={StaticResource addressConverter}, ConverterParameter={x:Reference OuterListView}}"  

so in the above example I am binding to key,and passing a parameter,but I also need to know if the group is expanded,not only the key,how can I achieve that?

Thanks for the help!

hassan salman
Replied On March 12, 2020 01:56 PM UTC

Thank you very much.

Lakshmi Natarajan [Syncfusion]
Replied On March 13, 2020 08:53 AM UTC

Hi Tamas, 
 
Thank you for using Syncfusion products. 
 
We would like to inform you that you can achieve your requirement using Converter with the help of GroupResult to get multiple fields. We have already documented your requirement in the following documentation. 
 
Please find our KB document from following link for your reference, 
 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon