RadListView.GroupHeaderTemplate with a switch button

[Martin]

Hi,

I have a collection of items. They are grouped by one of the fields (DestinationName). For that behavior I'm using RadListView with a specified GroupHeaderTemplate. In every group set, each item has a switch button and a name. 

What I want to add is a switch button in the header of the group, which will change each of the inner switches once it's triggered. For example, if the outer switch is selected, all inner switches should be also marked as selected. Is that possible using that component?

Here's the code:

 <telerikDataControls:RadListView
                ItemsSource="{Binding Machines}"
                GroupDescriptors="{Binding GroupDescriptors, Mode=OneWayToSource}"  
                GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}">
                <telerikDataControls:RadListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="{AppThemeBinding Light=White, Dark={StaticResource EntryBlack}}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Text="&#x25B8;" Margin="8, 5, 0, 5" TextColor="{AppThemeBinding Light={StaticResource EntryBlack}, Dark=White}" FontSize="{StaticResource MediumFontSize}">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
                                        <Setter Property="Text" Value="&#x25BE;" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                            <Label 
                                Margin="0, 5, 0, 5" 
                                Text="{Binding }" 
                                Grid.Column="1" 
                                TextColor="{AppThemeBinding Light={StaticResource EntryBlack}, Dark=White}" 
                                FontSize="{StaticResource MediumFontSize}" 
                                HorizontalOptions="Start" />

                            <Switch 
                                Grid.Column="2" 
                                HorizontalOptions="End" 
                                VerticalOptions="Start" />
                        </Grid>
                    </DataTemplate>
                </telerikDataControls:RadListView.GroupHeaderTemplate>
                <telerikDataControls:RadListView.ItemTemplate>
                    <DataTemplate>
                        <telerikListView:ListViewTemplateCell>
                            <telerikListView:ListViewTemplateCell.View>
                                <Grid Margin="0" BackgroundColor="{AppThemeBinding Light=White, Dark={StaticResource EntryBlack}}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <Switch IsToggled="{Binding Selected}" HorizontalOptions="Start" VerticalOptions="Start" OnColor="#860327" ThumbColor="#cccccc" Margin="10, 0, 0, 0"/>
                                    <Label Grid.Column="1" Text="{Binding MachineName}" Style="{StaticResource ContentItemTextTransperantStyle}" FontSize="14" Margin="13, 0, 0, 0" />
                                </Grid>
                            </telerikListView:ListViewTemplateCell.View>
                        </telerikListView:ListViewTemplateCell>
                    </DataTemplate>
                </telerikDataControls:RadListView.ItemTemplate>
            </telerikDataControls:RadListView>

 

Thank you in advance!

[Didi]

Hi Martin,

The ListView Group Header Template documentation explains what the BindingContext of the Header is.

the object you get is a GroupHeaderContext object. Here's a screenshot of the properties via IntelliSense:

The Key is the LINQ group Key that you get when grouping with Linq. This is exactly the same as if you did the grouping manually -> var groups = Cities.GroupBy(q => q.Name);

You don't have a direct reference to a single item because the group itself is a collection of items. These items are available in the GroupHeaderContext.Items property.

Option for changing the child items switch value from GroupHeaderTemplate using Toggled event:

private void Switch_Toggled(object sender, ToggledEventArgs e)
{

    if (sender is Switch cb && cb.BindingContext is GroupHeaderContext context)
    {
        foreach (var item in context.Items)
        {
            if (e.Value == true)
            {
                //implement your logic
            }
            else
            {
                //implement your logic
            }
        }
    }
}


Of course, you can find a different solution how to achieve this, still, keep in mind that the BindingContext is a GroupHeaderContext object.