Grouping

Telerik UI for .NET MAUI DataForm supports grouping. You can define the groups directly in the DataForm or using the GroupName DisplayAttribute in the business model.

Telerik Maui Ninja image

The Grouping is part of Telerik UI for .NET MAUI, the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.

The GroupName(string) property is the identifier for each group.

Define groups in XAML and add editors to the group

You can easily organize the Editors in groups using the DataFormGroup(Telerik.Maui.controls.DataFormItem).

DataForm definition with Grouping applied:

And the business model used:

public class EditorsModel : NotifyPropertyChangedBase
{
    private string name;
    private DateTime? startDate;
    private DateTime? endDate;
    private double? people;
    private bool? visited;
    private TimeSpan? duration;
    private EnumValue accommodation = EnumValue.Apartment;
    public enum EnumValue
    {
        SingleRoom,
        Apartment,
        House
    }

    [Required]
    [Display(Name = "Select accomodation")]
    public EnumValue Accommodation
    {
        get
        {
            return this.accommodation;
        }
        set
        {
            if (this.accommodation != value)
            {
                this.accommodation = value;
                this.OnPropertyChanged();
            }
        }
    }

    [Required]
    [Display(Name = "First Name")]
    public string FirstName
    {
        get => this.name;
        set => this.UpdateValue(ref this.name, value);
    }

    [Required]
    [Display(Name = "Start date")]
    public DateTime? StartDate
    {
        get => this.startDate;
        set => this.UpdateValue(ref this.startDate, value);
    }

    [Required]
    [Display(Name = "End Date")]
    public DateTime? EndDate
    {
        get => this.endDate;
        set => this.UpdateValue(ref this.endDate, value);
    }

    [Required]
    [Display(Name = "Number of People")]
    [Range(1, 10)]
    public double? People
    {
        get => this.people;
        set => this.UpdateValue(ref this.people, value);
    }

    [Display(Name = "Visited before")]
    public bool? Visited
    {
        get => this.visited;
        set => this.UpdateValue(ref this.visited, value);
    }

    [Display(Name = "Duration")]
    public TimeSpan? Duration
    {
        get => this.duration;
        set => this.UpdateValue(ref this.duration, value);
    }
}

Use GroupName Display Attribute in the model

Apply grouping using the GroupName display attribute. More information about this can be found in the Microsoft documentation.

Example with GroupName display attribute applied in the business model. The model is used for RadDataForm:

public class GroupingModel : NotifyPropertyChangedBase
{
    private string name;
    private DateTime? startDate;
    private DateTime? endDate;
    private double? people;
    private bool? visited;
    private TimeSpan? duration;
    private EnumValue accommodation = EnumValue.Apartment;
    public enum EnumValue
    {
        SingleRoom,
        Apartment,
        House
    }

    [Required]
    [Display(Name = "Select accomodation", GroupName = "Personal Information")]
    public EnumValue Accommodation
    {
        get
        {
            return this.accommodation;
        }
        set
        {
            if (this.accommodation != value)
            {
                this.accommodation = value;
                this.OnPropertyChanged();
            }
        }
    }

    [Required]
    [Display(Name = "First Name", GroupName="Personal Information")]
    public string FirstName
    {
        get => this.name;
        set => this.UpdateValue(ref this.name, value);
    }

    [Required]
    [Display(Name = "Start date", GroupName="Select Dates")]
    public DateTime? StartDate
    {
        get => this.startDate;
        set => this.UpdateValue(ref this.startDate, value);
    }

    [Required]
    [Display(Name = "End Date", GroupName = "Select Dates")]
    public DateTime? EndDate
    {
        get => this.endDate;
        set => this.UpdateValue(ref this.endDate, value);
    }

    [Required]
    [Display(Name = "Number of People", GroupName = "Personal Information")]
    public double? People
    {
        get => this.people;
        set => this.UpdateValue(ref this.people, value);
    }


    [Display(Name = "Visited before", GroupName = "Additional Information")]
    public bool? Visited
    {
        get => this.visited;
        set => this.UpdateValue(ref this.visited, value);
    }


    [Display(Name = "Duration", GroupName = "Additional Information")]
    public TimeSpan? Duration
    {
        get => this.duration;
        set => this.UpdateValue(ref this.duration, value);
    }
}

And the DataForm definition in XAML:

<telerik:RadDataForm x:Name="dataFormGroupingFromModel" 
                     Grid.Row="3">
    <telerik:RadDataForm.BindingContext>
        <model:GroupingModel/>
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

Define the groups in XAML and GroupName in the model

You acan apply the groups in the XAML and set the GroupName property. Then inside the model add the GroupName attribute to the concrete proeprty.

DataForm XAML definition with grouping applied:

<telerik:RadDataForm x:Name="dataFormMixGrouping" 
                     Grid.Row="5">
    <telerik:RadDataForm.BindingContext>
        <model:GroupModel/>
    </telerik:RadDataForm.BindingContext>
    <telerik:DataFormGroup GroupName="Additional Information"/>
</telerik:RadDataForm>

GroupName defined to the properties in the business model:

public class GroupModel : NotifyPropertyChangedBase
{
    private string name;
    private DateTime? startDate;
    private DateTime? endDate;
    private double? people;
    private bool? visited;
    private TimeSpan? duration;

    [Required]
    [Display(Name = "First Name")]
    public string FirstName
    {
        get => this.name;
        set => this.UpdateValue(ref this.name, value);
    }

    [Required]
    [Display(Name = "Start date")]
    public DateTime? StartDate
    {
        get => this.startDate;
        set => this.UpdateValue(ref this.startDate, value);
    }

    [Required]
    [Display(Name = "End Date")]
    public DateTime? EndDate
    {
        get => this.endDate;
        set => this.UpdateValue(ref this.endDate, value);
    }

    [Required]
    [Display(Name = "Number of People", GroupName = "Additional Information")]
    public double? People
    {
        get => this.people;
        set => this.UpdateValue(ref this.people, value);
    }


    [Display(Name = "Visited before", GroupName = "Additional Information")]
    public bool? Visited
    {
        get => this.visited;
        set => this.UpdateValue(ref this.visited, value);
    }


    [Display(Name = "Duration", GroupName = "Additional Information")]
    public TimeSpan? Duration
    {
        get => this.duration;
        set => this.UpdateValue(ref this.duration, value);
    }
}

See Also

In this article
Not finding the help you need?