The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxFormLayout Class

A Form Layout component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxFormLayout :
    DxFormLayoutBase

Remarks

The DevExpress Form Layout for Blazor (<DxFormLayout>) allows you to construct responsive edit forms that are automatically arranged.

Blazor-FormLayout

Note

Online Demo: Form Layout - Overview

To add the <DxFormLayout> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxFormLayout>...</DxFormLayout> markup to your application.

  3. Add layout items <DxFormLayoutItem>...</DxFormLayoutItem> into the component's markup.

  4. Configure the component (see the sections below).

Layout Items

<DxFormLayout> consists of multiple layout items (DxFormLayoutItem) - containers that arrange nested Blazor components. An item can include a caption displayed against the corresponding component. To specify the item's nested component, use the item's Template property.

Blazor-FormLayout-Layout-Items

<DxFormLayout>
    <DxFormLayoutItem Caption="Contact Name:" ColSpanMd="6">
        <Template>
            <DxTextBox @bind-Text=@Name></DxTextBox>
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption="Birthday:" ColSpanMd="6">
        <Template>
            <DxDateEdit @bind-Date=@Birthday></DxDateEdit>
        </Template>
    </DxFormLayoutItem>
</DxFormLayout>

The Bootstrap grid system renders the <DxFormLayout>. You can specify the number of virtual columns each layout item occupies. This number is an integer between 1 and 12 that can be specified for five different screen resolutions:

  • ColSpanXl - Extra large screens (1200px or wider).
  • ColSpanLg - Large screens (992px or wider).
  • ColSpanMd - Medium screens (768px or wider).
  • ColSpanSm - Small screens (576px or wider).
  • ColSpanXs - Extra small screens (less than 576px).
<DxFormLayout>
    <DxFormLayoutItem Caption="Name" ColSpanLg="4" ColSpanMd="6" ColSpanSm="12">
        <Template>
            <DxTextBox @bind-Text=@Name></DxTextBox>
        </Template>
    </DxFormLayoutItem>
</DxFormLayout>

All layout items are rendered as .col elements within a single .row container. An item moves to the next row if there are not enough virtual columns within the current row. To explicitly indicate that the item should be placed into a new row, use an item’s BeginRow property.

<DxFormLayoutItem Caption="Postal/ZIP Code" BeginRow="true"></DxFormLayoutItem>
Note

Online Demo: Form Layout - Item Wrapping

The table below lists the main layout item settings.

Member

Description

CaptionPosition

Specifies if an item label's is positioned on the left or above a nested editor.

Field

Specifies a data source field a layout item is bound to.

Visible

Specifies whether a layout item is visible at runtime.

Bind to Data

<DxFormLayout> allows you to display and edit data from the data source fields. You do not have to bind each layout item to a data source and provide proper label captions that correspond to field names. This is done automatically. Bind the control to a data source via the Data property and specify which fields are to be displayed. To set up a correspondence between a data source field and a specific layout item, use the item's Field property. Once a user changes a layout item's value, post all changes to a data source. To do so, handle the ItemUpdating event.

Blazor-FormLayout-Data-Binding

<DxFormLayout Data=@editFormData ItemUpdating=@((fieldName, newValue) => OnItemUpdating(fieldName, newValue))>
    <DxFormLayoutItem Field=@nameof(FormDataItem.Name) Caption="Contact Name:" />
    <DxFormLayoutItem Field=@nameof(FormDataItem.Birthday) Caption="Birthday:" />
    <DxFormLayoutItem Field=@nameof(FormDataItem.Worked) Caption="Worked year(s):" />
    <DxFormLayoutItem Field=@nameof(FormDataItem.Position) Caption="Position:">
        <Template>
            <DxComboBox Data=@(new List<string>() { "Sales Representative", "Designer" })
                        SelectedItem=@(((string)((ValueEditingContext)context).Value))
                        SelectedItemChanged=@(value => ((ValueEditingContext)context).OnChanged(value))></DxComboBox>
        </Template>
    </DxFormLayoutItem>
</DxFormLayout>  
Note

Online Demo: Form Layout - Data Binding

Once a layout item is bound to a data source field, <DxFormLayout> tries to determine the corresponding data field's type. If the component successfully determines the type, it displays the corresponding editor within the layout item.

Field Data Type

Editor

String

Text box

Numeric

Spin Edit

Date

Date Edit

Other

Text box

To display a custom editor within a bound layout item, use the item's Template property.

Groups

A layout group (DxFormLayoutGroup) is a built-in container that allows you to combine layout items and other layout groups into titled panels. You can use the ColSpanXX properties (see the section above) to specify the width of layout groups.

Blazor-FormLayout-Groups

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

Tabs

A layout tab (DxFormLayoutTabPage) is a built-in tabbed container for layout items and groups. All the Layout Form's tabs are stored in the DxFormLayoutTabPages collection. To specify the active tab, use the zero-based ActiveTabIndex property.

Blazor-FormLayout-Tabs

<DxFormLayout>
    <DxFormLayoutTabPages ActiveTabIndex="1">
        ...
        <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:" ColSpanMd="6">
                <Template>
                    <DxTextBox @bind-Text=@Position></DxTextBox>
                </Template>
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                <Template>
                    <DxDateEdit @bind-Date=@HireDate></DxDateEdit>
                </Template>
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:" ColSpanMd="6">
                <Template>
                    <DxTextBox @bind-Text=@Notes></DxTextBox>
                </Template>
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>
Note

Online Demo: Form Layout - Tabbed Groups

Input Validation

The <DxFormLayout> supports Blazor's built-in data input validation and error indication. For more information, refer to ASP.NET Core Blazor forms and validation.

Blazor-FormLayout-Validation

The code below demonstrates how to use standard Blazor components to enable data validation in <DxFormLayout>.

  • <EditForm> - Enables Blazor's built-in data validation.
  • <DataAnnotationsValidator> - Activates validation via data annotations.
  • <ValidationSummary> - Summarizes validation messages.
<EditForm>
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6" >
            <Template >
                <DxTextBox @bind-Text="@starship.Identifier" />
            </Template >
        </DxFormLayoutItem >
        <DxFormLayoutItem ColSpanMd="12">
            <Template>
                <ValidationSummary />
            </Template>
        </DxFormLayoutItem>
    </DxFormLayout>
</EditForm>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also