I have worked through the grouping help docs to set up a ListView with grouping. I would like to provide a means to group the list elements as follows..
When the Group By Gateway switch is on the list is grouped as shown above. When the switch is off it shows the list without the group headers as shown below....
I have tried to meld the example code to meet my desired outcome by binding the switch to the following property on the view model.
private bool _isNodeIdGroupSwitchToggled = false;
public bool IsNodeIdGroupSwitchToggled
{
get { return _isNodeIdGroupSwitchToggled; }
set
{
if (SetProperty(ref _isNodeIdGroupSwitchToggled, value))
{
UpdateExistingGroupDescriptor(nameof(IsNodeIdGroupSwitchToggled), _isNodeIdGroupSwitchToggled);
}
}
}
private ObservableCollection<GroupDescriptorBase> _groupDescriptors;
public ObservableCollection<GroupDescriptorBase> GroupDescriptors
{
get { return _groupDescriptors; }
set { SetProperty(ref _groupDescriptors, value); }
}
private void UpdateExistingGroupDescriptor(string propertyToUpdate, bool IsOn)
{
if (GroupDescriptors == null)
return;
if (IsOn)
{
if (GroupDescriptors.Count == 0)
{
GroupDescriptors.Add(new ListViewPropertyGroupDescriptor()
{
PropertyName = "NodeName",
});
}
}
else
{
if (GroupDescriptors.Count != 0)
{
GroupDescriptors.Clear();
}
}
}
The GroupDescriptors collection gets updated as I expected, but the list view does not respond to the new GroupDescriptor when the switch is set to on. If I add the descriptor in the XAML directly it generates the first view, so I am pretty sure the xaml and bindings are set up correctly, it just does not seem to work when I add it on the property updated.
Here is the cobbled together XAML for the prototype...
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:appmodels ="clr-namespace:MauiControlLayout;assembly=MauiControlLayout"
x:Class="MauiControlLayout.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ListViewItemTemplate">
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<Grid Padding="28, 0, 0, 0" BackgroundColor="White">
<VerticalStackLayout>
<Label Text="{Binding ControllerModel.NodeId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
<Label Text="{Binding ControllerModel.ControllerId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
</VerticalStackLayout>
</Grid>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
<!-- >> listview-features-header-template-xaml -->
<DataTemplate x:Key="ListViewGroupHeaderTemplate">
<Grid BackgroundColor="#007A53">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="▸" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
<Setter Property="Text" Value="▾" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
</Grid>
</DataTemplate>
<!-- << listview-features-header-template-xaml -->
<DataTemplate x:Key="HeaderTemplate">
<StackLayout
x:Name="GatewayPageHeader"
Grid.Row="0"
BackgroundColor="White"
Padding="0, 0, 0, 3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<!-- Register Gateway Command -->
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center" Padding="2" FontSize="15" FontAttributes="Bold" Text="Available Gateways" TextColor="#007A53"/>
<HorizontalStackLayout
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="1"
HorizontalOptions="StartAndExpand">
<Label
x:Name="GroupByNodeIdEnabled"
VerticalOptions="Center"
VerticalTextAlignment="Center"
Text="Group By Gateway"
TextColor="#007A53" />
<Switch x:Name="GroupByNodeIdSwitch" Grid.Column="1" IsToggled="{Binding IsNodeIdGroupSwitchToggled}" Margin="5,0,0,0" />
</HorizontalStackLayout>
<!-- Settings Command -->
<Image Grid.Row="0" Grid.Column="2" Source="plus_small_green.png" Aspect="AspectFill" WidthRequest="15" HeightRequest="15" Margin="0"/>
<Frame Grid.Row="0" Grid.Column="2" WidthRequest="25" HeightRequest="25" BackgroundColor="Transparent" BorderColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding AddGatewayCommand}"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
</StackLayout>
</DataTemplate>
<!-- << listview-features-header-template-xaml -->
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView
x:Name="mainScrollView"
BackgroundColor="#007A53">
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<telerik:RadListView
x:Name="GatewayListView"
Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Controllers}"
SelectedItem="{Binding SelectedController, Mode=TwoWay}"
ItemTemplate="{StaticResource ListViewItemTemplate}"
GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
HeaderTemplate="{StaticResource HeaderTemplate}"
IsItemSwipeEnabled="True"
SwipeOffset="70, 0, 70, 0"
SwipeThreshold="10"
BackgroundColor="Transparent"
Margin="2">
<!--<telerik:RadListView.GroupDescriptors>
<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
</telerik:RadListView.GroupDescriptors>-->
</telerik:RadListView>
</Grid>
</ScrollView>
</ContentPage>
1 Answer, 1 is accepted
Hello Sean,
Please follow the exact example described in the documentation if you want to use the bindable group descriptors.
I checked the provided code and the property GroupDescriptors is missing from the RadListView definition:
This must be added inside your ListView definition:
<telerik:RadListView x:Name="listView"
Grid.Row="2"
GroupDescriptors="{Binding GroupDescriptors, Mode=OneWayToSource}"
ItemsSource="{Binding Items}">Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Thank you Didi, that was the ticket. Adding the declaration directly to the list worked.
Can you tell me what was wrong with the XAML declaration I was using?
<telerik:RadListView.GroupDescriptors>
<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
</telerik:RadListView.GroupDescriptors>
When using the property GroupDescriptors, you use the bindable option, so changing the descriptor runtime,
When using this approach:
<telerik:RadListView.GroupDescriptors>
<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
</telerik:RadListView.GroupDescriptors>you just add a descriptor to the GroupDescriptors collection and group the ListView by property NodeName.