.NET MAUI DataForm 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.

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.

Download Free Trial

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

Define Groups in XAML and Add Editors to the Group

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

DataForm definition with Grouping applied:

• XAML

<telerik:RadDataForm x:Name="dataFormGrouping"
                     Grid.Row="1"
                     AutoGenerateItems="False">
    <telerik:RadDataForm.BindingContext>
        <local:EditorsViewModel/>
    </telerik:RadDataForm.BindingContext>
    <telerik:DataFormGroup HeaderText="Personal Information">
        <telerik:DataFormRadEntryEditor PropertyName="FirstName"/>
        <telerik:DataFormRadNumericEditor PropertyName="People" Minimum="1" Maximum="10"/>
        <telerik:DataFormRadComboBoxEditor PropertyName="Accommodation" HeaderText="Accomodation options"/>
    </telerik:DataFormGroup>
    <telerik:DataFormGroup HeaderText="Select Dates">
        <telerik:DataFormRadDatePickerEditor PropertyName="StartDate" HeaderText="From:"/>
        <telerik:DataFormRadDatePickerEditor PropertyName="EndDate" HeaderText="To:"/>
    </telerik:DataFormGroup>
    <telerik:DataFormGroup HeaderText="Additional Information" >
        <telerik:DataFormRadTimeSpanPickerEditor PropertyName="Duration" HeaderText="Duration"/>
        <telerik:DataFormRadCheckBoxEditor PropertyName="Visited" HeaderText="Visited before"/>
    </telerik:DataFormGroup>
</telerik:RadDataForm>

Note that local in the snippet above points to the namespace where the EditorsViewModel is defined.

And the business model used:

• C#

public class EditorsViewModel : 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.

1. Define the model for the RadDataForm:

• C#

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);
    }
}

2. Define the RadDataForm in XAML:

• XAML

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

Note that model in the snippet above points to the namespace where the GroupingModel is defined.

Define the Groups in XAML and GroupName in the Model

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

1. DataForm XAML definition with grouping applied:

• XAML

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

Note that model in the snippet above points to the namespace where the GroupingModel is defined.

2. Add the GroupName display attribute to the properties in the ViewModel:

• C#

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);
    }
}

For a runnable example with the DataForm Grouping scenarios, see the SDKBrowser Demo Application and go to DataForm > Grouping category.

Events

Telerik .NET MAUI DataForm exposes an event for group generation:

• GroupGenerated—Raised when the data form is about to generate a group of items automatically. This event can be used to customize the automatic generation of groups in the data form, when the Telerik.Maui.Controls.RadDataForm.AutoGenerateItems property is true and group is not specified explicitly for the given category in the Telerik.Maui.Controls.RadDataForm.Items collection. It's possible to customize, replace or discard the generated group, before is added to the DataForm. The GroupGenerated event handler receives two parameters:
  • sender argument which is of type object, but can be cast to the RadDataForm type.
  • DataFormGroupGeneratedEventArgs which has a reference to the GroupName(string)—Gets the unique name of the group to generate, Group(DataFormGroup)—Specifies the group, which is generated for the specified unique name. To skip the generation of the group, set this property to null.

• C#

this.dataForm.GroupGenerated += this.OnGroupGenerated;

And the handler:

• C#

private void OnGroupGenerated(object sender, DataFormGroupGeneratedEventArgs eventArgs)
{
    switch (eventArgs.GroupName)
    {
        case "Details":
            eventArgs.Group.HeaderText = "Additonal Details";
            break;
        case "Ignored":
            eventArgs.Group = null;
            break;
    }
}

For a runnable example with the DataForm CustomGenerate scenario, see the SDKBrowser Demo Application and go to DataForm > Getting Started category.