DxFormLayoutGroup Class

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

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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:

razor

<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>

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.

razor

<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>

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:

Razor
CSS

razor

<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 class="photo-container"></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; } = "[email protected]";
    string Position { get; set; } = "Sales Represantative";
    DateTime HireDate { get; set; } = new DateTime(2022, 5, 1);
}

css

.photo-container {
    width: 119px;
    height: 126px; 
    border: solid rgba(0,0,0,0.23);
}

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

CssClassAssigns a CSS class to the component.CaptionTemplateSpecifies the template used to display the group’s caption.CaptionCssClassAssigns a CSS class to the layout group’s caption.HeaderContentTemplateSpecifies the template used to display the group’s header content.HeaderTemplateSpecifies the template used to display the group header.HeaderCssClassAssigns a CSS class to the group header.HeaderIconCssClassSpecifies the CSS class of a Form Layout group header’s icon.HeaderIconUrlSpecifies 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.

razor

<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>

Run Demo: Form Layout - Groups

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object ComponentBase DxComponentBase FormLayoutItemBase FormLayoutGroupBase DxFormLayoutGroup