Overview

Mask loading...

Name=Nancy Davolio, Email=NancyDavolio@sample.com, BirthDate=10/22/2001 9:54:01 AM, YearsWorked=3, OnVacation=True

The DevExpress Form Layout component for Blazor allows you to easily construct responsive and automatically-aligned edit forms.

The Form Layout component uses the Bootstrap grid system markup: each layout item occupies between 1 and 12 virtual columns. This value can be defined separately for five different screen resolution types, as listed below:

  1. ColSpanXl - Extra large screens (1200px or wider).
  2. ColSpanLg - Large screens (992px or wider).
  3. ColSpanMd - Medium screens (768px or wider).
  4. ColSpanSm - Small screens (576px or wider).
  5. ColSpanXs - Extra small screens (less than 576px).

Form Layout items support different size modes. To specify the item's size in code, use the ItemSizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

Caption Position

Location=London, CheckIn=10/22/2021 9:54:01 AM, CheckOut=10/22/2021 9:54:01 AM

The CaptionPosition property defines where to display caption labels. In this demo, the CaptionPosition property is set to CaptionPosition.Vertical to stack captions above associated editors.

Item Wrapping

Address=120 Hanover Sq., City=London, ZipCode=WA1 1DP, Country=UK

All layout items are rendered as .col elements within a single .row container by default. An item moves to the next row if there are not enough columns within the current row. You can also use an item’s BeginRow property to explicitly indicate that it should be placed onto a new row.

Refer to the Bootstrap documentation for additional information on the Bootstrap Grid system.

Groups

Personal Information
Work Information

FirstName=Nancy, LastName=Davolio, BirthDate=10/22/2001 9:54:01 AM

Position=Sales Representative, HireDate=10/22/2001 9:54:01 AM, Notes=Education includes a BA in psychology.

A layout group (DxFormLayoutGroup is a container for layout items (DxFormLayoutItem and other layout groups.

The main group properties are:

  • A set of ColSpanXX properties - Specifies the width of a group.
  • Caption – Specifies the group caption.
  • Enabled - Specifies whether auto-generated editors in groups are enabled.
  • HeaderTemplate - Specifies the group header template. If you specify this property value, wrap the main group content in the Items component.
  • HeaderCssClass - Sets a custom CSS class applied to a group header.
  • ReadOnly - Specifies whether the group activates read-only mode for all nested auto-generated editors.

In this demo, the template adds the Unemployed checkbox to a group header. Click this checkbox to disable group items.

Tabbed Groups

FirstName=Nancy, LastName=Davolio, BirthDate=10/22/2001 9:54:01 AM

Position=Sales Representative, HireDate=10/22/2001 9:54:01 AM, Notes=Education includes a BA in psychology.

The Form Layout component allows you to group layout items and groups into tabbed containers.

The main tab-related properties are:

  • A set of ColSpanXX properties - Specifies the width of a tab.
  • ActiveTabIndex – Specifies the index of the selected tabbed layout item.
  • Caption – Specifies the Form Layout tab caption.
  • Enabled - Specifies whether auto-generated editors in tabs are enabled.
  • ReadOnly - Specifies whether the tab activates read-only mode for all nested auto-generated editors.
  • Visible - Specifies whether the tab is visible.

In this demo, the Form Layout component has two tabs. The Work Information tab is active.

Bind to Data

DataObject = { Name=Nancy Davolio, BirthDate=10/22/1991 9:54:01 AM, YearsWorked=3, Position=Sales Representative, OnVacation=False }

You can use the Form Layout component to display and edit data from an external source. In this demo, such data source is assigned to the Data property. Form Layout items must be declared and bound to data source fields using the Field property. Each item automatically displays a DevExpress data editor suitable for the target data type.

You can override the default behavior and assign a custom editor to a layout item. To see an example, review the code for the Position item below.