.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.
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:
<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>
And the business model used:
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. 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 can apply the groups in the XAML and set the GroupName property. Then inside the model add the GroupName attribute to the concrete property.
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);
}
}
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 theTelerik.Maui.Controls.RadDataForm.AutoGenerateItemsproperty istrueand group is not specified explicitly for the given category in theTelerik.Maui.Controls.RadDataForm.Itemscollection. It's possible to customize, replace or discard the generated group, before is added to the dataform. TheGroupGeneratedevent handler receives two parameters:-
senderargument which is of type object, but can be cast to theRadDataFormtype. -
DataFormGroupGeneratedEventArgswhich has a reference to theGroupName(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.
-
this.dataForm.GroupGenerated += this.OnGroupGenerated;
And the handler:
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 CustomGenerate example refer to the DataForm/GettingStarted Category of the SDKBrowser Demo Application.