How to sort items datetime with grouping in .NET MAUI ListView?

5 mins read

The .NET MAUI ListView supports Sorting and Grouping items based on the DateTime property. This guide provides two examples: grouping with sorting by year and grouping with sorting by month and year.

Grouping with sorting by Year

Sort and group the items using KeySelector based on returning the year value of the DateTime property.

The following code, sample explains how to sort the items along with the group header in ascending order based on the DateTime property.

XAML

Define the SfListView with the GroupHeaderTemplate.

<listView:SfListView x:Name="listView" ItemsSource="{Binding Items}" IsStickyGroupHeader="False" ItemSize="50">
            <listView:SfListView.GroupHeaderTemplate>
                <DataTemplate>
                    <Label Text= "{Binding Key}" BackgroundColor="Teal" FontSize="22" FontAttributes="Bold" TextColor="White"/>
                </DataTemplate>
            </listView:SfListView.GroupHeaderTemplate>
 </listView:SfListView>

public class Behavior:Behavior<ContentPage>
{
     #region Fields
     private Syncfusion.Maui.ListView.SfListView listView;
     #endregion
 
     #region Overrides
     protected override void OnAttachedTo(ContentPage bindable)
     {
       listView = bindable.FindByName<Syncfusion.Maui.ListView.SfListView>("listView");
       listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
       {
         PropertyName = "DateOfBirth",
         KeySelector = (object obj1) =>
         {
            var item = (obj1 as Contacts);
            return item.DateOfBirth.Year;
         },
       });
 
       this.listView.DataSource.SortDescriptors.Add(new SortDescriptor()
       {
          PropertyName = "DateOfBirth",
           Direction = ListSortDirection.Ascending
       });
       base.OnAttachedTo(bindable);
     }
    protected override void OnDetachingFrom(ContentPage bindable)
    {
        listView = null;
        base.OnDetachingFrom(bindable);
     }
     #endregion
}

Grouping with sorting by Month and Year

Create groups using KeySelector based on returning the year and month value of the DateTime property while sorting the items, and groups are sorted based on the year and months of the DateTime property by using Comparer.

class CustomGroupComparer : IComparer<GroupResult>, ISortDirection
{
    public CustomGroupComparer()
    {
        this.SortDirection = ListSortDirection.Ascending;
    }

    public ListSortDirection SortDirection { get; set; }

    public int Compare(GroupResult x, GroupResult y)
    {
        DateTime xValue = Convert.ToDateTime(x.Key);
        DateTime yValue = Convert.ToDateTime(y.Key);

        // Compare group results and return based on SortDirection
        if (xValue.CompareTo(yValue) > 0)
        {
            return SortDirection == ListSortDirection.Ascending ? 1 : -1;
        }
        else if (xValue.CompareTo(yValue) < 0)
        {
            return SortDirection == ListSortDirection.Ascending ? -1 : 1;
        }
        else
        {
            return 0;
        }
    }
}

public class Behavior:Behavior<ContentPage>
{
   #region Fields
    private Syncfusion.Maui.ListView.SfListView listView;  
   #endregion
 
   #region Overrides
     protected override void OnAttachedTo(ContentPage bindable)
     {
        listView = bindable.FindByName<Syncfusion.Maui.ListView.SfListView>("listView");
        listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
        {
          PropertyName = "DateOfBirth",
          KeySelector = (object obj1) =>
          {
             var item = (obj1 as Contacts);
             return item.DateOfBirth.Month + "/" + item.DateOfBirth.Year;
           },
            Comparer = new CustomGroupComparer()
        });
 
        listView.DataSource.SortDescriptors.Add(new SortDescriptor()
        {
           PropertyName = "DateOfBirth",
           Direction = ListSortDirection.Ascending
        });
       base.OnAttachedTo(bindable);
    }
   protected override void OnDetachingFrom(ContentPage bindable)
   {
     listView = null;
     base.OnDetachingFrom(bindable);
   }
  #endregion
}

Output

The following screenshots illustrate how to sort, and group based on year and month/year.

How to sort the items by datetime property along with Grouping in .Net Maui Listview

Download the complete sample on GitHub

Conclusion

I hope you enjoyed learning about how to sort items by DateTime with grouping in .NET MAUI ListView.

You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI ListView documentation to understand how to present and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI ListView and other .NET MAUI components.

Please let us know in comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to sort items datetime with grouping in .NET MAUI ListView?

Access denied