How to display group header without items and add items in the group at run-time?

2 mins read

SfListView allows you to display group headers without items at initially using QueryItemSize event. It is achieved by defining the dummy items like setting empty string to data of underlying collection. Based on the dummy items, set the ItemSize as ‘0’ and Handled the event in the QueryItemSize event and able to add the items at runtime by using the group header.

The following code snippet explains how to display group headers initially without items and adding items at runtime by using the group header.

XAML

<ContentPage xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable">
  <ContentPage.Content>
    <listView:SfListView x:Name="listView" ItemsSource="{Binding contactsinfo}">
      <listView:SfListView.GroupHeaderTemplate>
        <DataTemplate>
          <Grid BackgroundColor="Teal">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Text="{Binding Key}" FontSize="22" TextColor="White"
                   FontAttributes="Bold" VerticalOptions="Center" Margin="10,0,0,0" />
            <StackLayout Grid.Column="1" HorizontalOptions="End" VerticalOptions="End">
              <Image Source="Add.png" HeightRequest="50" WidthRequest="40"
                     BindingContextChanged="Image_BindingContextChanged"/>
            </StackLayout>
          </Grid>
        </DataTemplate>
      </listView:SfListView.GroupHeaderTemplate>
    </listView:SfListView>
  </ContentPage.Content>
</ContentPage>

public partial class GroupingPage : ContentPage
{
   Image image;
 
   public GroupingPage()
   {
       InitializeComponent();
       listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
       {
           PropertyName = "Group",
           KeySelector = (object obj1) =>
           {
               var item = (obj1 as Contacts);
               return item.Group;
           },
       });
       listView.QueryItemSize += ListView_QueryItemSize;
   }
 
   private void ListView_QueryItemSize(object sender, QueryItemSizeEventArgs e)
   {
       if (e.ItemType == ItemType.Record && (e.ItemData as Contacts).ContactName == "")
       {
           e.ItemSize = 0;
           e.Handled = true;
       }
   }
 
   private void Image_BindingContextChanged(object sender, EventArgs e)
   {
       image = sender as Image;
       (image.Parent as View).GestureRecognizers.Add(new TapGestureRecognizer() { Command = new Command<object[]>(CreateItem), CommandParameter = new object[] { image.BindingContext as GroupResult } });
   }
 
   private void CreateItem(object[] groupobject)
   {
       var groupresult = groupobject[0] as GroupResult;
       var random = new Random();
       var contact = new Contacts(ViewModel.CustomerNames[random.Next(0, ViewModel.CustomerNames.Count() - 1)], random.Next(100, 450).ToString() + "-" + random.Next(451, 962).ToString());
       contact.Group = groupresult.Key.ToString();
       ViewModel.contactsinfo.Add(contact);
   }
}

The following screenshot shows to displaying the empty groups without items and added items at runtime by tapping the add icon in the group header.

How to display group header without items and add items in the group at run-time?

Access denied