Grouping by more than one property and displaying on group header

2 posts, 0 answers
  1. VPS
    VPS avatar
    30 posts
    Member since:
    Jan 2015

    Posted 11 Apr 2018 Link to this post

    I have a list of items that I would like to group by several property. To do that I must use DelegateGroupDescriptor instead of PropertyGroupDescriptor. That part does not seem to be complicated.

    hat I don't know how to achieve (and have found no examples on to do it) is to display information on the grouping properties on the group header. Is this possible? If so, how can it be done?

  2. Lance | Manager Technical Support
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 13 Apr 2018 Link to this post

    Hello VPS,

    You can use the GroupHeaderTemplate to define a cusotm UI for the group header. Note that the binding context of the header is the key value of the group as a display string, so you you just use an empty Binding definition. See the RadListView Grouping documentation for a full example, here's a high level snippet

                    <Label Text="{Binding }"/>

    If you need to convert it to a different display value, you can use an IValueConverter.  For example, if you were grouping a DateTime by month, you'd only get a numeric value for the group key. In this case, you can use a converter to get the month name from that integer:

    Here's the code for the above example:

                <portable:MonthIntToMonthNameConverter x:Key="IntToMonthNameConverter" />
            <portable:ViewModel />
        <telerikDataControls:RadListView x:Name="listView"
                          ItemsSource="{Binding Source}"
                    <Grid BackgroundColor="DodgerBlue"
                        <Label Text="{Binding Converter={StaticResource IntToMonthNameConverter}}"
                            TextColor="WhiteSmoke" />
                    <listView:ListViewTextCell Text="{Binding Sender}"
                                   Detail="{Binding Subject}" />

    namespace GroupingFeatures.Portable
        public partial class StartPage : ContentPage
            public StartPage()
                listView.GroupDescriptors.Add(new DelegateGroupDescriptor{KeyExtractor = MonthNumberExtractor});
            private static object MonthNumberExtractor(object arg)
                if(arg is Mail item)
                    return item.Sent.Month;
                return null;
        internal class MonthIntToMonthNameConverter : IValueConverter
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
                if (value is int monthIndex)
                    return DateTimeFormatInfo.CurrentInfo.GetAbbreviatedMonthName(monthIndex);
                return "other header";
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
                throw new NotImplementedException();
        public class Mail : NotifyPropertyChangedBase
            bool isUnread;
            public DateTime Sent { get; set; }
            public string Sender { get; set; }
            public string Subject { get; set; }
            public bool IsUnread
                get => isUnread;
                    if (this.isUnread == value) return;
                    isUnread = value;
        public class ViewModel
            public ViewModel()
                this.Source = new ObservableCollection<Mail> {
                    new Mail{ Sender = "Terry Tye",  Subject = "Re: Summer Vacation" , IsUnread = true, Sent = DateTime.Now.AddMonths(-1)},
                    new Mail{ Sender = "Felicia Keegan",  Subject = "Seminar Invitation", IsUnread = true, Sent = DateTime.Now.AddMonths(-2)},
                    new Mail{ Sender = "Jared Linton",  Subject = "Discount code", Sent = DateTime.Now.AddMonths(-2)},
                    new Mail{ Sender = "Mark Therese",  Subject = "Quick feedback", IsUnread = true, Sent = DateTime.Now.AddMonths(-3)},
                    new Mail{ Sender = "Elvina Randall",  Subject = "Happy Birthday!", Sent = DateTime.Now.AddMonths(-3)},
                    new Mail{ Sender = "Emilia Porter",  Subject = "Check the attachment", IsUnread = true, Sent = DateTime.Now.AddMonths(-3)},
                    new Mail{ Sender = "Jared Linton",  Subject = "Gillian Flynn", Sent = DateTime.Now.AddMonths(-2)},
                    new Mail{ Sender = "Felicia Keegan",  Subject = "Re: Summer Vacation", Sent = DateTime.Now.AddMonths(-1)},
                    new Mail{ Sender = "Felicia Keegan",  Subject = "Pictures", Sent = DateTime.Now.AddMonths(-1)},
            public ObservableCollection<Mail> Source { get; set; }

    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top