Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxFormLayout Class

A control container that allows you to create responsive data edit forms.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxFormLayout :
    DxComponentBase,
    IFormLayout,
    IFormLayoutLevel,
    ISizeModeAccessor,
    IRequireSelfCascading

#Remarks

The DevExpress Form Layout for Blazor (<DxFormLayout>) consists of data editors and allows you to create responsive edit forms that are automatically arranged.

Blazor Form Layout

Run Demo Watch Video

#Add a Form Layout to a Project

Follow the steps below to add the Form Layout component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxFormLayout></DxFormLayout> markup to a .razor file.
  3. Add layout elements to the component’s markup.
  4. Bind the Form Layout component to data.

#.NET 8 and .NET 9 Specifics

In static render mode, groups cannot be expanded or collapsed. Tabbed groups are not supported. If you need interactivity, enable interactive render mode. Refer to the following topic for more details: Enable Interactive Render Mode.

#Layout Structure

The Form Layout component can contain only items, groups, and tabs. Place all custom content between the <DxFormLayoutItem>...</DxFormLayoutItem> tags.

Note

Form Layout items should not contain layout hierarchy objects (groups, tabs, and other items).

The component uses a responsive grid system based on the CSS flexible box layout to render items. Each layout item can occupy between 1 and 12 columns. This value can be defined separately for six named container sizes as listed below:

Container Size Extra Small Small Medium Large Extra Large Extra Extra Large
Width Any ≥576px ≥768px ≥992px ≥1200px ≥1400px
Property ColSpanXs ColSpanSm ColSpanMd ColSpanLg ColSpanXl ColSpanXxl
Razor
<DxFormLayout>
    @*For containers up to 768px (medium), the item occupies 12 columns*@
    @*For containers from 768px (medium) to 1200px (extra large), the item occupies 6 columns*@
    @*For containers that exceed 1200px (extra large), the item occupies 4 columns*@
    <DxFormLayoutItem Caption="Name" ColSpanXl="4" ColSpanMd="6">
        <DxTextBox />
    </DxFormLayoutItem>
</DxFormLayout>

An element moves to the next row if the current row does not have enough space. To explicitly indicate that the element should occupy a new row, use the BeginRow property.

Razor
<DxFormLayout>
    @* ... *@
    <DxFormLayoutItem Caption="Postal/ZIP Code" BeginRow="true" />
</DxFormLayout>

Run Demo: Form Layout - Item Wrapping

The common settings for all layout elements are listed below:

BeginRow
Specifies whether a Form Layout group, tab pages container, or item starts a new row.
Caption
Specifies a Form Layout group, tab, or item caption.
CaptionPosition
Specifies an item’s Caption position.
Visible
Specifies whether a Form Layout item, group, tab pages container, or tab is visible.
CssClass
Assign a CSS class to the component.
ReadOnly
Specifies whether the Form Layout element (item, group, tab pages container, or tab) activates read-only mode for nested auto-generated editors.
Enabled
Specifies whether the auto-generated editors in the Form Layout are enabled.

View Example: How to change DxFormLayout's item and group visibility

#Items

A layout item (DxFormLayoutItem) is a container that arranges nested Blazor components. An item can include a Caption displayed next to the corresponding component.

FormLayout Layout Items

Razor
<DxFormLayout>
    <DxFormLayoutItem Caption="Contact Name:">
        <DxTextBox @bind-Text="@Name" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Birth Date:">
        <DxDateEdit @bind-Date="@BirthDate" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="E-mail:">
        <DxTextBox @bind-Text=@Email />
    </DxFormLayoutItem>
</DxFormLayout>

@code {
    string Name { get; set; } = "Nancy Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Email { get; set; } = "NancyDavolio@sample.com";
}

The item-related settings are listed below:

DxFormLayoutItem.Field
Specifies a data source field assigned to the current layout item.
DxFormLayout.ItemCaptionAlignment
Specifies how caption paddings are calculated in the Form Layout component.
DxFormLayoutItem.CaptionCssClass
Assign a CSS class to the layout item’s caption.

#Groups

A layout group (DxFormLayoutGroup) is a built-in container that allows you to combine layout items, tabs, and other layout groups into panels.

FormLayout Groups

Razor
<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@FirstName" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@LastName" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="12">
            <DxDateEdit @bind-Date="@BirthDate" />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    @* ... *@
</DxFormLayout>

Run Demo: Form Layout - Groups View Example: Collapsible groups

#Tabs

All tabs of the Form Layout are stored in the DxFormLayoutTabPages component. The DxFormLayoutTabPage component implements a single layout tab that serves as a container for layout items and groups. You can customize individual tabs. Refer to the following class description for more information: DxFormLayoutTabPage.

FormLayout Tabs

To specify the active tab, use the ActiveTabIndex property:

