Custom selection of Listview using checkbox in GroupHeader
ListView supports selecting each group and items in the group like a checkBox selection by customizing the SfListView.GroupHeaderTemplate and the ItemTemplate respectively. The checkbox state will be update by using converter.
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
<syncfusion:SfListView>
<syncfusion:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="#d3d3d3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Key}" Grid.Column="1" VerticalTextAlignment="Center"/>
<Image Grid.Column="2" IsVisible="{Binding SelectionMode, Source={x:Reference listView}}"
HorizontalOptions="Center" VerticalOptions="Center"
Source="{Binding ., Converter={StaticResource GroupingSelectionConverter}, ConverterParameter={x:Reference listView}}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>
</syncfusion:SfListView>
</ContentPage>
The checkBox state in the GroupHeaderTemplate will be updated whenever items select and deselect by using converter.
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
return value;
GroupResult groupResult = value as GroupResult;
SfListView list = parameter as SfListView;
var items = new List<MusicInfo>(groupResult.Items.ToList<MusicInfo>());
if ((items.All(item => item.IsSelected == false)))
{
for (int i = 0; i < items.Count(); i++)
{
var item = items[i];
(item as MusicInfo).IsSelected = false;
list.SelectedItems.Remove(item);
}
return ImageSource.FromResource("CustomSelection.Images.NotSelected.png");
}
else if ((items.All(item => item.IsSelected == true)))
{
for (int i = 0; i < items.Count(); i++)
{
var item = items[i];
(item as MusicInfo).IsSelected = true;
list.SelectedItems.Add(item);
}
return ImageSource.FromResource("CustomSelection.Images.Selected.png");
}
else
return ImageSource.FromResource("CustomSelection.Images.Intermediate.png");
}
To select and deselect all the items of group by tap the checkbox in the group header, follow the code example.
using Syncfusion.ListView.XForms.Control.Helpers;
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var image = (sender as Image);
var groupResult = image.BindingContext as GroupResult;
if (groupResult == null)
return;
var items = groupResult.Items.ToList<MusicInfo>().ToList();
if ((items.All(listItem => listItem.IsSelected == true)))
{
for (int i = 0; i < items.Count(); i++)
{
var item = items[i];
(item as MusicInfo).IsSelected = false;
}
}
else if ((items.All(listItem => listItem.IsSelected == false)))
{
for (int i = 0; i < items.Count(); i++)
{
var item = items[i];
(item as MusicInfo).IsSelected = true;
}
}
this.RefreshGroupHeader(groupResult);
listView.RefreshView();
}
private void RefreshGroupHeader(GroupResult group)
{
foreach (var item in this.listView.GetVisualContainer().Children)
{
if (item.BindingContext == group)
{
item.BindingContext = null;
(item as GroupHeaderItem).Content.BindingContext = null;
}
}
}
To know more about grouping, you can refer our documentation here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent