Grouping the editors in .NET MAUI DataForm (SfDataForm)

12 Jun 202415 minutes to read

The .NET MAUI DataForm supports the grouping of the editors, which are relevant to each other. Expand or collapse the group by tapping the group item.

Grouping is achieved by defining the Display attribute or by handling the GenerateDataFormItem event.

Using attributes

public class ContactInfo
{
    [Display(GroupName = "Name")]
    public string FirstName { get; set; }

    [Display(GroupName = "Name")]
    public string MiddleName { get; set; }

    [Display(GroupName = "Name")]
    public string LastName { get; set; }    
}

Using event

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.FieldName == "FirstName" || e.DataFormItem.FieldName == "MiddleName" || e.DataFormItem.FieldName == "LastName")
        {
            e.DataFormItem.GroupName = "Name";
        }
    }
}

Grouping editors in .NET MAUI DataForm.

Changing editors order in the group

Using attribute

Display attribute

The order of the editors in the group is changed by using attributes. Set the order of the data form items in the group by using the Order property along with the GroupName property in the Display attribute.

public class ContactInfo
{
    [Display(GroupName = "Name", Order = 0)]
    public string FirstName { get; set; }

    [Display(GroupName = "Name", Order = 2)]
    public string LastName { get; set; }

    [Display(GroupName = "Name", Order = 1)]
    public string MiddleName { get; set; }
}

DataForm display options attribute

The order of the editors in the group is also changed by using the RowOrder property of the DataFormDisplayOptions attribute.

public class ContactInfo
{
    [Display(GroupName = "Details")]
    [DataFormDisplayOptions(RowOrder = 0)]
    public string FirstName { get; set; }

    [Display(GroupName = "Details")]
    [DataFormDisplayOptions(RowOrder = 2)]
    public string LastName { get; set; }

    [Display(GroupName = "Details")]
    [DataFormDisplayOptions(RowOrder = 1)]
    public string MiddleName { get; set; }
}

Using event

The order of the editors in the group can also be changed by handling the GenerateDataFormItem event using the RowOrder property of a DataFormItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.FieldName == "FirstName")
        {
            e.DataFormItem.RowOrder = 0;
        }
        else if (e.DataFormItem.FieldName == "LastName")
        {
            e.DataFormItem.RowOrder = 2;
        }
        else if (e.DataFormItem.FieldName == "MiddleName")
        {
            e.DataFormItem.RowOrder = 1;
        }
    }
}

Changing editors order in .NET MAUI DataForm.

Changing the editors order of the group in grid rows

The order of the group’s editors in a grid row can be changed within a row by using the RowOrder and ItemsOrderInRow properties and DataFormDisplayOptions attribute and by handling the GenerateDataFormItem event.

public class ContactInfo
{
    [Display(GroupName = "Name")]
    [DataFormDisplayOptions(RowOrder = 0, ItemsOrderInRow = 0)]
    public string FirstName { get; set; }

    [Display(GroupName = "Name")]
    [DataFormDisplayOptions(RowOrder = 0, ItemsOrderInRow = 2)]
    public string LastName { get; set; }

    [Display(GroupName = "Name")]
    [DataFormDisplayOptions(RowOrder = 0, ItemsOrderInRow = 1)]
    public string MiddleName { get; set; }
}
this.dataForm.DataObject = new ContactInfo();
this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.ColumnCount = 3;
        }
    }
}

Changing order in grid rows in .NET MAUI DataForm.

Changing the group name for the editors

The GroupName for the group can be changed in the GenerateDataFormItem event.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.GroupName == "Name")
        {
            e.DataFormItem.GroupName = "Name Group";
        }
    }
}

Changing the layout for the group

The linear or grid layout for the particular group can be loaded by handling the GenerateDataFormItem event.
By setting the ColumnCount property in the data form, non-grouped items only will be arranged in the grid layout. To load the grid layout, set the ColumnCount for the DataFormGroupItem.

public class ContactInfo
{
    [Display(GroupName = "Name")]
    public string FirstName { get; set; }

    [Display(GroupName = "Name")]
    public string LastName { get; set; }

    [Display(GroupName = "Name")]
    public string MiddleName { get; set; }

    [Display(GroupName = "Details")]
    public string Address { get; set; }

    [Display(GroupName = "Details")]
    public double PhoneNumber { get; set; }
}
this.dataForm.DataObject = new ContactInfo();
this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.ColumnCount = 3;
        }
        else if (e.DataFormGroupItem.Name == "Details")
        {
            e.DataFormGroupItem.ColumnCount = 2;
        }
    }
}

changing group editors layout in .NET MAUI DataForm.

Loading the group in collapsed state

By default, the group will be loaded in the expanded state. Collapse the group by setting the IsExpanded property of the DataFormGroupItem class to false.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.IsExpanded = false;
        }
    }
}

Loading group in collapsed state in .NET MAUI DataForm.

Restricting the group expanding and collapsing

The group being expanded or collapsed can be restricted by setting the AllowExpandCollapse to false in the DataFormGroupItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.AllowExpandCollapse = false;
        }
    }
}

Group expanding collapsing in .NET MAUI DataForm.

Changing the group editors visibility

The data form group visibility can be changed by using the IsVisible property of the DataFormGroupItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.IsVisible = false;
        }
    }
}

Here, the Name group will be hidden.
Group editors visibility in .NET MAUI DataForm.

Changing the group header background

The data form group header background can be changed by using the HeaderBackground property of the DataFormGroupItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.HeaderBackground = Brush.Violet;
        }
    }
}

Header background in .NET MAUI DataForm.

Changing the group header text style

The data form group header text style can be changed by using the HeaderTextStyle property of the DataFormGroupItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.HeaderTextStyle = new DataFormTextStyle
            {
                TextColor = Colors.Violet,
                FontSize = 12,
                FontAttributes = FontAttributes.Italic,
            };
        }
    }
}

Header text style in .NET MAUI DataForm.

Changing the padding for group headers and editors

The distance between editors and the data form’s borders or group headers can be changed by using the ItemsPadding property of the DataFormGroupItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormGroupItem != null)
    {
        if (e.DataFormGroupItem.Name == "Name")
        {
            e.DataFormGroupItem.ItemsPadding = 20;
        }
    }
}

Group header padding in .NET MAUI DataForm.

NOTE

View sample in GitHub

Group header customization

The group header of the dataform can be customized by using the GroupHeaderTemplate property of the SfDataForm.

<dataForm:SfDataForm x:Name="dataForm" 
             LayoutType="Default"
             Margin="10">
    <dataForm:SfDataForm.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text= "{Binding Name}"
           FontSize="16"
           Padding="10"
           BackgroundColor="MediumPurple"
           TextColor="White"/>
        </DataTemplate>
    </dataForm:SfDataForm.GroupHeaderTemplate>
</dataForm:SfDataForm>

NOTE