Rank 1
Iron
Hello,
I am customizing a listView, I am working with the grouping functionality and I want to know if it is possible to add an image in the ListViewGroupHeaderTemplate. In the same way, can you tell me if the way in which I add the GroupDescriptors is correct.
Here's my code:
<DataTemplate x:Key="ListViewGroupHeaderTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Grid.Column="0" Source="{Binding LogoStore}" HeightRequest="50" WidthRequest="50" Margin="5" />
<Label Margin="0,12,0,6" Text="{Binding NameStore}" Grid.Column="1" TextColor="Black" FontSize="Medium" HorizontalOptions="Start" />
<Label Margin="0,12,0,6" Text="{Binding AddressStore}" Grid.Column="1" TextColor="#EEEEEE" FontSize="Medium" HorizontalOptions="Start" />
</Grid>
</DataTemplate>
...
<telerik:RadListView.GroupDescriptors>
<telerik:ListViewPropertyGroupDescriptor PropertyName="NameStore" />
<telerik:ListViewPropertyGroupDescriptor PropertyName="AddressStore" />
<telerik:ListViewPropertyGroupDescriptor PropertyName="LogoStore" />
</telerik:RadListView.GroupDescriptors>
Greetings!!
1 Answer, 1 is accepted
Hello,
Let me get straight to the questions:
1) Add Image to the GroupHeader - this scenario can be achieved using a converter. The approach is shown in the attached project.
2) PropertyGroupDescriptors definition:
From the provided code it seems you want a multi level grouping.You group the ListView based on three properties from the data model. You cannot use Binding PropertyName in the group header template.
The solution is:
<Label Margin="0,12,0,6" Text="{Binding Key}" Grid.Column="1" TextColor="Black" FontSize="Medium" HorizontalOptions="Start" />"Key" is the grouping key, which is usually the property name that is being grouped on. The BindingContext of the GroupHeader is a complex object - GroupHeaderContext. All information is described here: https://docs.telerik.com/devtools/maui/controls/listview/grouping/customize-group-header
Download the attached file. I have left comments for a convenience. I hope it will be of help to get started with the ListView Grouping.
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.