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
close icon

Grouping doesn't work- SfListView

This is my XAML:


<Grid>

<listView:SfListView x:Name="listView" ItemSize="65" GroupHeaderSize="60"

                   ItemsSource="{Binding UsersList}" ItemSpacing="0,0,5,0"

                   AllowGroupExpandCollapse="True"

                   IsStickyGroupHeader="True">


      <listView:SfListView.DataSource>

        <dataSource:DataSource>      

          <dataSource:DataSource.GroupDescriptors>

            <dataSource:GroupDescriptor PropertyName="Group"/>

          </dataSource:DataSource.GroupDescriptors>

        </dataSource:DataSource>

      </listView:SfListView.DataSource>


      <listView:SfListView.GroupHeaderTemplate>

        <DataTemplate>

          <ViewCell>

            <ViewCell.View>

              <StackLayout BackgroundColor="#E4E4E4">

                <Label Text="{Binding Key}"

                       FontSize="22"

                       FontAttributes="Bold"

                       VerticalOptions="Center"

                       HorizontalOptions="Start"

                       Margin="20,0,0,0" />

              </StackLayout>

            </ViewCell.View>

          </ViewCell>

        </DataTemplate>

      </listView:SfListView.GroupHeaderTemplate>

<listView:SfListView.ItemTemplate>

        <DataTemplate>

          <ViewCell>

            <ViewCell.View>

                   ---------

             </ViewCell.View>

          </ViewCell>

      </DataTemplate>

  </listView:SfListView.ItemTemplate

</listView:SfListView>

 </Grid>

This  is basically the same as the one given in the SfListViewSample.
My model is:

public class UserDetails
{
public int UserId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string EmailId { get; set; }
public int GroupId { get; set; }
public string Group{ get; set; }
}

This doesn't implement INotifyPropertyChanged interface.

My view model though has an observable collection of the UserDetails object, which is populated via response from an API. The list items are displayed correctly after they have been loaded, but they are not grouped, nor do the group headers appear.

  private ObservableCollection<UserDetails> _users;

  public ObservableCollection<UserDetails> UsersList
        {
            get { return _users; }
            set
            {
                _users= value;
                RaisePropertyChanged(() => UsersList);
            }
        }
Am I missing something here? I just copied the XAML code from working fine example of contacts from the example provided by SyncFusion.
Also, is it possible to group items by GroupId but display the Group name as group header?
Plus, the ListView doesn't have a 'HasUnevenRows' property...and hard coding the item size probably is not a good idea, as the look and feel won't be the same across devices of varying resolutions. Btw, this 'HasUnevenRows' is available in XamarinForms' ListView...idk how you are unable to implement it in yours.
Please reply ASAP.

14 Replies

DB Dinesh Babu Yadav Syncfusion Team March 8, 2017 11:55 AM UTC

Hi Customer, 
 
Thank you for using Syncfusion products. 
 
Query 1: 
We have analyzed the reported query with the given code snippet and we suspect that the issue may arise with the Group property which has bind to the GroupDescriptor. Can you please check whether you have provided data to Group property because if the group’s Key value is null, groups are not created. The group header contains GroupResult(Contains the Key and grouped items based on the property which has bind to GroupDescriptor) as binding context and other than binding context, it won’t bind the data. So, we recommend you to group the items based on property in the Model class which has underlying data. For your reference, we have prepared an sample as like your code snippet in which Model class is not implemented with INotifyPropertyChanged interface and bind the Group property to GroupDescriptor’s PropertyName and the group headers are created properly. You can download the sample from the below link. 
 
 
Could you please check with the sample?. If you face any issue, please modify the above sample to reproduce the issue and update us with replication procedure. So, that we could able to analyze the issue better and update you with appropriate solution.     
 
Query 2: 
Currently SfListView do not have support for “HasUnevenRows”. We have already considered this as feature request and we are implementing the feature “Automatically fit the item height based on content” and it will be available in our upcoming 2017 Volume 1 SP 2 release which is scheduled to be rolled out by end of this month.  
   
Please let us know if you require further assistance.  
   
Regards, 
Dinesh Babu Yadav 
 



BG bg March 14, 2017 12:47 PM UTC

Okay, I finally got the grouping to work when the page is loaded initially- by setting the visibility only after the list has been loaded.... but when i edit an item, post the details to the server... (i can also edit the category that was used to group the list)...get an updated list as response..... the grouping headers vanish. What is the issue?