Razor
<DxFormLayout>
    <DxFormLayoutTabPages @bind-ActiveTabIndex="@Index">
        @* ... *@
        <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:">
                <DxTextBox @bind-Text="@Position" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                <DxDateEdit @bind-Date="@HireDate" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:">
                <DxTextBox @bind-Text="@Notes" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

@code {
    int Index { get; set; } = 1;
}
#Render Mode

Use the RenderMode property to specify how the DxFormLayoutTabPages component loads tab content. The following options are available:

Default
The component initially loads only content of an active tab. When a user selects another tab, its content replaces the content of the previously active tab in the DOM. Note the component does not keep the tab’s state.
AllTabs
The component renders the content of all tabs in the DOM and maintains the tab’s state. This mode speeds up navigation between tabs, but can increase memory consumption.
OnDemand
The component initially loads content of an active tab, then loads the content of other tabs when a user selects them. In this case, the component maintains the tab’s state. Use this mode to improve performance of your application.

The following code snippet demonstrates the OnDemand mode implementation:

razor
<DxFormLayout CssClass="w-100">
    <DxFormLayoutTabPages @bind-ActiveTabIndex="@ActiveTabIndex"
                          RenderMode="TabsRenderMode.OnDemand">
        <DxFormLayoutTabPage Caption="Personal Information">
            <DxFormLayoutItem Caption="First Name:">
                <DxTextBox @bind-Text="@FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                <DxTextBox @bind-Text="@LastName" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
         <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:">
                <DxTextBox @bind-Text="@Position" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                <DxDateEdit @bind-Date="@HireDate" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Additional information">
            <DxFormLayoutItem Caption="Birth Date:">
                <DxDateEdit @bind-Date="@BirthDate" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:">
                <DxTextBox @bind-Text="@Notes" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

@code {
    int ActiveTabIndex { get; set; } = 1;
    string FirstName { get; set; } = "Nancy";
    string LastName { get; set; } = "Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Position { get; set; } = "Sales Representative";
    DateTime HireDate { get; set; } = DateTime.Now.AddYears(-20);
    string Notes { get; set; } = "Education includes a BA in psychology.";
}
#Scroll Mode

Specify the ScrollMode property to define how users navigate between tabs when they do not fit into the container by width.

The following code snippet switches tabs to Swipe navigation mode:

Razor
<DxFormLayout CssClass="w-100">
    <DxFormLayoutTabPages ScrollMode="TabsScrollMode.Swipe">
        <DxFormLayoutTabPage Caption="Personal Information">
            <DxFormLayoutItem Caption="Contact Name:">
                <DxTextBox Text="Name" />
            </DxFormLayoutItem>
            @* ... *@
        </DxFormLayoutTabPage>
        @* ... *@
    </DxFormLayoutTabPages>
</DxFormLayout>

Run Demo: Form Layout - Tabbed Groups

#Bind to Data

<DxFormLayout> allows you to display and edit data from data source fields. Use the Data property to bind the control to a data source and specify target fields. To map a data source field to a layout item, use the item’s Field property.

Once a layout item is bound to a data source field, <DxFormLayout> tries to determine the corresponding data field type. If the component can determine the type, the corresponding editor appears in the layout item.

Field Data Type

Editor

Boolean

CheckBox

Date

Date Edit

Numeric

Spin Edit

String

Text Box

Other

Text Box

When a user changes a layout item value, handle the ItemUpdating event to post all changes to the data source. When you use a custom editor in the Form Layout item, the component is not notified when a user changes data within an item’s custom editor. To inform the Form Layout about the change, call the OnChanged(Object) method when an editor value changes. To access a new editor value, use the Value property.

<DxFormLayout Data="@editFormData"
@* ... *@
              ItemUpdating="@((pair) => OnItemUpdating(pair.Key, pair.Value))"
              CssClass="w-100">
    <DxFormLayoutItem Field="@nameof(FormDataItem.Name)"
                      Caption="Contact Name:" />
    <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)"
                      Caption="Birth Date:" />
    <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)"
                      Caption="Years Worked:" />
    <DxFormLayoutItem Field="@nameof(FormDataItem.Position)"
                      Caption="Position:">
        <DxComboBox Data="@(new List<string>() {
                                    "Sales Representative",
                                    "Designer" })"
                    Value="@(((string)((ValueEditContext)context).Value))"
                    ValueChanged="@((string value) =>
                            ((ValueEditContext)context).OnChanged(value))" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)"
                      Caption="On Vacation:" />
</DxFormLayout>

Run Demo: Form Layout - Bind to Data

#Input Validation

You can add the Form Layout component to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

For more information, refer to the following help topic: Validate Input.

FormLayout Validation

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout>
        <DxFormLayoutItem Caption="Identifier:" >
            <DxTextBox @bind-Text="@starship.Identifier" />
        </DxFormLayoutItem >
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship=new Starship();
}

Run Demo: Form Validation - Form Layout

#Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

#Inheritance

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