Empty group in a grouped list view

[Gerard De Leon]

Is it possible for the SfListView to have a group that does not have any items on it? I know that the grouping of the items in the list is resolved based on a property name but I was wondering if there was a way to have a group but with no items on it.

[Dinesh Babu Yadav]

Hi Gerard,  

   

Thank you for using Syncfusion products.  

   

In SfListView, we have grouped the items based on the underlying data bind to ItemsSource property and this is the actual behavior of SfListView. So in order to achieve your requirement “Displaying group headers only without items”, we have an workaround in the sample level by handing the QueryItemSize event and with AutoFitMode as “Height”. By defining the ItemsSize as “0” and handling the event as e.Handled as “True” for the empty items, the group header is only visible. And by customizing the GroupHeaderTemplate, you can add the items by tapping on the customized group header template and after the item is added based on the content the size for the item is set. For your reference, we have attached the sample and you can download the same from the below link.  

   

Sample: http://www.syncfusion.com/downloads/support/forum/130674/ze/ListViewSample-457728324  

  

Please let us know if you require further assistance.  

   

Regards,  

Dinesh Babu Yadav 

 

[Jean-Luc]

Works with Android, but not with UWP. When an item is dragged and dropped in another group, the source group shows the dummy item in its full size. Any solution to fix the problem?  

Thank you.

JL

[Lakshmi Natarajan]

Hi Jean, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Issue with empty group in ListView” from our end. We would like to inform you that we could reproduce the reported scenario when drag and drop an item to another group. The basic idea of empty grouping is we create an empty item with size as zero. In this case, the dummy item is still maintained in the collection. So, we need to remove the dummy items from the collection once we populate items at run time. Please refer the following code snippets to overcome the reported scenario, 

 

In the Add button command, remove the dummy items from the collection. 

private void OnButtonTapped(object obj) 

{ 

    var groupresult = obj as GroupResult; 

 

    var random = new Random(); 

    var contact = new Contacts(CustomerNames[random.Next(0, CustomerNames.Count() - 1)], random.Next(100, 450).ToString() + "-" + random.Next(451, 962).ToString()); 

    contact.ContactImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + random.Next(0,28) + ".png"); 

    contact.Group = groupresult.Key.ToString(); 

    ContactsInfo.Add(contact); 

 

    foreach (var item in groupresult.Items) 

    { 

        if ((item as Contacts).ContactName == "") 

            ContactsInfo.Remove((Contacts)item); 

    } 

} 

 

We have attached the tested sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1306741194261063 

 

You can also refer to the following document regarding the same from the following link, 

KB link: https://www.syncfusion.com/kb/8491/how-to-display-group-header-without-items-and-add-items-in-the-group-at-run-time 

 

Please check the sample and let us know if you need further assisitance. 

 

Regards, 

Lakshmi Natarajan