Skip to main content

DxFormLayoutGroup Class

Specifies a container for layout items, tabs, and other layout groups.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxFormLayoutGroup :
    FormLayoutGroupBase,
    IFormLayoutLevel

Remarks

Use the DxFormLayoutGroup class to organize layout elements.

Create a Group

To specify a group caption, use the Caption property. Use the CaptionPosition property to place the caption of a nested item above it (Vertical) or at its left border (Horizontal). You can use ColSpanXX properties to specify the group width. The following example arranges items into groups with captions:

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6">
        <DxFormLayoutItem Caption="First Name:">
            @* ... *@
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Work Information" ColSpanMd="6">
        <DxFormLayoutItem Caption="Position:">
           @* ... *@
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

Form Layout Group Example

Expand a Group

Use the Expanded property to expand and collapse groups in code. Users can click expand buttons to do the same in UI. Set the ExpandButtonDisplayMode property to Start or End to show these buttons. Handle the ExpandedChanged event to react to group state changes.

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" 
                       Expanded="false"
                       ExpandButtonDisplayMode="GroupExpandButtonDisplayMode.Start"
                       ColSpanMd="6">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Work Information" 
                       ExpandButtonDisplayMode="GroupExpandButtonDisplayMode.Start"
                       ColSpanMd="6">
        <DxFormLayoutItem Caption="Department:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

Expanded group

View Example: Collapsible groups

Customize Appearance

Set the Decoration property to FormLayoutGroupDecoration.None to disable card decorations for groups.

The following code snippet combines items into a group and disables its card decoration to imitate row-span behavior:

<DxFormLayout ItemCaptionAlignment="ItemCaptionAlignment.All">
    <DxFormLayoutGroup Decoration="FormLayoutGroupDecoration.None" ColSpanMd="6">
        <DxFormLayoutItem Caption="Contact Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@Name" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="12">
            <DxDateEdit @bind-Date="@BirthDate" Mask="@DateTimeMask.ShortDate" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Email:" ColSpanMd="12">
            <DxTextBox @bind-Text="@Email" />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutItem ColSpanMd="6" Caption="Photo:">
        <div style="width:119px;height:126px; border: solid rgba(0,0,0,0.23);"></div>
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Position:" ColSpanMd="6">
        <DxTextBox @bind-Text="@Position" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
        <DxDateEdit @bind-Date="@HireDate" />
    </DxFormLayoutItem>
</DxFormLayout>

@code {
string Name { get; set; } = "Nancy Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Email { get; set; } = "NancyDavolio@sample.com";
    string Position { get; set; } = "Sales Represantative";
    DateTime HireDate { get; set; } = new DateTime(2022, 5, 1);
}

formlayoutgroup-imitate-rowspan

You can also use the following group members to modify content and apply custom styles:

CssClass
Specifies the name of the component’s CSS class.
CaptionTemplate
Specifies the template used to display the group’s caption.
CaptionCssClass
Specifies the name of the CSS class applied to the layout group’s caption.
HeaderContentTemplate
Specifies the template used to display the group’s header content.
HeaderTemplate
Specifies the template used to display the group header.
HeaderCssClass
Specifies the name of the CSS class applied to the group header.
HeaderIconCssClass
Specifies the CSS class of a Form Layout group header’s icon.
HeaderIconUrl
Specifies the URL of the group header’s icon.

Enabled and Read-Only Modes

You can disable auto-generated editors within the the group or mark them as read-only.

<DxFormLayout Data="forecast">
    <DxFormLayoutGroup Caption="Current Date" ColSpanMd="6" ReadOnly="true">
        <DxFormLayoutItem Caption="Date" Field="@nameof(WeatherForecast.Date)" ReadOnly="true" />
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Weather Forecast" ColSpanMd="6" Enabled="false">
        <DxFormLayoutItem Caption="Temperature" Field="@nameof(WeatherForecast.TemperatureC)" Enabled="false" />
        <DxFormLayoutItem Caption="Precipitation" Field="@nameof(WeatherForecast.Precipitation)" />
    </DxFormLayoutGroup>
</DxFormLayout>

Enabled and ReadOnly Groups

Run Demo: Form Layout - Groups

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
See Also