Please reply ASAP.


BG bg replied to Dinesh Babu Yadav March 15, 2017 05:28 AM UTC

Hi Customer, 
 
Thank you for using Syncfusion products. 
 
Query 1: 
We have analyzed the reported query with the given code snippet and we suspect that the issue may arise with the Group property which has bind to the GroupDescriptor. Can you please check whether you have provided data to Group property because if the group’s Key value is null, groups are not created. The group header contains GroupResult(Contains the Key and grouped items based on the property which has bind to GroupDescriptor) as binding context and other than binding context, it won’t bind the data. So, we recommend you to group the items based on property in the Model class which has underlying data. For your reference, we have prepared an sample as like your code snippet in which Model class is not implemented with INotifyPropertyChanged interface and bind the Group property to GroupDescriptor’s PropertyName and the group headers are created properly. You can download the sample from the below link. 
 
 
Could you please check with the sample?. If you face any issue, please modify the above sample to reproduce the issue and update us with replication procedure. So, that we could able to analyze the issue better and update you with appropriate solution.     
 
Query 2: 
Currently SfListView do not have support for “HasUnevenRows”. We have already considered this as feature request and we are implementing the feature “Automatically fit the item height based on content” and it will be available in our upcoming 2017 Volume 1 SP 2 release which is scheduled to be rolled out by end of this month.  
   
Please let us know if you require further assistance.  
   
Regards, 
Dinesh Babu Yadav 
 


Okay, I finally got the grouping to work when the page is loaded initially- by setting the visibility only after the list has been loaded.... but when i edit an item, post the details to the server... (i can also edit the category that was used to group the list)...get an updated list as response..... the grouping headers vanish. What is the issue?

Please reply ASAP.


DB Dinesh Babu Yadav Syncfusion Team March 15, 2017 02:44 PM UTC

Hi Customer,    
    
Sorry for the inconvenience caused.    
    
We have confirmed that the issue with “GroupHeader is not updated when groupdescriptor is removed and then added at runtime in UWP platform” is a defect and we have logged a defect report. The fix for the reported issue will be available in our upcoming 2017 Volume 1 SP 2 release which is scheduled to be rolled out by end of this month. We will appreciate your patience until then. 
    
Please let us know if you require further assistance.    
    
Regards,    
Dinesh Babu Yadav 



BG bg replied to Dinesh Babu Yadav March 16, 2017 04:52 AM UTC

Hi Customer,    
    
Sorry for the inconvenience caused.    
    
We have confirmed that the issue with “GroupHeader is not updated when groupdescriptor is removed and then added at runtime in UWP platform” is a defect and we have logged a defect report. The fix for the reported issue will be available in our upcoming 2017 Volume 1 SP 2 release which is scheduled to be rolled out by end of this month. We will appreciate your patience until then. 
    
Please let us know if you require further assistance.    
    
Regards,    
Dinesh Babu Yadav 


As for me, the header is not at all shown. And I have just tested it in Android.
Even when I don't update the group descriptor but simply remove an item from collection, the ItemSource changes gets reflected in the view , but without grouping.
I repeat, group headers vanish.


DB Dinesh Babu Yadav Syncfusion Team March 16, 2017 10:38 AM UTC

Hi Customer, 
 
Apologies for the delay caused. 
 
We have analyzed the reported issue “Group header gets cleared when underlying data is removed at runtime” with the given information at different possible scenarios in our sample. In the sample, we have removed the item from the underlying collection by a button click and on tapping the ListViewItem as like below code snippet. But we didn’t face any issue. For your reference, we have attached the sample and you can download the same from the below link. 
 
Code Example[C#] 
private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
{ 
  if (e.ItemData is GroupResult) 
     return; 
 
  viewModel.Contactsinfo.Remove(e.ItemData as Contacts); 
} 
 
private void RemoveItemInGroup_Clicked(object sender, EventArgs e) 
{ 
  var item = listView.DataSource.DisplayItems[1] as Contacts; 
 
  viewModel.Contactsinfo.Remove(item as Contacts); 
  DisplayAlert("Add Item in Group", "Added Item is " + item.Name + item.Group, "Ok"); 
} 
 
 
Could you please check with the above sample?. If the issue still reproduces at your end, please modify the above sample to reproduce the issue and update us with replication procedure or video link. So, that we could able to analyze the issue better and update you with appropriate solution. And also can you share the below details? 
 
  • Can you share the SfListView version? We have tested in latest version(v15.1.0.37).
  • In which ListView LayoutManager you have tested? We have tested in both Linear Layout and GridLayout.
  • Can you share the Xamarin Form version? We have tested in (v2.3.3.180).
  • If possible, can you please modify the sample which replicates the issue?
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 



BG bg replied to Dinesh Babu Yadav March 17, 2017 05:53 AM UTC

Hi Customer, 
 
Apologies for the delay caused. 
 
We have analyzed the reported issue “Group header gets cleared when underlying data is removed at runtime” with the given information at different possible scenarios in our sample. In the sample, we have removed the item from the underlying collection by a button click and on tapping the ListViewItem as like below code snippet. But we didn’t face any issue. For your reference, we have attached the sample and you can download the same from the below link. 
 
Code Example[C#] 
private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
{ 
  if (e.ItemData is GroupResult) 
     return; 
 
  viewModel.Contactsinfo.Remove(e.ItemData as Contacts); 
} 
 
private void RemoveItemInGroup_Clicked(object sender, EventArgs e) 
{ 
  var item = listView.DataSource.DisplayItems[1] as Contacts; 
 
  viewModel.Contactsinfo.Remove(item as Contacts); 
  DisplayAlert("Add Item in Group", "Added Item is " + item.Name + item.Group, "Ok"); 
} 
 
 
Could you please check with the above sample?. If the issue still reproduces at your end, please modify the above sample to reproduce the issue and update us with replication procedure or video link. So, that we could able to analyze the issue better and update you with appropriate solution. And also can you share the below details? 
 
  • Can you share the SfListView version? We have tested in latest version(v15.1.0.37).
  • In which ListView LayoutManager you have tested? We have tested in both Linear Layout and GridLayout.
  • Can you share the Xamarin Form version? We have tested in (v2.3.3.180).
  • If possible, can you please modify the sample which replicates the issue?
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 


Okay.
What if I am navigating between pages, and an operation in the last page should alter the list displayed in the first page?

I will explain my scenario:
I have 3 pages, say P1,P2 and P3  and corresponding view models.

Say, I navigate to P1 from page X. P1 displays the list (say list_1) after an API call. itemsource_1  is set to this API response.
This is the first time I am loading the list, grouping headers appear fine.

Now I go to P2 which displays list_2 whose itemsource is the list from API and if this list is non-empty, grouping headers are displayed fine.
Here I add a new item, which will be saved in the database, and I can add more items to this list, staying in P2.
As I save items into database, I get a response from API returning me the whole list.
In my viewmodel, I set itemsource_2  to the API response. 
The list is recreated with all the newly added items as well, but again without the grouping headers- remember the returned list is the same as the one returned in the first call.

I finalize the list in P2  and go to P3.
An operation in P3 makes sure the items in list_2 are emptied,this i take care of, using the messaging center of xamarin forms.
From ViewModel_2 , I message VIewModel_1  to make an API call and reload the list.
ViewModel_1 makes the same call it made, when navigating from X->P1.

So, the itemsource_1  is now contains all the items, i.e, including the ones that were in the list_2.
BUT,  when I navigate back, from P3 -> P2 -> P1 the grouping headers are not there in the list in P1.


An interesting point to note here is, if i alter the itemsource_1 or itemsource_2 manually, i.e , add new items to them without actually setting the itemource as an API response , the grouping headers are displayed fine.And yes, the setters of both itemsource_1  and itemsource_2  call the RaisePropertyChanged(), these both are ObservableCollections.

I wish I could show you a live demo, I can't share my code here, nor do I have time to recreate the issue.
I have already spent so much time trying to figure out the issue, 

Thanks for the sample you provided, but I could find it of no help.


DB Dinesh Babu Yadav Syncfusion Team March 20, 2017 12:45 PM UTC

Hi Customer, 
 
Apologies for the inconvenience caused. 
 
We have deeply analyzed the reported issue “GroupHeader gets cleared while navigating between the pages” with the provided information with all possible combinations and we regret to inform you that we are unable to reproduce the issue at our end. We have prepared a sample with the given information such as having three content pages with two ViewModels (Example: ViewModel1 and ViewModel2) and on navigating between the pages bindingcontext of the page is only updated for the Page 1 and Page 2 and in the page 2, we do some process like adding/ removing the items in the underlying collection as like your scenario. In the Page 3, we have cleared the list of ViewModel2 and assigned the updated items(underlying collection) in the ViewModel2 list to the ViewModel1’s collection and navigated back to the pages (Page3->Page2->Page1) and we didn’t face any issue like group headers gets cleared. Please note that the collection’s type is ObservableCollection in the ViewModel1 and ViewModel2. For your reference, we have attached the sample and you can download it from the below link.  
 
 
Note: 
If you have cleared the BindingContext of the Page like (Page.BindingContext = null) and then update the underlying collection to Page, the group headers won’t be appear and you need to reload the group descriptor because when the ItemsSource is set as null, we have internally cleared group descriptors.  
 
Could you please check with the above sample?. If the issue still reproduces at your end, please modify the above sample to reproduce the issue and update us with replication procedure or video link. So, that we could able to analyze the issue better and update you with appropriate solution. 
 
Regards, 
Dinesh Babu Yadav 
 



KL Katerina Lebedova December 8, 2017 01:36 PM UTC

Hi,

I'm experiencing the same issue like bg. I have SfListView on Page 1. I open detail of ListView item on Page 2. On Page 2 I can do some modifications on item, so when I return to Page 1 I need to refresh data. In OnAppearing of Page 1 I call Refresh (method in view model which reloads Items - ItemSource of ListView). And then the group headers disappear. I tried it with ObservableCollection, List, always calling OnPropertyChanged and nothing helped.


MK Muthu Kumaran Gnanavinayagam Syncfusion Team December 11, 2017 01:18 PM UTC

Hi Katerina, 
 
We have checked the reported query “GroupHeaders gets cleared while changing the ItemsSource of SfListView” from our side. We would like to let you know that GroupDescriptors will be cleared for the following use cases: 
  • Binding empty collection to ItemsSource property.
  • While set ItemsSource as ‘null’
  • While clearing the underlying collection.
 
Could you please check whether you have performed any of the above actions in your application due to which the GroupDescriptors gets cleared? 
 
Regards, 
G.Muthu Kumaran. 



UN Unknown Syncfusion Team January 7, 2018 11:49 PM UTC

Not sure if this is related, but if I use grouping and the column which I add to GroupColumnDescription is not the first defined column in SfDataGrid.Columns, but instead the my first column is one where I have set IsHidden="true", my group headers are not shown. If I move my grouping column to the beginning (=first column) everything works fine. (I do all my definitions in XAML)


SS Sivaraman Sivagurunathan Syncfusion Team January 8, 2018 11:14 AM UTC

Hi Daniel, 
 
Thanks for  using Syncfusion Support. 
 
We have checked your query and tried to reproduce the reported issue from our side, but the issue does not reproduce in our side. We have check this issue with all possible cases.  
 
In case, if you are using SfDataGrid.CaptionSummaryRow and have set ShowSummaryInRow as false, then the summary text will show below the associated columns. In that case, if you are hiding the grouped column, then the summary information will not be shown for that column. It is the behavior. If your scenario is different, then please let us known the below details: 
 
  • What are the settings that you have applied for SfDataGrid?
  • How are you grouping the columns? Are you using custom grouping?
  • Is it possible to share your XAML code for our reference to replicate the issue in our side?
 
We have attached the sample in which we tested for your reference and you can download the same from below link. If possible, you can modify the sample to reproduce the issue with clear replication.  
 
 
Regards, 
Sivaraman  



MA med achref ben ali February 12, 2018 02:28 PM UTC

i haven't found itemdisplay binding in sfpicker. 
Please help


SS Sivaraman Sivagurunathan Syncfusion Team February 13, 2018 11:41 AM UTC

Hi Med,

We have checked your requirement "Item display binding in sfpicker" from our side.

This can be achieved with SelectedItem API and In IOS there is an issue at SelectedItem binding. The fix for the reported SelectedItem binding will be available in our upcoming 2018 Volume 1 release.

Please let us know if you have any other query.

Regards,
Sivaraman
 


Loader.
Live Chat Icon For mobile
Up arrow icon