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:
- 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).
The Form Layout’s CaptionPosition property defines where to display caption labels. In this demo, the CaptionPosition property is set to Vertical to stack captions above associated editors.
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.
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.
Note that you cannot mix layout groups and items in one grid row. If an item precedes a group, the group is placed on a new row as if it had the BeginRow property set to true.
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.
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 FieldName 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.