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

sflistview with GroupHeaderTemplate

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,

10 Replies

CS Chandrasekar Sampathkumar Syncfusion Team February 6, 2020 02:27 AM

 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 
 



HS hassan salman February 6, 2020 04:35 AM

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


CS Chandrasekar Sampathkumar Syncfusion Team February 7, 2020 02:17 AM

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 



HS hassan salman February 7, 2020 08:31 AM

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.


CS Chandrasekar Sampathkumar Syncfusion Team February 10, 2020 04:23 AM

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 



HS hassan salman February 11, 2020 02:46 AM

Thank you very much. 


CS Chandrasekar Sampathkumar Syncfusion Team February 11, 2020 09:54 PM

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 
 



TC Tamas Cons replied to Chandrasekar Sampathkumar March 12, 2020 03:36 AM

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!


HS hassan salman March 12, 2020 05:56 AM

Thank you very much.


LN Lakshmi Natarajan Syncfusion Team March 13, 2020 12:53 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon