sflistview with GroupHeaderTemplate

[hassan salman]

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]

 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]

Thank you for your quick reply.

Is it possible to use only SfListview?

Thank you.

[Chandrasekar Sampathkumar]

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  

 

Nested ListView reference : https://help.syncfusion.com/xamarin/listview/working-with-sflistview#working-with-nested-listview 

 

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]

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]

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]

Thank you very much. 

[Chandrasekar Sampathkumar]

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]

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]

Thank you very much.

[Lakshmi Natarajan]

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, 

 

KB link: https://www.syncfusion.com/kb/9484/how-to-bind-multiple-field-in-the-group-header 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan