Form Layout - Overview

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).
Name=Nancy Davolio, Email=NancyDavolio@sample.com, Birthday=11/16/1999 4:27:05 PM, Worked=3

Form Layout - Caption Position

The Form Layout’s 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.

Location=London, CheckIn=11/16/2019 4:27:05 PM, CheckOut=11/16/2019 4:27:05 PM

Form Layout - Item Wrapping

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.

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

Form Layout - Groups

A layout group (DxFormLayoutGroup) is a container for layout items (DxFormLayoutItem) and other layout groups. Layout groups, just like individual items, allow you to specify their width using the same set of ColSpanXX properties.

FirstName=Nancy, LastName=Davolio, Birthday=11/16/1999 4:27:05 PM
Position=Sales Representative, HireDate=11/16/1999 4:27:05 PM, Notes=Education includes a BA in psychology.
Personal Information
Work Information

Form Layout - Tabbed Groups

The Form Layout component allows you to group layout items and layout groups into tabbed containers. A tab page collection (DxFormLayoutTabPages) allows you to specify the active page using the ActiveTabIndex property.

FirstName=Nancy, LastName=Davolio, Birthday=11/16/1999 4:27:05 PM
Position=Sales Representative, HireDate=11/16/1999 4:27:05 PM, Notes=Education includes a BA in psychology.

Form Layout - Data Binding

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.

DataObject = { Name=Nancy Davolio, Birthday=11/16/1989 4:27:05 PM, Worked=3, Position=Sales Representative }